标题: JSONP [打印本页]

---

作者: vicky.yu    时间: 2023-2-13 09:43     标题: 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.");";
?>
显示 PHP 文件
结果返回对名为 "myFunc" 的函数的调用，其中的 JSON 数据为参数。

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

JavaScript 函数
函数 "myFunc" 位于客户端，用于处理 JSON 数据：

实例
function myFunc(myObj)  {
    document.getElementById("demo").innerHTML =  myObj.name;
}
亲自试一试
创建动态脚本标签
上例会在页面加载时执行 "myFunc" 函数，根据您放置脚本标签的位置，这样不很令人满意。

Script 只应该在需要时创建：

实例
在按钮被点击时创建和插入 <script> 标签：

function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp.php";
    document.body.appendChild(s);
}
亲自试一试
动态 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;
}
亲自试一试
回调函数
如果您无法控制服务器文件，那么如何使服务器文件调用正确的函数呢？

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

实例
PHP 文件会调用您作为回调参数传递的函数：

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}
亲自试一试
JSON HTML
jQuery 选择器

JavaScript 和 HTML DOM 参考手册
JavaScript 实例
JavaScript 测验
JavaScript 高级教程

W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性

---

欢迎光临 赛捷软件论坛 (http://sagesoft.cn/bbs/)

Powered by Discuz! 7.2