一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题。
不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>）。
ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取数据，而jsonp的核心则是通过动态添加script标签跨域获取数据。
现在我们在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var localHandler = function(data){
alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>
remote.js文件代码如下：
localHandler({"result":"我是远程js带来的数据"});
运行之后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功，并且还接收到了远程js带来的数据。
动态生成script标签
JSONP JS实现
<head>
<title></title>
<script type="text/javascript"> */
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
JSONP JQ实现
只需在$.ajax中添加dataType:"jsonp"
<head>
<title>跨域测试</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
function showData (data) { //自定义的callback函数
console.info("调用showData");
}
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: "http://localhost:9090/student",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
//jsonp: "theFunction", //指定参数名称
jsonpCallback: "showData", //指定自定义callback
success: function (data) { //success是$.ajax自动创建的回调函数
console.info("调用success");
var result = JSON.stringify(data);
$("#text").val(result);
}
});
});
});
</script>
</head>
网友评论