JSONP
JSONP 是一種傳送 JSON 資料的方法，無需擔心跨域問題。
JSONP 不使用 XMLHttpRequest 物件。
JSONP 改而使用 <script> 標籤。
JSONP 簡介
JSONP 代表 JSON with Padding。
由於跨域策略，請求另一個域的檔案可能會導致問題。
請求另一個域的外部指令碼沒有這個問題。
JSONP 利用了這一優勢，並使用 script 標籤而不是 XMLHttpRequest 物件來請求檔案。
<script src="demo_jsonp.php">
伺服器檔案
伺服器上的檔案將結果包裝在函式呼叫中
示例
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
顯示 PHP 檔案 »
結果返回一個名為“myFunc”的函式的呼叫，並將 JSON 資料作為引數。
確保該函式存在於客戶端。
JavaScript 函式
名為“myFunc”的函式位於客戶端，並準備好處理 JSON 資料
建立動態指令碼標籤
上面的示例將在頁面載入時執行“myFunc”函式，具體取決於指令碼標籤的位置，這並不令人滿意。
應僅在需要時建立指令碼標籤
示例
單擊按鈕時建立並插入 <script> 標籤
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
自己動手試一試 »
動態 JSONP 結果
上面的示例仍然非常靜態。
透過將 JSON 傳送到 php 檔案來動態化示例，並讓 php 檔案根據收到的資訊返回 JSON 物件。
PHP 檔案
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo "myFunc(".json_encode($outp).")";
?>
PHP 檔案說明
- 使用 PHP 函式 json_decode() 將請求轉換為物件。
- 訪問資料庫，並用請求的資料填充陣列。
- 將陣列新增到物件。
- 使用 json_encode() 函式將陣列轉換為 JSON。
- 將 "myFunc()" 包裝在返回物件周圍。
JavaScript 示例
php 檔案將呼叫 "myFunc" 函式
const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
function myFunc(myObj) {
let txt = "";
for (let x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
自己動手試一試 »
回撥函式
當您無法控制伺服器檔案時，如何讓伺服器檔案呼叫正確的函式？
有時伺服器檔案會提供一個回撥函式作為引數
示例
php 檔案將呼叫您作為回撥引數傳遞的函式
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
自己動手試一試 »
