JavaScript基礎(chǔ)：手寫實現(xiàn)JSONP

2021-4-9    前端達(dá)人

在這里插入圖片描述

一、原理

jsonp的核心原理是利用script標(biāo)簽沒有同源限制的方式，可以發(fā)送跨域的get請求（只能發(fā)送get請求）。script標(biāo)簽中的src屬性將請求參數(shù)和當(dāng)前請求的回調(diào)函數(shù)名拼接在鏈接上。最終由服務(wù)端接收到請求之后拼接成前端可執(zhí)行的字符串的形式返回。這個結(jié)果字符串最終會在前端的script標(biāo)簽中解析并執(zhí)行。

利用<script>標(biāo)簽沒有跨域限制的漏洞,網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的JSON數(shù)據(jù)。JSONP請求一定需要對方的服務(wù)器做支持才可以。

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

二、實現(xiàn)

1.正常實現(xiàn)

  1. 將jsonp回調(diào)函數(shù)的名稱callbackName拼接到src上
  2. 構(gòu)建一個script標(biāo)簽，設(shè)置它的src屬性
  3. 在全局設(shè)置一個callbackName回調(diào)函數(shù)，等待script標(biāo)簽請求結(jié)束，并調(diào)用 
 /**
     * jsonp獲取請求數(shù)據(jù)
     * @param {object}options
     */ function jsonp(options) { // console.log(options); // 1. 產(chǎn)生不同的函數(shù)名(函數(shù)名隨機) let callBackName = 'itLike' + Math.random().toString().substr(2)+Math.random().toString().substr(2); // console.log(callBackName); // 2. 產(chǎn)生一個全局函數(shù) window[callBackName] = function (params) { // console.log(params); // console.log(options.success); if(params !== null){ options.success(params); }else{ options.failure(params); } // 2.1 刪除當(dāng)前腳本標(biāo)簽 scriptE.remove(); // 2.2 將創(chuàng)建的全局函數(shù)設(shè)為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. 創(chuàng)建script標(biāo)簽 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
    
    •

服務(wù)端(express) 

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

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

調(diào)用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(數(shù)據(jù)請求失敗); } }); });  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    •

2.利用promise封裝

  1. 聲明一個回調(diào)函數(shù),其函數(shù)名(如show)當(dāng)做參數(shù)值,要傳遞給跨域請求數(shù)據(jù)的服務(wù)器,函數(shù)形參為要獲取目標(biāo)數(shù)據(jù)(服務(wù)器返回的data)
  2. 創(chuàng)建一個 <script src=>標(biāo)簽 ,把那個跨域的API數(shù)據(jù)接口地址,賦值給script的src， 還要在這個地址中向服務(wù)器傳遞該函數(shù)名(可以通過問號傳參?callback=show)。
  3. 服務(wù)器接收到請求后,需要進行特殊的處理:把傳遞進來的函數(shù)名和它需要給你的數(shù)據(jù)拼接成一個字符串,例如:傳遞進去的函數(shù)名是show,它準(zhǔn)備好的數(shù)據(jù)是 show('前端收割機')。
  4. 最后服務(wù)器把準(zhǔn)備的數(shù)據(jù)通過HTTP協(xié)議返回給客戶端,客戶端再調(diào)用執(zhí)行之前聲明的回調(diào)函數(shù)(show),對返回的數(shù)據(jù)進行操作。 
/**
* jsonp獲取請求數(shù)據(jù)
* @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
    
    •

服務(wù)器（express） 

// 后端響應(yīng) // 這里用到了 express var express = require('express'); var router = express.Router(); var app = express(); router.get('/say',function(req,res,next) { //要響應(yīng)回去的數(shù)據(jù) let data = { username : 'zs', password : 123456 } let {wd , callback} = req.query; console.log(wd); console.log(callback); // 調(diào)用回調(diào)函數(shù) , 并響應(yīng) 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
    
    •

調(diào)用jsonp 

// 前端調(diào)用 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
    
    •

三、總結(jié)

基本原理：利用 script 標(biāo)簽的 src 沒有跨域限制來完成實現(xiàn)。

優(yōu)缺點：只能 GET；兼容性好。

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



轉(zhuǎn)自：csdn論壇 作者：imagine_tion

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日歷

鏈接

個人資料

存檔