码迷,mamicode.com
首页 > Web开发 > 详细

手写个jsonp

时间:2017-08-26 12:54:29      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:end   for   ace   rip   nbsp   doc   center   random   back   

原生jsonp具体实现

先上代码:

    //http://www.baidu.com?aa=11&callback=my_jsonp04349289664328899
    var jsonp = function(url,param,callback){
        //处理url地址,查找?,如果没有?这个变量就有一个"?",有?这个变量接收一个&
        var querystring = url.indexOf("?") == -1?"?":"&";

        //处理参数{xx:xx}
        for(var k in param) {
            querystring += k + "=" + param[k] + ‘&‘;//?k=para[k]
        }

        //处理回调函数名
        var random = Math.random().toString().replace(".","");
        var cbval = "my_jsonp" + random;
        var cb = "callback="+cbval;

        querystring += cb;

        var script = document.createElement("script");
        script.src = url + querystring;

        //把回调函数的名字附给window
        window[cbval] = function(param) {
            //这里执行回调的操作,用回调来处理参数
          callback(param);
          //拿到了就删掉这个script
          document.body.removeChild(script);
        };
        document.body.appendChild(script);
    }

    jsonp(
        "https://www.baidu.com",
        {aa:11},
        function(){
            console.log(param);
        }
        );

思路:

  1. 先抽象需要处理的字符串

  2. 处理完url,创建一个新的script标签挂到页面上

  3. 把处理好的回调函数挂到window对象上

  4. 回调完再删掉script

步骤:

随便拿个地址,比如百度。

var jsonp = function(url,para,callback){}
//地址、参数、回调

开始处理url地址

  • 域名是我们自己传进去的,所以只要处理?之后的内容就好了

var queryString = url.indexOf("?") == -1?"?":"&";
//看url里面有没有?,如果有说明只要传参数就好了,没有的话queryString默认是?

//给地址传参数一般都是要好几个,所以这里的数据格式是一个对象,如{aa:11}
for(var k in para) {
  queryString += k + ‘=‘ + para[k] + ‘&‘;
  //?aa=11&
}

处理回调函数

  • 仿jQ的思路,函数名随机,避免和页面的某个函数重名

  • 需要一个随机非浮点数

  • 参数名

var random = Math.random().toString().replace(".","");//随机非浮点数
var cbvalue = "jp" + random;//不能用数字开头做函数名
var cb = "callback=" + cbvalue;//callback = jp016548432158485
queryString += cb;//放到处理url字符串的后面

创建一个script

var script = document.createElement("script");
script.src = queryString;
document.body.appendChild(script);

把回调函数挂载到页面上,并传参

window[cbvalue] = function(para){
  callback(para);
  //拿完了参数就删掉,过河拆桥
  document.body.removeChild(script);
}

完成,尝试调用

jsonp("www.jd.com",{num:10},function(){
  console.log(para);
})

 

手写个jsonp

标签:end   for   ace   rip   nbsp   doc   center   random   back   

原文地址:http://www.cnblogs.com/zzc5464/p/jsonp.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!