[轉(zhuǎn)帖]jsonp 詳解 —— 終于搞懂 jsonp 了
當(dāng)前位置：點(diǎn)晴教程→知識管理交流
→『 技術(shù)文檔交流 』
 ：jsonp 詳解 —— 終于搞懂 jsonp 了 jsonp 詳解 —— 終于搞懂 jsonp 了 學(xué)習(xí)一定要一步一個腳印扎實(shí)學(xué)，最近跟著 kerwin 老師學(xué)習(xí) node.js 時，又遇到了jsonp，當(dāng)看到這個東西的時候感到既熟悉又陌生，只能說之前學(xué)的太過草率了，沒有對學(xué)過的東西做總結(jié)。這次我翻閱很多優(yōu)秀文章和視頻，徹底弄懂了 jsonp 是什么東西，并在這里做好記錄，方便自己日后查看。 什么是 jsonp ？ JSONP 不是一門編程語言，也不是什么特別的技術(shù)，它更像一個漏洞，程序員可以利用這個漏洞，實(shí)現(xiàn)跨域（可以簡單理解為跨域名）傳輸數(shù)據(jù)。在介紹 JSONP 之前，先來介紹一下瀏覽器的同源策略。 「同源策略」 同源策略是由 Netscape（網(wǎng)景） 提出的一個著名的安全策略，現(xiàn)在所有支持 Javascript 的瀏覽器都會使用這個策略。 所謂同源是指域名、協(xié)議、端口都相同。以 http://www.xxxxx.com:80/ 為例，http:// 為協(xié)議，域名是 www.xxxxx.com，端口是80（提示：80 為默認(rèn)端口，可以省略，若為其它端口則必須顯示定義）。 為了安全，瀏覽器不允許進(jìn)行跨域請求。當(dāng)我們通過 Ajax 在網(wǎng)頁和服務(wù)器之間發(fā)送或接收數(shù)據(jù)時，需要保證網(wǎng)頁與所請求的地址是同源的，否則無法請求成功。同源策略可以防止 Javascript 腳本從您的網(wǎng)站中讀取數(shù)據(jù)，并將數(shù)據(jù)發(fā)送到其它的網(wǎng)站。如果沒有同源策略，很有可能會有惡意的程序泄露您網(wǎng)站中的內(nèi)容。 雖然同源策略在一定程度上提高了網(wǎng)站的安全，但也會給程序員帶來一些麻煩，例如在訪問一些開發(fā)接口時，由于同源策略的存在，會調(diào)用失敗。要解決這種問題就需要用到跨域，跨域的方法有許多種，其中最經(jīng)典的就是 JSONP。 「JSONP」 JSONP 全稱“JSON with Padding”，譯為“帶回調(diào)的 JSON”，它是 JSON 的一種使用模式。通過 JSONP 可以繞過瀏覽器的同源策略，進(jìn)行跨域請求。 在進(jìn)行 Ajax 請求時，由于同源策略的影響，不能進(jìn)行跨域請求，而 <script> 標(biāo)簽的 src 屬性卻可以加載跨域的 Javascript 腳本，JSONP 就是利用這一特性實(shí)現(xiàn)的。與普通的 Ajax 請求不同，在使用 JSONP 進(jìn)行跨域請求時，服務(wù)器不再返回 JSON 格式的數(shù)據(jù)，而是返回一段調(diào)用某個函數(shù)的 Javascript 代碼，在 src 屬性中調(diào)用，來實(shí)現(xiàn)跨域。 JSONP 的優(yōu)點(diǎn)是兼容性好，在一些老舊的瀏覽器種也可以運(yùn)行，但它的缺點(diǎn)也非常明顯，那就是只能進(jìn)行 GET 請求。 jsonp 的應(yīng)用 1. 服務(wù)端 JSONP 格式數(shù)據(jù) var http = require("http") var url = require("url")
http.createServer((req, res) => { var urlobj = url.parse(req.url, true) console.log(urlobj.query.callback); switch (urlobj.pathname) { case "/api/aaa": res.end(`${urlobj.query.callback} (${JSON.stringify({ name: '張三', age: 21 })})`) break; default: res.end("404") } }).listen(3000, () => { console.log("start"); }) 2. 客戶端實(shí)現(xiàn) callback 函數(shù) <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
<body> <!-- jsonp接口調(diào)用 --> <script> var oscript = document.createElement("script") oscript.src = "http://localhost:3000/api/aaa?callback=kerwin" document.body.appendChild(oscript)
function kerwin(obj) { console.log(obj); } </script> </body>
</html> jsonp 總結(jié) 通過 jsonp，我們可以避開瀏覽器的同源策略，從而進(jìn)行跨域請求。jsonp 是利用 HTML 標(biāo)簽的 src 屬性引用資源不受同源策影響的特性來實(shí)現(xiàn)的，實(shí)現(xiàn)步驟如下： 通過動態(tài)創(chuàng)建 script 標(biāo)簽，其 scr 指向非同源的 url，并傳遞一個 callback 參數(shù)給服務(wù)端 服務(wù)器返回一個以 callback 參數(shù)作為函數(shù)名的函數(shù)的調(diào)用和一系列參數(shù) 頁面接收到響應(yīng)后執(zhí)行回調(diào)并對數(shù)據(jù)進(jìn)行處理 注意：服務(wù)器返回的內(nèi)容，必須是一段可執(zhí)行的 Javascript 代碼，不能是其它內(nèi)容。 該文章在 2023/12/14 17:24:04 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
