JSONP原理

1.判断请求当前页面的域,是否同源,如果同源则发送正常的ajax,就没有跨域的事情。
2.如果不同源,生成一个script标签
3.生成一个随机的callback名字,还得创建一个名为这个的方法。
4.设置script标签的src,设置为要请求的接口。
5.将callback作为参数拼接在后面。
6.后端接收到请求后,开始准备要返回的数据。
7.后端拼接数据,将要返回的数据用callback的值和括号包裹起来。
例如:callback=asd123456,要返回的数据为({"a":1,"b":2}),就要拼接为asd123456({"a":1,"b":2})。
8.将内容返回。
9.浏览器接收到内容,会当做js代码来执行。
10.从而执行名为asd123456的方法,这样我们就接收到了后端返回给我们的对象。

 1 var $ = {
 2     ajax: function(options) {
 3         var url = options.url;
 4         var type = options.type;
 5         var dataType = options.dataType;
 6         //判断是否同源(协议,域名,端口号)
 7         //获取目标url的域
 8         var targetProtocol = ""; //目标接口的协议
 9         var targetHost = ""; //目标接口的host,host是包含域名和端口号的
10         //如果url不带http,那么访问的一定是相对路径,相对路径一定是同源的。
11         if (url.indexof("http://") == 0 || url, indexof("https://") == 0) {
12             var targetUrl = new URL(url);
13             targetProtocol = targetUrl.Protocol;
14             targetHost = targetUrl.host;
15         } else {
16             targetProtocol = location.protocol;
17             targetHost = location.host;
18         }
19         //首先判断是否为jsonp,因为不是jsonp不用做其它的判断,直接发送ajax
20         if (dataType == "jsonp") {
21             //要看是否同源
22             if (location.protocol == targetProtocol && location.host == targetHost) { //表示同源
23                 //因为同源,jsonp会当做普通的ajax做请求
24             } else { //不同源,跨域
25                 //随机生成一个callback
26                 var callack = "cb" + Math.floor(Math.random() * 100000);
27                 //给window上添加一个方法
28                 window[callback] = options.success;
29                 //生成script标签
30                 var script = document.createElement("script");
31                 if (url.indexOf("?") > 0) { //表示已经有参数了
32                     script.src = url + "&callback=" + callback;
33                 } else {
34                     script.src = url + "?callback=" + callback;
35                 }
36                 script.id = callback;
37                 document.head.appendChild(script);
38             }
39         }
40     }
41 }
42 $.ajax({
43     url: "http://developer.duiyiedu.com/edu/testJsonp",
44     type: "get",
45     dataType: "jsonp",
46     success: function(data) {
47         console.log(data);
48     }
49 });

 

上一篇:javascript – 跨域jquery ajax(Jsonp):未捕获的SyntaxError:意外的令牌:(冒号)


下一篇:jsonp跨域的原理