跨域知识（二）—

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);

        }

      });

    });

巴特西

跨域知识（二）——JSONP

2.基于jquery的跨域

最新文章

热门文章