JSONP原理

Posted 2020-11-15 dlc1996

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 });