Ajax 跨域请求

发表于 | 分类于 ， ，

如今大都要用到跨域的方法请求数据，网上的方法也是各式各样，这里我重点介绍两种不同的跨域形式。

跨域请求接口

主要介绍两种jquery的方式

$.getJSON

此方法简单粗暴，如果你对ajax还算了解，推荐使用此方法，一步搞定。

1
$.getJSON("http://xxxxxxxxxxx/xxxxxxxx/xxxxxx/list?callback=?","name=zhangsan&id=10",function (json){})

这个方法jquery会自动判断是否跨域，如果跨域，则jquery会以jQuery1345xxxxxxxxxxx的形式自动填充callback，后端获取到这一串名，直接执行，你在回调函数就能收到后端返回的数据

第二个部分传递的data可以按照官方格式（也就是name=xx&id=xx）来传递，也可以以json形势传递。

$.ajax

这个方法为什么放到第二个来说？主要是涉及到的几个参数需要与第一种方法对比解释：

1
2
3
4
5
6
7
8
9
10
$.ajax({
      url:"http://xxxxxxxxxxxxxxx",
      type:"get",    //必须是get，jsonp跨域只支持get方法。
      datatype:"jsonp",
      jsonp:"callback", //这个jsonp是什么意思？看到第一种方法的callback没？如果你不设置jsonp，那么默认回调函数参数名就是callback，但是最好别改，因为这是向服务器发送请求的函数参数名，服务端拿到该参数的值value后以"value({\"userid\":0,\"username\":\"null\"})"的形式返回给客户端数据
      jsonpcallback:"mycallback",//这里的jsonpcallback就是回调函数名，我在第一种方法中说道过，使用getJSON时，回调函数的名字由query自动填充，如果设置了就是按照你的名字返回。即可以在success方法外调用该函数获得返回值
      success:function(json){    
        //do something   
         }
})

跨域请求文件

有些时候我们可能需要跨域请求一些文件，那么这个时候就没有后端的童鞋给你合作，显然我们jQuery请求接口的方式不起作用了。那么这个时候就需要用到咱们jsonp跨域的的原理了。

jsonp本质

是通过script标签请求数据，然后返回的数据再用一个函数来包装。

jsonp原理

因为咱们的src是没有跨域的限制的，所以我们通过script标签跨域请求资源的原理来间接的请求数据。

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Jsonp Test</title>
</head>
<body>
 <script type="text/javascript">
        function getData(data){
            console.log(data.name);
        }
 </script>
</body>
<script type="text/javascript" src="test.json"></script>
</html>

这里我们定义了一个getData的方法，来获取咱们src读取的资源，相当于请求成功的回调函数。

test.json Code

1
getData({"name":"pwh","sex":"23"})

这里咱们用getData把数据包装起来，齐活儿！
执行上述代码，即可实现咱们利用jsonp原理请求文件！

Do the best!