jquery 源码分析8-ajax(D)JSONP跨域处理

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