zoukankan      html  css  js  c++  java
  • 什么是jsonp?——使用jsonp解决跨域请求问题

      

      我们在使用ajax请求的时候经常会产生跨域问题,这是由于浏览器的同源策略导致的。所谓同源,即域名、协议、端口均相同,否则不管是静态页面还是动态网页或者web服务都无法通过ajax正常请求。有时候,我们可以通过jsonp来解决。

      jsonp的数据传输方式是利用了 script标签src属性中的链接可以访问跨域的js脚本 这一特性(其实是js语言设计的一大漏洞哈哈),通过src来调用接收服务器返回的js脚本而不是常规的json格式的数据,从而达到接收数据跨域访问的目的。

    下面使用jsonp,本地代码中script中的src标签指向另一域名下的remote.js文件,

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript">
        var localHandler = function(data){
            alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
        };
        </script>
        <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
    </head>
    <body>
    
    </body>
    </html>

    然后本地函数可以输出远程js带来的数据,以达到跨域访问的目的,远程js代码:

    localHandler({"result":"我是远程js带来的数据"});

    但是怎么让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,我们可以传一个参数过去给服务端,

    <!DOCTYPE html>
    <html>
    <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代码:

    flightHandler({
        "code": "CA1998",
        "price": 1780,
        "tickets": 5
    });

      

    jquery也把jsonp作为ajax的一种形式进行了封装,这里调用也更加方便,本地不用再写调用函数 flightHandler 了,jquery会自动生成回调函数再把数据取出来供success函数调用,

    <!DOCTYPE html>
    <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.price + ' 元,余票: ' + json.tickets + ' 张。');
                 },
                 error: function(){
                     alert('fail');
                 }
             });
         });
         </script>
         </head>
      <body>
      </body>
    </html>

    嗯,就是这样了。

     

  • 相关阅读:
    iOS 苹果开发证书失效的解决方案(Failed to locate or generate matching signing assets)
    iOS NSArray数组过滤
    App Store2016年最新审核规则
    iOS 根据字符串数目,自定义Label等控件的高度
    iOS 证书Bug The identity used to sign the executable is no longer valid 解决方案
    Entity FrameWork 增删查改的本质
    EF容器---代理类对象
    Entity FrameWork 延迟加载本质(二)
    Entity FrameWork 延迟加载的本质(一)
    Entity FrameWork 增删查改
  • 原文地址:https://www.cnblogs.com/kaidarwang/p/7018622.html
Copyright © 2011-2022 走看看