一、原理

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); }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

服務端(express)

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


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

調用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(數據請求失敗); } }); });  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

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); } }) }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

服務器（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);  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

調用jsonp

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



 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

三、總結

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

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

簡單實現：通過 url, params, callback 來定義 JSONP() 方法的參數。

轉自：csdn論壇 作者：imagine_tion

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務