zoukankan      html  css  js  c++  java
  • jsonp原理详解

    对于jsonp做一个笔记,来源于 https://blog.csdn.net/hansexploration/article/details/80314948

    Ajax 只支持同源,直接请求普通文件存在跨域无权限访问的问题。 而当在Web页面上调用js文件时不受跨域的影响,因此如果想通过纯web跨域访问数据可以通过在远程服务器上设法把数据装进js格式的文件中的方式,供客户端调用和进一步处理。

    json的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据。

    这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去

    为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了.

    只要服务端提供的js脚本是动态生成的就行,这样调用者可以传一个参数过去告诉服务端 “我想要一段调用XXX函数的js代码,请你返回给我”,于是服务器就可以按照客户端的需求来生成js脚本并响应了。

    客户端请求代码

     

    <!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></title>
        <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);
        </script>
    </head>
    <body>
     
    </body>
    </html>

    不再直接把远程js文件写死,而是编码实现动态查询,而这也正是jsonp客户端实现的核心部分,本例中的重点也就在于如何完成jsonp调用的全过程。
    我们看到调用的url中传递了一个code参数,告诉服务器我要查的是CA1998次航班的信息,而callback参数则告诉服务器,我的本地回调函数叫做flightHandler,所以请把查询结果传入这个函数中进行调用。

    最后是使用jQuery实现jsonp(代码封装,以便与用户界面交互,从而实现多次重复调用)

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 
     3 <html xmlns="http://www.w3.org/1999/xhtml" >
     4 
     5 <head>
     6 
     7      <title>Untitled Page</title>
     8 
     9       <script type="text/javascript" src=jquery.min.js"></script>
    10 
    11       <script type="text/javascript">
    12 
    13      jQuery(document).ready(function(){ 
    14 
    15         $.ajax({
    16 
    17              type: "get",
    18 
    19              async: false,
    20 
    21              url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
    22 
    23              dataType: "jsonp",
    24 
    25              jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
    26 
    27              jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
    28 
    29              success: function(json){
    30 
    31                  alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
    32 
    33              },
    34 
    35              error: function(){
    36 
    37                  alert('fail');
    38 
    39              }
    40 
    41          });
    42 
    43      });
    44 
    45      </script>
    46 
    47      </head>
    48 
    49   <body>
    50 
    51   </body>
    52 
    53 </html>

    是不是有点奇怪?为什么我这次没有写flightHandler这个函数呢?而且竟然也运行成功了!
    这就是jQuery的功劳了,jquery在处理jsonp类型的ajax时(,虽然jquery也把jsonp归入了ajax,但其实它们真的不是一回事儿),自动帮你生成回调函数并把数据取出来供success属性方法来调用,是不是很爽呀?
    补充

    这里针对ajax与jsonp的异同再做一些补充说明:

    1、ajax和jsonp这两种技术在调用方式上”看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装

    2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加。

  • 相关阅读:
    危机边缘第五季/全集Fringe迅雷下载
    危机边缘第一季/全集Fringe迅雷下载
    混乱之子第七季/全集Sons of Anarchy迅雷下载
    混乱之子第一季/全集Sons Of Anarchy迅雷下载
    都市侠盗第五季/全集Leverage迅雷下载
    都市侠盗第一季/全集Leverage迅雷下载
    识骨寻踪第十二季/全集Bones迅雷下载
    识骨寻踪第一季/全集Bones迅雷下载
    神盾局特工第四季/全集Agents Of SHIELD迅雷下载
    福尔摩斯基本演绎法第一季/全集Elementary迅雷下载
  • 原文地址:https://www.cnblogs.com/aimeeblogs/p/9486930.html
Copyright © 2011-2022 走看看