本文共 3048 字，大约阅读时间需要 10 分钟。

jsonp原理

//因为我想从一个接口获取一个数据        //但是这个接口和当前页面不是同源的（也就是跨域了）        //但是这个接口是支持JSONP的        //script标签，有src属性，所以可以发出网络请求        //script标签，虽然可以引用其他域的资源，浏览器不限制        // 但是，浏览器会将返回的内容，作为js代码执行        //例如asd({"status":"ok","msg":"Hello There is duYi edu"})        //相当于调用了asd方法，传入了一个json对象作为参数        //JSONP 原理：        // 1.判断请求与当前页面的域，是否相同，如果同源则发送正常的ajax，就没有跨域的事情了。        // 2.如果不同源，生成一个script标签        // 3.生成一个随机的callback名字，还得创建一个名为这个callback名字的方法        // 4.设置script标签的src，设置为要请求的接口。        // 5.将callback作为参数拼接在后面。        // ========以上部分是前端部分======$        // 6.后端接收到请求后，开始准备要返回的数据        // 7.后端拼接数据，将要返回的数据用callback的值和括号包裹起来        //      例如  callback=asd123  要返回的数据为{"a":1,"b":2},        //      就要拼接为  asd123({"a":1,"b":2})        // 8.将内容返回        // ========以上的后端部分=====$        // 9.浏览器接收到内容，会当做js代码来执行        // 10.从而执行名为asd123的方法，这样我们就接收到了后端返回给我们的对象

下面是代码部分

var $ = {
               ajax:function(options){
                   var url = options.url;                var type = options.type;                var dataType = options.dataType;                //判断是否同源（协议，域名，端口）                //获取目标url的域                var targetProtocol ='' //目标接口的协议                var targetHost =''//目标接口的host，host是包含域名和端口的                //如果url不带http，那么访问的一定是相对路径，相对路径一定是同源的                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                }                //首先判断是否为jsonp 因为不是jsonp不做其他的判断，直接发送ajax                if(dataType == 'jsonp'){
                       //要看是否同源                    if(location.protocol == targetProtocol && location.host == targetHost){
                                //同源  jsonp当做普通的ajax                    }else{
   //不同源                       //随机生成一个callback                       var callback = 'cb' + Math.floor(Math.random()* 10000)                       //给window上添加一个方法                       window[callback] = options.success                       //生成script标签                       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:"http://developer.duyiedu.com/edu/testJsonp",            type: 'get',            dataType: 'jsonp',            success: function(data){
                   console.log(data);            }        })

这是请求回来的数据

cb2627()相当于是返回来的一个js语句 方法名为cb2627方法的执行

下面是执行之后打印出来的数据

转载地址：http://ojzki.baihongyu.com/