(其實現在應該很少使用JSONP了,只是跟上一篇比較有關所以順便整理,簡單了解一下就好。)
當請求一個跨域的資料時,資料會因為同源政策,而被瀏覽器阻擋。然而,在請求一個script時(例如、使用CDN),並不會受到同源政策的限制。
JSONP (JSON with Padding) 也是一種跨領域請求的方式,透過將資料引入<script>
,並用函式接住資料,來進行資料的求取。
這裡借用一下W3C的範例,用php檔模擬一個server端:
// server
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
呈現的頁面會是像這樣的JSON格式:
myFunc({"name":"John", "age":30, "city":"New York"});
重點是將要請求的資料引入script:
<script src="demo_jsonp.php"></script>
(這裡的範例其實還是同源,但一般呼叫CDN也都是非同源,就可以知道放在<script src=""></script>
的請求是可以跨域的。)
client檔的程式碼:
<!DOCTYPE html>
<html>
<body>
<h2>Request JSON using the script tag</h2>
<p>The PHP file returns a call to a function that will handle the JSON data.</p>
<p id="demo"></p>
<script>
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
<script src="demo_jsonp.php"></script>
</body>
</html>
可以成功出現這樣的頁面:
The PHP file returns a call to a function that will handle the JSON data.
John
因為上面的例子頁面是寫死的,我們可以用JS把頁面寫成能動態更新的狀態,並將資料寫入callback function。
<!DOCTYPE html>
<html>
<body>
<h2>Request With a Callback Function</h2>
<p>The PHP file returns a call to the function you send as a callback.</p>
<p id="demo"></p>
<script>
// 動態加入資料
let s = document.createElement("script");
s.src = "demo_jsonp2.php?callback=myDisplayFunction"; // 加入callback function的名稱
document.body.appendChild(s);
function myDisplayFunction(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
</body>
</html>
在client寫好要使用的callback function,並告訴server要調用哪個函式。
所以可以知道JSONP的具體流程大概是這樣子:
client端會依據<script>
引入的跨域網址,傳送請求。
server收到請求後會返回JS檔,並將請求的JSON資料放進指定的function並執行。
!!JSONP只能使用GET方法請求資料,而且容易受到CSRF攻擊,因此不會被設計來傳遞隱私性較高的資料。
相較於依賴XHR(XMLHttpRequest)物件或fetch API的CORS,JSONP透過將資料引入<script>
來進行資料的傳遞。
【如內文有誤還請不吝指教>< 謝謝閱覽至此的各位:D】
參考資料: