跨域知识（二）——JSONP

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

如果对于callback参数如何使用还有些模糊的话，我们后面会有具体的实例来讲解。

首先，网页动态插入<script>元素，由它向跨源网址发出请求。

<h1>绕过浏览器禁止跨域请求的方案之八——JSONP</h1>
  <button id="bt1">请求数据</button>
  <script src="jquery-1.11.3.js"></script>
  <script>
    //声明静态函数 —— 客户端不直接调用
    function doRes(data){
      console.log('开始处理服务器端返回的数据')
      console.log(data);
    }


    $('#bt1').click(function(){
      //动态创建一个SCRIPT标签，添加到DOM
      var s = document.createElement('script');
      s.setAttribute('async', 'true'); //脚本异步执行
      s.src = 'http://localhost/crossdomain/4.php?callback=doRes';
      document.body.appendChild(s);
      //OM树上追加了新的SCRIPT,浏览器就
      //会立即请求该资源并执行服务器返回的JS
     
    })

上面代码通过动态添加<script>元素，向服务器http://localhost/crossdomain/4.php发出请求。

注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。

2.基于jquery的跨域

jquery发起跨域请求，有两种方法：

 (1)$.getJSON()

XHR非跨域请求：

                      $.getJSON('x.php', function(){})

SCRIPT实现JSONP请求

                     $.getJSON('跨域地址/x.php?callback=?', function(){})

  (2)$.ajax()

       XHR非跨域请求：

              $.ajax({....})

      SCRIPT实现JSONP请求：

              $.ajax({

               url: '跨域地址/x.php',

              dataType:'jsonp',

              success: function(){ ... }

                                                       })

demo1如下：

<h1>jQuery.getJSON与跨域请求</h1>
  <button id="bt1">请求数据(非跨域)</button>
  <button id="bt2">请求数据(跨域)</button>
  <script src="jquery-1.11.3.js"></script>
  <script>
    $('#bt1').click(function(){
      //XHR非跨域
      $.getJSON('5-1.php', function(data){
        console.log('1 处理服务器返回的数据')
        console.log(data);
      })
    });

    $('#bt2').click(function(){
      //XHR跨域 —— 浏览器禁止
      // $.getJSON('http://localhost/crossdomain/5-1.php?', function(data){
      //   console.log('2 处理服务器返回的数据')
      //   console.log(data);
      // })

      $.getJSON('http://localhost/crossdomain/5-2.php?callback=?',function(data){
        console.log('3 处理服务器返回的数据')
        console.log(data);
      })
    });

jquery在处理jsonp类型的ajax时（还是忍不住吐槽，虽然jquery也把jsonp归入了ajax，但其实它们真的不是一回事儿），自动帮

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

在服务器端，代码如下：

<?php
//header('Content-Type: application/json');
header('Content-Type: application/javascript');
sleep(10);  //让当前解释器暂停执行10s
$cb = $_REQUEST['callback'];
$data = [
  'ename'=>'Tom',
  'age'=>20
];
echo  $cb. '(' .json_encode($data) . ')';

demo2如下：

<h1>jQuery.ajax与跨域请求</h1>
  <button id="bt1">请求数据(非跨域)</button>
  <button id="bt2">请求数据(跨域)</button>
  <script src="jquery-1.11.3.js"></script>
  <script>
    $('#bt1').click(function(){
      //XHR非跨域
      $.ajax({
        url: '6-1.php',
        success: function(){}
      })
    });

    $('#bt2').click(function(){
      $.ajax({
        url: 'http://localhost/crossdomain/6-2.php',
        dataType: 'jsonp',  //指定响应消息的数据类型
        success: function(data){
          console.log('4 开始处理响应数据')
          console.log(data);

        }
      });
    });