< p >在Web開發(fā)中，前端與后端進(jìn)行數(shù)據(jù)交互是非常常見的一種情況。但是，由于Web應(yīng)用程序的跨域請(qǐng)求問題，直接進(jìn)行Ajax請(qǐng)求是不被允許的。因此，JSONP( JSON with Padding )的出現(xiàn)，解決了請(qǐng)求跨域的問題。本文將介紹JSONP的原理和實(shí)現(xiàn)方式，以及使用PHP返回JSONP的實(shí)際操作。< /p >< h3 >JSONP原理< /h3>< p >JSONP實(shí)現(xiàn)跨域請(qǐng)求的原理是以< script>標(biāo)簽不受同源策略的限制這一優(yōu)勢(shì)為基礎(chǔ)。在需要進(jìn)行跨域請(qǐng)求的前端代碼中，我們通過在請(qǐng)求參數(shù)中指定回調(diào)函數(shù)名的方式，發(fā)送一個(gè)帶有回調(diào)函數(shù)名的URL地址給后端API，后端API返回一個(gè)包含回調(diào)函數(shù)的JS文件內(nèi)容，前端代碼接收響應(yīng)并執(zhí)行回調(diào)函數(shù)，從而拿到最終結(jié)果。下面是一段JSONP請(qǐng)求的示例代碼：< /p>< pre >< /pre>< p >在這段代碼中，我們?cè)?HTML 中使用< script>標(biāo)簽來動(dòng)態(tài)插入腳本，請(qǐng)求返回的是其中的回調(diào)函數(shù)，而不是一般的 JSON 數(shù)據(jù)，這就是比較明顯的區(qū)別。< /p >< h3 >JSONP實(shí)現(xiàn)方式< /h3>< p >根據(jù)JSONP的原理，使用 JSONP 需要如下幾步：< /p>< p >1. 前端發(fā)起< script>標(biāo)簽請(qǐng)求 （設(shè)置callback參數(shù)為回調(diào)函數(shù)名）；< /p>< p >2. 后端根據(jù) callback 參數(shù)把返回值包裹在該回調(diào)函數(shù)中;< /p>< p >3. 前端接收到后端返回的內(nèi)容后自動(dòng)執(zhí)行回調(diào)函數(shù)。< /p>< p >下面是與前文相似的一段JSONP請(qǐng)求示例代碼，注釋中將依次闡述這個(gè)JSONP所需要完成的三個(gè)步驟：< /p>< pre >< /pre>< p >上述代碼中，首先定義了一個(gè)回調(diào)函數(shù)jsonpCallback以供后端API返回?cái)?shù)據(jù)時(shí)調(diào)用。接下來創(chuàng)建了一個(gè)< script>標(biāo)簽，并在其中使用了callback參數(shù)指定回調(diào)函數(shù)名，最后將這個(gè) script 標(biāo)簽插入到 html 頁面的 head 中執(zhí)行。這樣請(qǐng)求就順利發(fā)送出去了。當(dāng)后端API響應(yīng)后，前端頁面會(huì)自動(dòng)執(zhí)行那個(gè)名字為jsonpCallback的函數(shù)，其中 data 參數(shù)就是從后端返回的數(shù)據(jù)。< /p>< h3 >使用PHP返回JSONP< /h3>< p >單獨(dú)使用 JSONP 調(diào)取外部接口時(shí)基本上不會(huì)出現(xiàn)跨域問題，因?yàn)槲覀冋{(diào)用的數(shù)據(jù) API 都已經(jīng)默認(rèn)做好了 JSONP 支持。但是，如果我們需要在自己的服務(wù)器上使用 JSONP 進(jìn)行數(shù)據(jù)交互，那么PHP就是最常用的解決方案了，下面就演示下如何使用 PHP 返回 JSONP。< /p>< p >以使用PHP返回JSONP來獲取天氣信息為例，下面是一段簡(jiǎn)單的 PHP 代碼：< /p>< pre >'beijing', 'temperature' =>'19°C' ); $callback = $_GET['callback']; echo $callback . '(' . json_encode($data) . ')'; ?>< /pre>< p >在上述代碼中，首先設(shè)置header，指定返回的內(nèi)容類型為 application/javascript。接著，創(chuàng)建關(guān)聯(lián)數(shù)組$data，其中包含了要返回的信息。通過 $_GET['callback'] 取得前端頁面?zhèn)鬟^來的 JSONP 回調(diào)函數(shù)名，并使用json_encode()方法把 $data 數(shù)組序列化為 JSON 格式。最后，將最終結(jié)果拼接上回調(diào)函數(shù)名返回給對(duì)方實(shí)現(xiàn)數(shù)據(jù)傳輸。< /p>< p >總的來說，JSONP 是一種簡(jiǎn)單、易用的跨域技術(shù)，主要的缺點(diǎn)在于只支持 GET 請(qǐng)求，且只能發(fā)送JSON數(shù)據(jù)，這在某種程度上會(huì)影響到開發(fā)的靈活性，但是 JSONP 能夠解決跨域請(qǐng)求的問題，緩解了我們的開發(fā)困境，在某些特定場(chǎng)景下仍然是十分有價(jià)值的。< /p>