1. JSONP 的概念與特點(diǎn)
- 概念：瀏覽器端通過(guò) <script> 標(biāo)簽的 src 屬性报腔，請(qǐng)求服務(wù)器上的數(shù)據(jù)株搔，同時(shí)，服務(wù)器返回一個(gè)函數(shù)的調(diào)用纯蛾。這種請(qǐng)求數(shù)據(jù)的方式叫做 JSONP纤房。
- 特點(diǎn)：
? ? ① JSONP 不屬于真正的 Ajax 請(qǐng)求，因?yàn)樗鼪](méi)有使用 XMLHttpRequest 這個(gè)對(duì)象翻诉。
? ? ② JSONP 僅支持 GET 請(qǐng)求炮姨，不支持 POST、PUT碰煌、DELETE 等請(qǐng)求舒岸。
2. 創(chuàng)建 JSONP 接口的注意事項(xiàng)
- 如果項(xiàng)目中已經(jīng)配置了 CORS 跨域資源共享，為了防止沖突芦圾，必須在配置 CORS 中間件之前聲明 JSONP 的接口蛾派。否則 JSONP 接口會(huì)被處理成開(kāi)啟了 CORS 的接口。示例代碼如下：
```js
? ? // 優(yōu)先創(chuàng)建 JSOP 接口
? ? app.get('/api/jsonp', (req,res) => {})
? ? // 再配置 CORS 中間件 ? 【后續(xù)所有的接口都會(huì)被處理成 CORS 接口】
? ? app.use(cors())
? ? app.get('/api/get', (req,res) => {})
```
3. 實(shí)現(xiàn) JSONP 接口的步驟
? ? ① 獲取客戶(hù)端發(fā)送過(guò)來(lái)的回調(diào)函數(shù)的名字
? ? ② 得到要通過(guò) JSONP 形式發(fā)送給客戶(hù)端的數(shù)據(jù)
? ? ③ 根據(jù)前兩步得到的數(shù)據(jù)个少，拼接出一個(gè)函數(shù)調(diào)用的字符串
? ? ④ 把上一步拼接得到的字符串洪乍，響應(yīng)給客戶(hù)端的 <script> 標(biāo)簽進(jìn)行解析執(zhí)行
4. 實(shí)現(xiàn) JSONP 接口的具體代碼
```js
? ? app.get('/api/jsonp', (req, res) => {
? ? ? ? // 1.獲取客戶(hù)端發(fā)送過(guò)來(lái)的回調(diào)函數(shù)的名字
? ? ? ? const funcName = req.query.callback
? ? ? ? // 2.得到要通過(guò) JSONP 形式發(fā)送給客戶(hù)端的數(shù)據(jù)
? ? ? ? const data = { nameL 'zs', age: 22}
? ? ? ? // 3.根據(jù)前兩步得到的數(shù)據(jù)，拼接出一個(gè)函數(shù)調(diào)用的字符串
? ? ? ? const scriptStr = `${funcName}(${JSON.stringify(data)})`
? ? ? ? // 4. 把上一步拼接得到的字符串夜焦，響應(yīng)給客戶(hù)端的 <script> 標(biāo)簽進(jìn)行解析執(zhí)行
? ? ? ? res.send(scriptStr)
? ? })
```
5. 在網(wǎng)頁(yè)中使用 jQuery 發(fā)起 JSONP 請(qǐng)求
- 調(diào)用 $.ajax() 函數(shù)壳澳，提供 JSONP 的配置選項(xiàng)，從而發(fā)起 JSONP 請(qǐng)求茫经，示例代碼如下：
```js
? ? $.ajax({
? ? ? ? method: 'get',
? ? ? ? url: 'http://127.0.0.1/api/jsonp',
? ? ? ? dataType: 'jsonp', ? ? ?// 表示要發(fā)送 JSONP 的請(qǐng)求
? ? ? ? success: function (res) {
? ? ? ? ? ? console.log(res)
? ? ? ? }
? ? })
```
