1.jsonp不是json
jsonp是一种跨域数据交互协议,而json是一种数据格式。
2.jsonp不是ajax
ajax和jsonp在调用方式很像,但ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心是动态添加<script>标签来调用服务器提供的js脚本。
用jQuery调用jsonp
<!DOCTYPE>
<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);
},
error: function(){
alert('fail');
}
});
});
</script>
</head>
<body>
</body>
</html>
自定义回调函数flightHandler在jQuery作用下归入了ajax success属性方法来调用了。
总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax。
3.jsonp的原理
Web页面上调用js文件时则不受是否跨域的影响(凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)
客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。
页面可以调用远程js文件并传个参数过去,服务端提供动态js脚本接收参数,并根据参数需求
返回相应的数据包裹在指定的回调函数名里。
例如返回航班信息
<!DOCTYPE>
<html>
<head>
<title></title>
<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是:'+data);
};
// 提供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>