JSONP
JSONP 是一种发送 JSON 数据的方法，无需担心跨域问题。
JSONP 不使用 XMLHttpRequest 对象。
JSONP 使用 <script> 标签代替。
JSONP 简介
JSONP 代表 JSON with Padding（带填充的 JSON）。
从另一个域请求文件可能会由于跨域策略而导致问题。
从另一个域请求外部 *脚本* 则不会出现此问题。
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 标签的位置，这并不理想。
script 标签应该仅在需要时创建
示例
在点击按钮时创建并插入 <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 示例
"myFunc" 函数将由 php 文件调用
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);
亲自动手试试 »
