JavaScript中的JSON和JSONP

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

JSON 和 JSONP

JSONP是一种发送JSON数据的方法，无需担心跨域问题。JSONP不使用该XMLHttpRequest对象。JSONP使用<script>标签代替。
由于跨域策略，从另一个域请求文件可能会导致问题。从另一个域请求外部脚本没有此问题。JSONP使用此优势，并使用脚本标记而不是XMLHttpRequest对象请求文件。

[code]<script src=\"demo_jsonp.php\">

服务器文件

服务器上的文件将结果包装在函数调用中：

[code]<?php$myJSON = \'{\"name\":\"John\", \"age\":30, \"city\":\"New York\"}\';echo \"myFunc(\".$myJSON.\");\";?>

结果返回对名为“myFunc”的函数的调用，并将JSON数据作为参数。确保客户端上存在该功能。

JavaScript函数

名为“myFunc”的函数位于客户端，并准备处理JSON数据：

[code]function myFunc(myObj) {document.getElementById(\"demo\").innerHTML = myObj.name;}xmlhttp.send(\"x=\" + dbParam);

创建动态script标记

根据您放置脚本标记的位置，上面的示例将在页面加载时执行“myFunc”函数，这不是很令人满意。只应在需要时创建script标记：
单击按钮时创建并插入<script>标记：

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

动态JSONP结果

上面的例子仍然是非常静态的。通过将JSON发送到php文件使示例动态化，并让php文件根据获取的信息返回JSON对象。
PHP文件

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

[code]function clickButton() {var obj, sobj = { 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文件：

[code]<?php$callback = trim($_GET(\'callback\'));$myJSON = \'{ \"name\":\"John\", \"age\":30, \"city\":\"New York\" }\';echo $callback.\"(\".$myJSON.\");\";?>

javascript :

[code]function clickButton() {var s = document.createElement(\"script\");s.src = \"jsonp_demo_db.php?callback=myDisplayFunction\";document.body.appendChild(s);}

更多web前端开发知识，请查阅 HTML中文网 ！！