手寫個jsonp

標籤：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

步驟：

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

• 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 = jp016548432158485queryString += 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