对jsonp的理解
2017-10-26 本文已影响0人
wuxuan94
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>
