JavaScript中的 JSON 和 JSONP

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文件

<?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);
}

 

更多的json描述