2021-4-9 前端達人
jsonp的核心原理是利用script標簽沒有同源限制的方式，可以發(fā)送跨域的get請求（只能發(fā)送get請求）。script標簽中的src屬性將請求參數和當前請求的回調函數名拼接在鏈接上。最終由服務端接收到請求之后拼接成前端可執(zhí)行的字符串的形式返回。這個結果字符串最終會在前端的script標簽中解析并執(zhí)行。
利用<script>標簽沒有跨域限制的漏洞,網頁可以得到從其他來源動態(tài)產生的JSON數據。JSONP請求一定需要對方的服務器做支持才可以。
JSONP和AJAX對比： JSONP和AJAX相同,都是客戶端向服務端發(fā)送請求,從服務端獲取數據的方式。但AJAX屬于同源策略,JSONP屬于非同源策略(跨域請求)。
JSONP優(yōu)缺點： JSONP優(yōu)點是簡單兼容性好,可用于解決主流瀏覽器的跨域數據訪問的問題。缺點是僅僅支持get方法具有局限性,不安全，可能會遭受XSS攻擊。
jsonp回調函數的名稱callbackName拼接到src上
script標簽，設置它的src屬性
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 將創(chuàng)建的全局函數設為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標簽 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(數據請求失敗); } }); });
show)當做參數值,要傳遞給跨域請求數據的服務器,函數形參為要獲取目標數據(服務器返回的data)
<script src=>標簽 ,把那個跨域的API數據接口地址,賦值給script的src， 還要在這個地址中向服務器傳遞該函數名(可以通過問號傳參?callback=show)。
show,它準備好的數據是 show('前端收割機')。
HTTP協議返回給客戶端,客戶端再調用執(zhí)行之前聲明的回調函數(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 沒有跨域限制來完成實現。
優(yōu)缺點：只能 GET；兼容性好。
簡單實現：通過 url, params, callback 來定義 JSONP() 方法的參數。
轉自：csdn論壇 作者：imagine_tion
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.yvirxh.cn