原生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是提供的回調函數容易重名，又在每次執行完成後銷毀回調函數減少代碼冗餘。

 1 <script>
 2     /* 
 3      * 封裝JSONP 
 4      * url: 跨域地址
 5      * callback：處理數據的回調函數
 6      */
 7     function getJSONP(url, callback) {
 8       if (!url) { // url為空，則退出
 9         return;
10       }  
11 
12       // 隨機生成工具函數的函數名
13       var fnName = '_JSONP'+ parseInt(Math.random()*100);
14       // 將這個沒有賦值的函數名變成getJSONP的屬性，因為函數名是以字元串形式提交，因此此處更改之後url中提交的形式為cb=getJSONP._JSONPXX。XX為兩個隨機生成的數字

15       var jsonp_attr = 'getJSONP.' + fnName;
16 
17       // 判斷url地址中是否含有'?'
18       // 百度伺服器JSONP回調函數key屬性是'cb'，為配合下邊鏈接，這裡用'cb=',實際情況根據伺服器提供的介面更改
19       if (url.indexOf('?') === -1) {
20         url += '?cb=' + jsonp_attr;
21       }
22       else{
23         url += '&cb=' + jsonp_attr;
24       }
25 
26       
27 
28       // 動態創建script標簽
29       var script = document.createElement('script');
30       // 為script標簽src屬性賦值
31       script.src = url;
32 
33       // 定義工具函數，並將工具函數賦給getJSONP的屬性fnName
34       getJSONP[fnName] = function (data) {
35         try {
36           // 跨域成功，通過回調函數，處理數據
37           callback && callback(data);
38         } catch (error) {
39           // 
40         }
41         finally{
42           // 數據處理完成後，刪除工具函數，以及實現跨域用的動態生成的script標簽
43           delete getJSONP[fnName];
44           script.parentNode.removeChild(script);
45         }
46       }
47 
48 
49       // 將動態生成的script標簽添加到DOM，這一步發出跨域請求
50       document.getElementsByTagName('head')[0].appendChild(script);
51     }
52 
53     // 使用封裝好的getJSONP函數
54     // 獲取在百度搜索欄輸入"iPhone"時，自動完成功能返回的數據，註意將原來鏈接中回調刪除
55     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) {
56       console.log(data);
57     });
58   </script>