模仿jQuery封装JSONP

之前已经了解过JSONP的本质，就直接贴上代码，就不一步一步分析了。

目的在于，理解jQuery中的jsonp实现跨域的底层代码；

JSONP封装的关键点在于向window中添加一个cbName的变量。

封装的代码如下：

function ajax(obj){
    // jsonp仅仅支持get请求
    var defaults = {
        url : '#',
        dataType : 'jsonp',
        jsonp : 'callback',
        data : {},
        success:function(data){console.log(data);}
    }

    for(var key in obj){
        defaults[key] = obj[key];
    }
    // 这里是默认的回调函数名称
    // expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),jQuery底层有对version进行处理
    var cbName = 'jQuery' + ('1.12.2' + Math.random()).replace(/\D/g,"") + '_' + (new Date().getTime());
    if(defaults.jsonpCallback){
        cbName = defaults.jsonpCallback;
    }

    // 这里就是回调函数，调用方式：服务器响应内容来调用
    // 向window对象中添加了一个方法，方法名称是变量cbName的值
    window[cbName] = function(data){
        defaults.success(data);//这里success的data是实参
    }

    var param = '';
    for(var attr in defaults.data){
        param += attr + '=' + defaults.data[attr] + '&';
    }
    if(param){
        param = param.substring(0,param.length-1);
        param = '&' + param;
    }
    var script = document.createElement('script');
    script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);

    // abc({"username":"zhangsan","password":"123"})
}

特别需要注意的是：
上面的代码中，defaults.success(data);success的data为实参，形参为实例的js中的data，可回顾JSONP的本质

举个实例，进行验证封装的代码的合理性：

html文件部分：

注意，跨域的地址为虚拟的服务器，自己配置多个服务器进行测试

jsonp.php代码部分：

"zs","password"=>"123");
  echo $cb.'('.json_encode().')';
 ?>

$_GET[‘cb’]中的名字，前端须保持和后端一致，以后端为准；