9.jsonp的實現原理
阿新 • • 發佈：2019-01-09
1. 由於瀏覽器的安全性限制，不允許AJAX訪問 協議不同、域名不同、埠號不同的資料介面，瀏覽器認為這種訪問不安全；
2. 以通過動態建立script標籤的形式，把script標籤的src屬性，指向資料介面的地址，因為script標籤不存在跨域限制，這種資料獲取方式，稱作JSONP（注意：根據JSONP的實現原理，知曉JSONP只支援Get請求）；
3. 具體實現過程：
- 先在客戶端定義一個回撥方法，預定義對資料的操作；
- 再把這個回撥方法的名稱，通過URL傳參的形式，提交到伺服器的資料介面；
- 伺服器資料介面組織好要傳送給客戶端的資料，再拿著客戶端傳遞過來的回撥方法名稱，拼接出一個呼叫這個方法的字串，傳送給客戶端去解析執行；
- 客戶端拿到伺服器返回的字串之後，當作Script指令碼去解析執行，這樣就能夠拿到JSONP的資料了；
4. 帶大家通過 Node.js ，來手動實現一個JSONP的請求例子；
客戶端：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <View Codebody> <script> function showInfo123(data) { console.log(data) } </script> <script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script> <!-- <script> show() </script> --> </body> </html>
服務端：app.js
// 匯入 http 內建模組
const http = require('http')
// 這個核心模組，能夠幫我們解析 URL地址，從而拿到 pathname query
const urlModule = require('url')
// 建立一個 http 伺服器
const server = http.createServer()
// 監聽 http 伺服器的 request 請求
server.on('request', function (req, res) {
// const url = req.url
const { pathname: url, query } = urlModule.parse(req.url, true)
if (url === '/getscript') {
// 拼接一個合法的JS指令碼，這裡拼接的是一個方法的呼叫
// var scriptStr = 'show()'
var data = {
name: 'xjj',
age: 18,
gender: '女孩子'
}
var scriptStr = `${query.callback}(${JSON.stringify(data)})`
// res.end 傳送給 客戶端， 客戶端去把 這個 字串，當作JS程式碼去解析執行
res.end(scriptStr)
} else {
res.end('404')
}
})
// 指定埠號並啟動伺服器監聽
server.listen(3000, function () {
console.log('server listen at http://127.0.0.1:3000')
})
View Code
nodemon .\app.js