JavaScript基礎：手寫實作JSONP

一、原理

jsonp的核心原理是利用script標簽沒有同源限制的方式，可以發送跨域的get請求（只能發送get請求），script標簽中的src屬性將請求引數和當前請求的回呼函式名拼接在鏈接上，最終由服務端接收到請求之后拼接成前端可執行的字串的形式回傳，這個結果字串最侄訓在前端的script標簽中決議并執行，

利用<script>標簽沒有跨域限制的漏洞,網頁可以得到從其他來源動態產生的JSON資料，JSONP請求一定需要對方的服務器做支持才可以，

1. JSONP和AJAX對比： JSONP和AJAX相同,都是客戶端向服務端發送請求,從服務端獲取資料的方式，但AJAX屬于同源策略,JSONP屬于非同源策略(跨域請求)，
2. JSONP優缺點： JSONP優點是簡單兼容性好,可用于解決主流瀏覽器的跨域資料訪問的問題，缺點是僅僅支持get方法具有局限性,不安全，可能會遭受XSS攻擊，

二、實作

1.正常實作

1. 將jsonp回呼函式的名稱callbackName拼接到src上
2. 構建一個script標簽，設定它的src屬性
3. 在全域設定一個callbackName回呼函式，等待script標簽請求結束，并呼叫

    /**
     * jsonp獲取請求資料
     * @param {object}options
     */
    function jsonp(options) {
        // console.log(options);
        // 1. 產生不同的函式名(函式名隨機)
        let callBackName = 'itLike' + Math.random().toString().substr(2)+Math.random().toString().substr(2);
        // console.log(callBackName);
        // 2. 產生一個全域函式
        window[callBackName] = function (params) {
            // console.log(params);
            // console.log(options.success);
            if(params !== null){
                options.success(params);
            }else{
                options.failure(params);
            }

            // 2.1 洗掉當前腳本標簽
            scriptE.remove();
            // 2.2 將創建的全域函式設為null
            window[callBackName] = null;
        };

        // 3. 取出url地址
        let jsonpUrl;
        if(options.data !== undefined){
            jsonpUrl = options.url + '?' + options.data + '&callBack=' + callBackName;
        }else {
            jsonpUrl = options.url + '?callBack=' + callBackName;
        }
        // console.log(jsonpUrl);

        // 4. 創建script標簽
        let scriptE = document.createElement('script');
        scriptE.src = jsonpUrl;
        document.body.appendChild(scriptE);
    }

服務端(express)

router.get('/api/v1', function(req, res, next) {
  res.json({
    'name': '前端收割機',
    'address': '廣東',
    'intro': '前端技術交流公眾號'
  });
});

呼叫jsonp

btn.addEventListener('click', ()=>{
        jsonp({
            url: 'http://localhost:3000/api/v1',
            data: 'name=前端收割機&age=20',
            success: function (data) {   
                console.log(data);
            },
            failure:function(data){
                console.log(資料請求失敗);
            }
        });
    });

2.利用promise封裝

1. 宣告一個回呼函式,其函式名(如show)當做引數值,要傳遞給跨域請求資料的服務器,函式形參為要獲取目標資料(服務器回傳的data)
2. 創建一個 <script src=>標簽 ,把那個跨域的API資料介面地址,賦值給script的src， 還要在這個地址中向服務器傳遞該函式名(可以通過問號傳參?callback=show)，
3. 服務器接收到請求后,需要進行特殊的處理:把傳遞進來的函式名和它需要給你的資料拼接成一個字串,例如:傳遞進去的函式名是show,它準備好的資料是 show('前端收割機')，
4. 最后服務器把準備的資料通過HTTP協議回傳給客戶端,客戶端再呼叫執行之前宣告的回呼函式(show),對回傳的資料進行操作，

/**
* jsonp獲取請求資料
* @param {string}url
* @param {object}params
* @param {function}callback
*/
function jsonp({ url, params, callback }) {
    return new Promise((resolve, reject) => {
        let script = document.createElement('script');
        params = JSON.parse(JSON.stringify(params));
        let arrs = [];
        for (let key in params) {
            arrs.push(`${key}=${params[key]}`);
        }
        arrs.push(`callback=${callback}`);
        script.src = `${url}?${arrs.join('&')}`;
        document.body.appendChild(script);
        window[callback] = function (data) {
            resolve(data);
            document.body.removeChild(script);
        }
    })
}

服務器（express）

// 后端回應
// 這里用到了 express
var express = require('express');
var router = express.Router();
var app = express();

router.get('/say',function(req,res,next) {
 //要回應回去的資料
  let data = {
    username : 'zs',
    password : 123456
  }

  let {wd , callback} = req.query;
  console.log(wd);
  console.log(callback);
  // 呼叫回呼函式 , 并回應
  res.end(`${callback}(${JSON.stringify(data)})`);
})
app.use(router);
app.listen(3000);

呼叫jsonp

// 前端呼叫
btn.addEventListener('click', ()=>{
        jsonp({
    		url: 'http://localhost:3000/say',
    		params: {
        		wd: '前端收割機'
    		},
    			callback: 'show'
		}).then(data => {
    			console.log(data)
		});
    });

三、總結

基本原理：利用 script 標簽的 src 沒有跨域限制來完成實作，

優缺點：只能 GET；兼容性好，

簡單實作：通過 url, params, callback 來定義 JSONP() 方法的引數，

參考連接：https://juejin.cn/post/6844904094973296654#heading-5