JSONP
JSONP
JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。
JSONP 不使用 XMLHttpRequest 对象。
JSONP 使用 <script> 标签取而代之。
JSONP 简介
JSONP 指的是 JSON with Padding。
从另一个域请求文件会引起问题，由于跨域政策。
从另一个域请求外部脚本没有这个问题。
JSONP 利用了这个优势，并使用 script 标签替代 XMLHttpRequest 对象。
<script src="demo_jsonp.php">
Server 文件
服务器上的文件在函数调用中封装结果：
实例
<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
?>
完整实例【显示 demo_jsonp.php 文件】：
<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
?>
运行结果：
myFunc({ "name":"Bill Gates", "age":62, "city":"Seattle" });
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
结果返回对名为 "myFunc" 的函数的调用，其中的 JSON 数据为参数。
请确保客户端存在该函数。
JavaScript 函数
函数 "myFunc" 位于客户端，用于处理 JSON 数据：
示例代码：
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>使用 script 标签请求 JSON</h1>
<p>PHP 文件所返回的函数调用处理的是 JSON 数据。</p>
<p id="demo"></p>
<script>
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
<script src="/demo/demo_php_jsonp.php"></script>
</body>
</html>
运行结果：
使用 script 标签请求 JSON PHP 文件所返回的函数调用处理的是 JSON 数据。 Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
创建动态脚本标签
上例会在页面加载时执行 "myFunc" 函数，根据您放置脚本标签的位置，这样不很令人满意。
Script 只应该在需要时创建：
示例代码：
在按钮被点击时创建和插入 <script> 标签：
function clickButton() {
var s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>点击按钮</h1>
<p>将创建一个带有 src 属性的 script 标签并将其放在文档中。</p>
<p>PHP 文件以 JSON 对象作为参数返回对函数的调用。</p>
<button onclick="clickButton()">单击我！</button>
<p id="demo"></p>
<script>
function clickButton() {
var s = document.createElement("script");
s.src = "/demo/demo_php_jsonp.php";
document.body.appendChild(s);
}
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
动态 JSONP 结果
上例仍然是静态的。
可通过向 PHP 文件发送 JSON 来创建动态的例子，然后根据这个 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_decode()函数把该数组转换为 JSON。 - 用 "myFunc()" 封装返回对象。
JavaScript 实例
将从 php 文件调用 "myFunc" 函数：
function clickButton() {
var obj, s
obj = { "table":"products", "limit":10 };
s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
}
function myFunc(myObj) {
var x, txt = "";
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>点击按钮</h1>
<p>将创建一个带有 src 属性的 script 标签并将其放在文档中。</p>
<p>PHP 文件以 JSON 对象作为参数返回对函数的调用。</p>
<button onclick="clickButton()">单击我！</button>
<p id="demo"></p>
<p>请尝试将 table 属性从“customers”更改为“products”。</p>
<script>
function clickButton() {
var obj, s
obj = { table: "customers", limit: 10 };
s = document.createElement("script");
s.src = "/demo/demo_php_jsonp_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
}
function myFunc(myObj) {
var x, txt = "";
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
回调函数
如果您无法控制服务器文件，那么如何使服务器文件调用正确的函数呢？
有时服务器文件提供回调函数作为参数：
示例代码：
PHP 文件会调用您作为回调参数传递的函数：
function clickButton() {
var s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>请求调用函数</h1>
<p>PHP 文件返回对您作为回调发送的函数的调用。</p>
<button onclick="clickButton()">单击我！</button>
<p id="demo"></p>
<script>
function clickButton() {
var s = document.createElement("script");
s.src = "/demo/demo_jsonp2.php?callback=myDisplayFunction";
document.body.appendChild(s);
}
function myDisplayFunction(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
相关阅读
-
无相关信息
