原生JS簡單封裝JSONP跨域獲取數據

用原生JS封裝一個簡單的JSONP，主要是用來理解前端是怎么實現JSONP的。

 

JSONP跨域是借助<img><script>的src屬性，<link>的href屬性能夠鏈接外部網站，來實現跨域請求數據。

將跨域請求的鏈接和參數以鏈接的方式提交給服務器，同時在鏈接中附帶本地接收JSONP數據函數的函數名，當服務器查找數據完畢后，調用該函數，並將數據以函數參數形式傳出。

 

首先，使用使用JSONP跨域，不是直接返回一個數據對象，而是本地向服務器提供一個可供調用的函數fn，由服務器調用，並跨域請求的數據對象注入fn的參數。也就是說，跨域請求數據，是將本地用來接受JSONP數據對象的函數的函數名提交給服務器，由服務器來調用。

其次，因為網頁中會頻繁使用到JSONP，本地用來接收JSONP數據的函數將會有很多，從而導致代碼冗余，占用資源。

因此，采取以下方法接收JSONP跨域請求得到的數據：

1、在封裝函數Fun中隨機生成一個變量名fn；

2、將fn保存為封裝函數Fun的屬性(即：Fun[fn])，或者window的全局屬性；

3、將fn提交給服務器做為本地接收JSONP函數的函數名；

4、定義本地接收JSONP數據的匿名函數，並將匿名函數賦值給封裝函數Fun的屬性fn(Fun[fn] = function(data){...})；

5、將匿名函數中接收到的data傳出，或在匿名函數中調用封裝函數傳入的回調函數(如果有的話);

6、刪除Fun[fn]屬性，也就是銷毀接收函數。

這樣，既解決本地用來接收JSONP是提供的回調函數容易重名，又在每次執行完成后銷毀回調函數減少代碼冗余。

<script>
    /* 
     * 封裝JSONP 
     * url: 跨域地址
     * callback：處理數據的回調函數
     */
    function getJSONP(url, callback) {
      if (!url) { // url為空，則退出
        return;
      }  

      // 隨機生成工具函數的函數名
      var fnName = '_JSONP'+ parseInt(Math.random()*100);
      // 將這個沒有賦值的函數名變成getJSONP的屬性，因為函數名是以字符串形式提交，因此此處更改之后url中提交的形式為cb=getJSONP._JSONPXX。XX為兩個隨機生成的數字

      var jsonp_attr = 'getJSONP.' + fnName;

      // 判斷url地址中是否含有'?'
      // 百度服務器JSONP回調函數key屬性是'cb'，為配合下邊鏈接，這里用'cb=',實際情況根據服務器提供的接口更改
      if (url.indexOf('?') === -1) {
        url += '?cb=' + jsonp_attr;
      }
      else{
        url += '&cb=' + jsonp_attr;
      }

      

      // 動態創建script標簽
      var script = document.createElement('script');
      // 為script標簽src屬性賦值
      script.src = url;

      // 定義工具函數，並將工具函數賦給getJSONP的屬性fnName
      getJSONP[fnName] = function (data) {
        try {
          // 跨域成功，通過回調函數，處理數據
          callback && callback(data);
        } catch (error) {
          // 
        }
        finally{
          // 數據處理完成后，刪除工具函數，以及實現跨域用的動態生成的script標簽
          delete getJSONP[fnName];
          script.parentNode.removeChild(script);
        }
      }


      // 將動態生成的script標簽添加到DOM，這一步發出跨域請求
      document.getElementsByTagName('head')[0].appendChild(script);
    }

    // 使用封裝好的getJSONP函數
    // 獲取在百度搜索欄輸入"iPhone"時，自動完成功能返回的數據，注意將原來鏈接中回調刪除
    getJSONP('https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1436,31325,21091,31424,31341,31464,30824,31164&wd=iPhone&req=2&csor=6&pwd=iph&_=1588427887099', function (data) {
      console.log(data);
    });
  </script>