JSONP

JSONP是一种发送JSON数据而不用担心跨域问题的方法。

JSONP 不使用XMLHttpRequest目的。

JSONP 使用<script>标签代替。

JSONP简介

JSONP 代表带填充的 JSON。

由于跨域策略，从另一个域请求文件可能会导致问题。

请求外部脚本来自另一个域的没有这个问题。

JSONP利用了这个优势，并且使用script标签而不是XMLHttpRequest目的。

服务器文件

服务器上的文件将结果包装在函数调用中：

示例

<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>

显示 PHP 文件 »

结果返回对名为 "myFunc" 的函数的调用，并将 JSON 数据作为参数。

确保该函数在客户端存在。

JavaScript 函数

名为 "myFunc" 的函数位于客户端，并准备好处理 JSON 数据：

示例

function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}

亲自试一试 »

创建动态脚本标签

上面的示例将在页面加载时根据您放置 script 标记的位置执行 "myFunc" 函数，这不太令人满意。

脚本标签应仅在需要时创建：

示例

单击按钮时创建并插入 <script> 标记：

function clickButton() {
  let s = document.createElement("script");
  s.src = "demo_jsonp.html";
  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() 。
访问数据库，并用请求的数据填充数组。
将数组添加到对象。
使用以下命令将数组转换为 JSONjson_encode() 函数。
将 "myFunc()" 包裹在返回对象周围。

JavaScript 示例

将从 php 文件调用 "myFunc" 函数：

亲自试一试 »

回调函数

当你无法控制服务器文件时，如何让服务器文件调用正确的函数呢？

有时服务器文件提供回调函数作为参数：

示例

php 文件将调用您作为回调参数传递的函数：

let s = document.createElement("script");
s.src = "jsonp_demo_db.html?callback= myDisplayFunction";
document.body.appendChild(s);

亲自试一试 »