本文摘自PHP中文网,作者青灯夜游,侵删。
简单地使用json并不能支持跨域资源请求,为了解决这个问题,需要采用jsonp数据交互协议。众所周知,js文件的调用不受跨域与否的限制,因此如果想通过纯web端跨域访问数据,只能在远程服务器上设法将json数据封装进js格式的文件中,供客户端调用和进一步处理,这就是jsonp协议的原理。
JSON 和 JSONP
JSONP是一种发送JSON数据的方法,无需担心跨域问题。JSONP不使用该XMLHttpRequest对象。JSONP使用<script>标签代替。
由于跨域策略,从另一个域请求文件可能会导致问题。从另一个域请求外部脚本没有此问题。JSONP使用此优势,并使用脚本标记而不是XMLHttpRequest对象请求文件。
1 | <script src= "demo_jsonp.php" >
|
服务器文件
服务器上的文件将结果包装在函数调用中:
1 2 3 4 | <?php
$myJSON = '{"name":"John", "age":30, "city":"New York"}' ;
echo "myFunc(" . $myJSON . ");" ;
?>
|
结果返回对名为“myFunc”的函数的调用,并将JSON数据作为参数。确保客户端上存在该功能。
JavaScript函数
名为“myFunc”的函数位于客户端,并准备处理JSON数据:
1 2 3 4 | function myFunc(myObj) {
document.getElementById( "demo" ).innerHTML = myObj.name;
}
xmlhttp.send( "x=" + dbParam);
|
创建动态script标记
根据您放置脚本标记的位置,上面的示例将在页面加载时执行“myFunc”函数,这不是很令人满意。只应在需要时创建script标记:
单击按钮时创建并插入<script>标记:
1 2 3 4 5 | function clickButton() {
var s = document.createElement( "script" );
s.src = "demo_jsonp.php" ;
document.body.appendChild(s);
}
|
动态JSONP结果
上面的例子仍然是非常静态的。通过将JSON发送到php文件使示例动态化,并让php文件根据获取的信息返回JSON对象。
PHP文件
1 2 3 4 5 6 7 | <?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示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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文件:
1 2 3 4 5 | <?php
$callback = trim( $_GET ( 'callback' ));
$myJSON = '{ "name":"John", "age":30, "city":"New York" }' ;
echo $callback . "(" . $myJSON . ");" ;
?>
|
javascript :
1 2 3 4 5 | function clickButton() {
var s = document.createElement( "script" );
s.src = "jsonp_demo_db.php?callback=myDisplayFunction" ;
document.body.appendChild(s);
}
|
更多编程相关知识,请访问:编程入门!!
以上就是详解JS中的JSON和JSONP的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
360怎么开启javascript
不能编辑javascript的程序有什么
javascript是什么格式的文件
javascript截取字符串的方法有哪些
javascript如何定义一个方法
javascript数组中常用的操作介绍(代码示例)
javascript中string方法如何使用
jquery获取父窗口的元素
javascript中如何实现异步编程模式
nodejs模块的简单理解(附示例)
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解JS中的JSON和JSONP