原生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

步驟：

隨便拿個地址，比如百度。

• http://www.baidu.com?aa=11&callback=my_jsonp04349289664328899

• 要處理的就是地址（?及之前的內容）

• 參數（?後面的內容）

• 回調函數

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