jsonp原理详解

scwMason

于 2018-12-24 00:03:01 发布

阅读量133

点赞数

分类专栏： vue

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

https://blog.csdn.net/hansexploration/article/details/80314948

对这个文章总结一下：

jsonp就是利用了src这样的可以跨域的属性，然后在本地动态的创建一个script来添加src然后实现跨域

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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>

这里虽然没有像上面这样写明flightHandler函数，但是ajax里面说明了回调函数是flightHandler，而且成功以后还会调用success里面的函数，这也就相当于是写入了flightHandler这个函数里面