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的方法。这样我们就接收到了后端返回给我们的对象。
var $ = {
ajax: function (options) {
var url = options.url;
var type = options.type;
var dataType = options.dataType;
var targetProtocol = "";
var targetHost = "";
if (url.indexOf("http://") == 0 || url.indexOf("https://") == 0) {
var targetUrl = new URL(url);
targetProtocol = targetUrl.protocol;
targetHost = targetUrl.host;
} else {
targetProtocol = location.protocol;
targetHost = location.host;
}
if (dataType == "jsonp") {
if (location.protocol == targetProtocol && location.host == targetHost) {
} else {
var callback = "cb" + Math.floor(Math.random() * 1000000);
window[callback] = options.success;
var script = document.createElement("script");
if (url.indexOf("?") > 0) {
script.src = url + "&callback=" + callback;
} else {
script.src = url + "?callback=" + callback;
}
script.id = callback;
document.head.appendChild(script);
}
}
}
}
$.ajax({
url: "#",
type: "get",
dataType: "jsonp",
success: function (data) {
console.log(data);
}
});