魔都六环

jsonp使用

 
  • Jul 25, 2015

目的

js为了安全是禁止跨域资源请求的（同源协议），因此搞出了jsonp

前提

带有src属性的标签是可以跨域的，于是利用来加载跨域的js，js中就是你想要的跨域数据，json是js原生支持的数据格式，因此数据格式采用json

做法

动态生成js，放进src属性里，为了能够自定义对json结果的处理，允许传入一个callback函数，对结果进行包裹，服务端来实现

https://blog.csdn.net/hansexploration/article/details/80314948 的一个例子
 <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);

大多数库进行了更好的封装，jquery

<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>
Search