JSON 和 JSONP
JSONP 是一种发送 JSON 数据的方法, 无需担心跨域问题. JSONP 不使用该 XMLHttpRequest 对象. JSONP 使用 < script > 标签代替.
由于跨域策略, 从另一个域请求文件可能会导致问题. 从另一个域请求外部脚本没有此问题. JSONP 使用此优势, 并使用脚本标记而不是 XMLHttpRequest 对象请求文件.
<script src="demo_jsonp.php">
服务器文件
服务器上的文件将结果包装在函数调用中:
- <?PHP
- $myJSON = '{"name":"John","age":30,"city":"New York"}';
- echo "myFunc(".$myJSON.");";
- ?>
结果返回对名为 "myFunc" 的函数的调用, 并将 JSON 数据作为参数. 确保客户端上存在该功能.
JavaScript 函数
名为 "myFunc" 的函数位于客户端, 并准备处理 JSON 数据:
- function myFunc(myObj) {
- document.getElementById("demo").innerhtml = myObj.name;
- }
- xmlhttp.send("x=" + dbParam);
创建动态 script 标记
根据您放置脚本标记的位置, 上面的示例将在页面加载时执行 "myFunc" 函数, 这不是很令人满意. 只应在需要时创建 script 标记:
单击按钮时创建并插入 < script > 标记:
- function clickButton() {
- var s = document.createElement("script");
- s.src = "demo_jsonp.php";
- document.body.appendChild(s);
- }
动态 JSONP 结果
上面的例子仍然是非常静态的. 通过将 JSON 发送到 PHP 文件使示例动态化, 并让 PHP 文件根据获取的信息返回 JSON 对象.
PHP 文件
- <?phpheader("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 示例:
- 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 + "";
- }
- document.getElementById("demo").innerHTML = txt;
- }
回调函数
当您无法控制服务器文件时, 如何让服务器文件调用正确的函数? 有时服务器文件提供回调函数作为参数:
PHP 文件将调用您传递的函数作为回调参数:
PHP 文件:
- <?PHP
- $callback = trim($_GET('callback'));
- $myJSON = '{"name":"John","age":30,"city":"New York"}';
- echo $callback."(".$myJSON.");";
- ?>
- JavaScript :
- function clickButton() {
- var s = document.createElement("script");
- s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
- document.body.appendChild(s);
- }
来源: http://www.css88.com/web/javascript/11209.html