[轉帖]jsonp 詳解 —— 終于搞懂 jsonp 了
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
 ：jsonp 詳解 —— 終于搞懂 jsonp 了 jsonp 詳解 —— 終于搞懂 jsonp 了 學習一定要一步一個腳印扎實學，最近跟著 kerwin 老師學習 node.js 時，又遇到了jsonp，當看到這個東西的時候感到既熟悉又陌生，只能說之前學的太過草率了，沒有對學過的東西做總結。這次我翻閱很多優秀文章和視頻，徹底弄懂了 jsonp 是什么東西，并在這里做好記錄，方便自己日后查看。 什么是 jsonp ？ JSONP 不是一門編程語言，也不是什么特別的技術，它更像一個漏洞，程序員可以利用這個漏洞，實現跨域（可以簡單理解為跨域名）傳輸數據。在介紹 JSONP 之前，先來介紹一下瀏覽器的同源策略。 「同源策略」 同源策略是由 Netscape（網景） 提出的一個著名的安全策略，現在所有支持 Javascript 的瀏覽器都會使用這個策略。 所謂同源是指域名、協議、端口都相同。以 http://www.xxxxx.com:80/ 為例，http:// 為協議，域名是 www.xxxxx.com，端口是80（提示：80 為默認端口，可以省略，若為其它端口則必須顯示定義）。 為了安全，瀏覽器不允許進行跨域請求。當我們通過 Ajax 在網頁和服務器之間發送或接收數據時，需要保證網頁與所請求的地址是同源的，否則無法請求成功。同源策略可以防止 Javascript 腳本從您的網站中讀取數據，并將數據發送到其它的網站。如果沒有同源策略，很有可能會有惡意的程序泄露您網站中的內容。 雖然同源策略在一定程度上提高了網站的安全，但也會給程序員帶來一些麻煩，例如在訪問一些開發接口時，由于同源策略的存在，會調用失敗。要解決這種問題就需要用到跨域，跨域的方法有許多種，其中最經典的就是 JSONP。 「JSONP」 JSONP 全稱“JSON with Padding”，譯為“帶回調的 JSON”，它是 JSON 的一種使用模式。通過 JSONP 可以繞過瀏覽器的同源策略，進行跨域請求。 在進行 Ajax 請求時，由于同源策略的影響，不能進行跨域請求，而 <script> 標簽的 src 屬性卻可以加載跨域的 Javascript 腳本，JSONP 就是利用這一特性實現的。與普通的 Ajax 請求不同，在使用 JSONP 進行跨域請求時，服務器不再返回 JSON 格式的數據，而是返回一段調用某個函數的 Javascript 代碼，在 src 屬性中調用，來實現跨域。 JSONP 的優點是兼容性好，在一些老舊的瀏覽器種也可以運行，但它的缺點也非常明顯，那就是只能進行 GET 請求。 jsonp 的應用 1. 服務端 JSONP 格式數據 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. 客戶端實現 callback 函數 <!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接口調用 --> <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 總結 通過 jsonp，我們可以避開瀏覽器的同源策略，從而進行跨域請求。jsonp 是利用 HTML 標簽的 src 屬性引用資源不受同源策影響的特性來實現的，實現步驟如下： 通過動態創建 script 標簽，其 scr 指向非同源的 url，并傳遞一個 callback 參數給服務端 服務器返回一個以 callback 參數作為函數名的函數的調用和一系列參數 頁面接收到響應后執行回調并對數據進行處理 注意：服務器返回的內容，必須是一段可執行的 Javascript 代碼，不能是其它內容。 該文章在 2023/12/14 17:24:04 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
