iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

登堂入室!前端工程師的觀念技術 _30_ 題系列 第 19

18. 解釋 JSONP 如何運作

(其實現在應該很少使用JSONP了,只是跟上一篇比較有關所以順便整理,簡單了解一下就好。)

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>

可以成功出現這樣的頁面:


Request JSON using the script tag

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的具體流程大概是這樣子:

  1. client端會依據<script>引入的跨域網址,傳送請求。

  2. server收到請求後會返回JS檔,並將請求的JSON資料放進指定的function並執行。

!!JSONP只能使用GET方法請求資料,而且容易受到CSRF攻擊,因此不會被設計來傳遞隱私性較高的資料。

為何它不是真正的 AJAX?

相較於依賴XHR(XMLHttpRequest)物件或fetch API的CORS,JSONP透過將資料引入<script>來進行資料的傳遞。

【如內文有誤還請不吝指教>< 謝謝閱覽至此的各位:D】

參考資料:


上一篇
17. 解釋 Same-Origin Policy
下一篇
19. Cookie/ LocalStorage/ SessionStorage 的差別
系列文
登堂入室!前端工程師的觀念技術 _30_ 題31

尚未有邦友留言

立即登入留言