什么是jsonp?——使用jsonp解决跨域请求问题

  

  我们在使用ajax请求的时候经常会产生跨域问题,这是由于浏览器的同源策略导致的。所谓同源,即域名、协议、端口均相同,否则不管是静态页面还是动态网页或者web服务都无法通过ajax正常请求。有时候,我们可以通过jsonp来解决。

  jsonp的数据传输方式是利用了 script标签src属性中的链接可以访问跨域的js脚本 这一特性(其实是js语言设计的一大漏洞哈哈),通过src来调用接收服务器返回的js脚本而不是常规的json格式的数据,从而达到接收数据跨域访问的目的。

下面使用jsonp,本地代码中script中的src标签指向另一域名下的remote.js文件,

<!DOCTYPE html>
<html>
<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>

然后本地函数可以输出远程js带来的数据,以达到跨域访问的目的,远程js代码:

localHandler({"result":"我是远程js带来的数据"});

但是怎么让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,我们可以传一个参数过去给服务端,

<!DOCTYPE html>
<html>
<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>
<body> </body>
</html>

服务端动态生成这样一段js代码:

flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});

  

jquery也把jsonp作为ajax的一种形式进行了封装,这里调用也更加方便,本地不用再写调用函数 flightHandler 了,jquery会自动生成回调函数再把数据取出来供success函数调用,

<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(json){
alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
});
</script>
</head>
<body>
</body>
</html>

嗯,就是这样了。

 

上一篇:Monte Carlo Method(蒙特·卡罗方法)


下一篇:Java动态代理