一、简介
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,可以用此跨域接收JSON数据。
二、用途
由于浏览器有安全限制,是不允许异步跨域访问数据的,但是web分布式系统的前端,会有跨域接收JSON数据的需求,最便捷的方式可以用JSONP来实现。
三、PHP脚本服务端
<?php
if(isset($_GET['callback']) && !empty($_GET['callback'])) {
echo $_GET['callback'] . '({"name":"踏雪残情", "profession":"phper"})';
}
?>
$_GET['callback']即是在客户端要调用的JS函数名,{"name":"踏雪残情", "profession":"phper"}即服务端返回的JSON数据。
四、JS客户端
<script type="text/javascript">
function func(data) {
alert('姓名:' + data.name + ', 职业:' + data.profession);
}
</script>
<script type="text/javascript" src="http://www.qxhtml.cn/technology/jsonp/server.php?callback=func"></script>
你可以在本地执行,结果将弹出“姓名:踏雪残情, 职业:phper”。
五、JQuery应用
JQuery的getJSON函数已集成了跨域访问的功能,需在url的地址上跟上一个参数,参数值用?占位符替代,如下所示,执行时JQuery会把占位符自动替换为时间戳的函数名。
<script type="text/javascript" src="http://www.qxhtml.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$.getJSON('http://www.qxhtml.cn/technology/jsonp/server.php?callback=?', function(data) {
alert('姓名:' + data.name + ', 职业:' + data.profession);
});
</script>
JS跨域接收JSON数据
最新推荐文章于 2023-07-22 23:27:32 发布