JS跨域接收JSON数据

一、简介

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>