对jsonp的理解

作者: wuxuan94 | 来源:发表于2017-10-26 17:40 被阅读0次

对jsonp的理解
对jsonp 的理解认识
对jsonp和json的理解
我对jsonp的浅显的理解
jsonp理解
理解 JSONP
理解jsonp
【JSONP】JSONP实现跨域请求
JSONP
常用前端面试问题

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>