黑馬vue---40、結合Node手寫JSONP服務器剖析JSONP原理
一、總結
一句話總結：
服務端可以返回js代碼給script標簽，那么標簽會執行它，並且可帶json字符串作為參數，這樣就成功把數據傳過去了
比如客戶端有show方法，服務器返回給script標簽 show()，那么show 方法會執行
1、跨域訪問的原因是什么？
由於瀏覽器的安全性限制，不允許AJAX訪問 協議不同、域名不同、端口號不同的 數據接口，瀏覽器認為這種訪問不安全
2、JSONP的實現原理 是什么？
可以通過動態創建script標簽的形式，把script標簽的src屬性，指向數據接口的地址，因為script標簽不存在跨域限制，這種數據獲取方式，稱作JSONP（注意：根據JSONP的實現原理，知曉，JSONP只支持Get請求
3、jsonp只支持哪種請求？
get請求
4、JSONP的 具體實現過程 是什么？
1、先在客戶端定義一個回調方法，預定義對數據的操作；
2、再把這個回調方法的名稱，通過URL傳參的形式，提交到服務器的數據接口；
3、服務器數據接口組織好要發送給客戶端的數據，再拿着客戶端傳遞過來的回調方法名稱，拼接出一個調用這個方法的字符串，發送給客戶端去解析執行；
4、客戶端拿到服務器返回的字符串之后，當作Script腳本去解析執行，這樣就能夠拿到JSONP的數據了；
二、結合Node手寫JSONP服務器剖析JSONP原理
1、JSONP的實現原理
- 由於瀏覽器的安全性限制，不允許AJAX訪問 協議不同、域名不同、端口號不同的 數據接口，瀏覽器認為這種訪問不安全；
- 可以通過動態創建script標簽的形式，把script標簽的src屬性，指向數據接口的地址，因為script標簽不存在跨域限制，這種數據獲取方式，稱作JSONP（注意：根據JSONP的實現原理，知曉，JSONP只支持Get請求）；
- 具體實現過程：
- 先在客戶端定義一個回調方法，預定義對數據的操作；
- 再把這個回調方法的名稱，通過URL傳參的形式，提交到服務器的數據接口；
- 服務器數據接口組織好要發送給客戶端的數據，再拿着客戶端傳遞過來的回調方法名稱，拼接出一個調用這個方法的字符串，發送給客戶端去解析執行；
- 客戶端拿到服務器返回的字符串之后，當作Script腳本去解析執行，這樣就能夠拿到JSONP的數據了；
2、jsonp代碼實例（Node.js 做服務端）
客戶端代碼
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 </head>
10
11 <body>
12 <script>
13 function showInfo123(data) {
14 console.log(data)
15 }
16 </script>
17
18
19 <script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
20 <!-- <script>
21 show()
22 </script> -->
23
24 </body>
25
26 </html>
nodejs服務端代碼
1 // 導入 http 內置模塊
2 const http = require('http')
3 // 這個核心模塊，能夠幫我們解析 URL地址，從而拿到 pathname query
4 const urlModule = require('url')
5
6 // 創建一個 http 服務器
7 const server = http.createServer()
8 // 監聽 http 服務器的 request 請求
9 server.on('request', function (req, res) {
10
11 // const url = req.url
12 const { pathname: url, query } = urlModule.parse(req.url, true)
13
14 if (url === '/getscript') {
15 // 拼接一個合法的JS腳本，這里拼接的是一個方法的調用
16 // var scriptStr = 'show()'
17
18 var data = {
19 name: 'xjj',
20 age: 18,
21 gender: '女孩子'
22 }
23
24 var scriptStr = `${query.callback}(${JSON.stringify(data)})`
25 // res.end 發送給 客戶端， 客戶端去把 這個 字符串，當作JS代碼去解析執行
26 res.end(scriptStr)
27 } else {
28 res.end('404')
29 }
30 })
31
32 // 指定端口號並啟動服務器監聽
33 server.listen(3000, function () {
34 console.log('server listen at http://127.0.0.1:3000')
35 })
