JSONP原理

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方法的执行

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