上一节:

  JavaScript JSON JSONP

  • JSON JSONP

    JSONP是一种发送JSON数据的方法，无需担心跨域问题。JSONP不使用该XMLHttpRequest对象。JSONP使用<script>标签代替。
    JSONP代表带有填充的JSON。
    由于跨域策略，从另一个域请求文件可能会导致问题。从另一个域请求外部脚本没有此问题。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文件

    <?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示例:

    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);
}
    尝试一下
    要学习PHP，请转到我们的PHP教程。
上一节: