详解JS中的JSON和JSONP

简单地使用json并不能支持跨域资源请求，为了解决这个问题，需要采用jsonp数据交互协议。众所周知，js文件的调用不受跨域与否的限制，因此如果想通过纯web端跨域访问数据，只能在远程服务器上设法将json数据封装进js格式的文件中，供客户端调用和进一步处理，这就是jsonp协议的原理。

JSON 和 JSONP

<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标记

function clickButton() {   var s = document.createElement("script");   s.src = "demo_jsonp.php";     document.body.appendChild(s); }

动态JSONP结果

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

更多编程相关知识，请访问：编程入门！！

以上就是详解JS中的JSON和JSONP的详细内容，更多内容请关注技术你好其它相关文章！