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);
自己动手试一试 »
