JSONP

一、什么是JSONP

1.1 同源策略

如果两个页面拥有相同的协议端口(如果指定),和主机,那么这两个页面就属于同一个
同源策略分为:

  • DOM同源策略:禁止对不同源页面DOM进行操作

  • XMLHttpRequest同源策略:禁止向不同源的地址发起HTTP请求
    由此可见,Ajax禁止跨域。

1.2 JSONP的原理

JSONPJSON with Padding的简称,一般用来解决Ajax跨域的问题。它是这样产生的:

  1. 页面上调用js文件时不受跨域的影响,而且,凡是拥有src属性的标签都拥有跨域的能力,比如

    remote.js的代码:

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

    运行后,成功弹出提示窗口,跨域成功。但问题是,如何让远程js知道它应该调用的本地函数叫什么名字?

    2.2 只要服务端提供的js脚本是动态生成的就行了,调用者可以传一个参数过去告诉服务端本地函数的名字,于是服务端就可以按照客户的需求来生成js脚本并相应了。

      var flightHandler = function (data) {
        alert('你查询的航班结果是:票价 ' + data.price + '元,余票' + data.tickets + '张。');
      };
      var url = 'http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler';
      var script = document.createElement('script');
      script.setAttribute('src', url);
      document.getElementsByTagName('head')[0].appendChild(script);

    并没有直接把远程js写死,而是编码事项动态查询。这是JSONP的核心部分。在调用的url中传递了一个code参数,告诉服务器要查的是CA1998次航班的信息,而callback参数告诉服务器,本地调用的函数叫做flightHandler
    服务器的flightResult.aspx生成了以下代码提供给页面:

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

    运行一下页面,成功提示窗口,JSONP的执行全过程顺利完成。

    2.3 jQuery代码

    $(function() {
      $('button').on('click', function(event) {
        event.preventDefault();
        $.ajax({
          type: 'GET',
          async: false,
          url: 'http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998',
          dataType: 'jsonp',
          jsonp: 'callback',
          jsonpCallback: 'flightHandler',  // 默认为jQuery自动生成的随机函数名
          success: function (json) {
            alert('你查询的航班结果是:票价 ' + json.price + '元,余票' + json.tickets + '张。');
          },
          error: function () {
            alert('fail');
          }
        });
      });
    });

    jQuery自动生成回调函数并把数据取出来供success属性方法来调用。

    三、JSONPAjax的关系

    • AjaxJSONP这两种技术看起来很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jQuery等框架都把JSONP作为Ajax的一种形式。

    • 实际上AjaxJSONP有着本质上的不同。Ajax的核心是通过XMLHttpRequest获取数据,而JSONP的核心则是动态添加

你可能感兴趣的:(JS)