jquery 源码分析8-ajax(D)JSONP跨域处理
跨域说白就是在一个页面获取不同服务器的资源,浏览器不允许跨域是为了安全,假设很容易的跨域,很容易的就注入自己的脚本,那就不用玩了;但有时候开发面对一些业务又是必须得通过跨域解决的,在前端处理跨域问题,一般有ifame,和JSONP,JSONP的原理是web页面在加载img,script这些有src属性的是可以跨域的,我们通过这个原理就可以将我们就可以造一个请求script的资源的请求,然后将这个资源绑定到某个element上,就可以将数据获取到了,下面是一个获取script的方法:
function getScript(url) {
var head = document.getElementsByTagName("head")[0] || document.documentElement,
script = document.createElement("script");
script.type = "text/javascript";
script.text = url;
);
}
这这个是一个javasritp资源,但我们一般跨域,获取到数据是要对数据进行处理的,需要把方法改改就可以了
function getJSONP(url) {
debugger;
var head = document.getElementsByTagName("head")[0] || document.documentElement,
script = document.createElement("script");
var jsonp = "jsonp"+now();
script.type = "text/javascript";
script.src = url+"?callback="jsonp;
head.appendChild(script);
window.jsonp = function(data){
console.log(data);
};
};
jquery 也是通过这种方式,然后将callback获取的数据传递给success函数,然后移除对应的script的标签;
如下,这样我们就可以处理数据了;从这里看,
jsonp的本质和XMLHttpRequest是不一样的,只是封装在ajax里面;实现方式是不一样的,json处理数据也是局限的,对返回的数据是有限制的。
window.jsonp = function(data){
success(data);
complete(data);
// Garbage collect
window[ jsonp ] = undefined;
try{ delete window[ jsonp ]; } catch(e){}
if ( head )
head.removeChild( script );
};