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