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要调用哪个函式。