jQuery中利用JSONP解决AJAX跨域问题

什么是跨域？

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

具体策略限制情况可看下表：

URL	说明	允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://127.0.0.100/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许
http://www.a.com/a.js http://www.b.com/b.js	不同域名	不允许

什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

 什么是jsonp格式呢？API原文：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

JSONP跨域的原理

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

举个例子，假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：

 
 
  
  
  
  



  
  
  
  
 
  
 
  
  
   
   
   
   
 {"id": 123, "name" : "张三", "age": 17} 


 
 
 
 

 

 
 
  
  
  
  

那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是如下：

 
 
  
  
  
  



  
  
  
  
 
  
 
  
  
   
   
   
   
 foo({"id": 123, "name" : "张三", "age": 17}); 


 
 
 
 

 

 
 
  
  
  
  

当然，如果服务端考虑得更加充分，返回的数据可能如下：

 
 
  
  
  
  



  
  
  
  
 
  
 
  
  
   
   
   
   
 try{foo({"id": 123, "name" : "张三", "age": 17});}catch(e){} 


 
 
 
 

 

 
 
  
  
  
  

以PHP为例，服务端的代码应该如下：

 
 
  
  
  
  



  
  
  
  
 
  
 
  
  
   
   
   
   
 $json = json_encode(array("id" => 123, "name" => "张三", "age" => 17)); 


  
  
  
  
 
  
 
  
  
   
   
   
   
 if(isset($_GET['callback'])){ 


  
  
  
  
 
  
 
  
  
   
   
   
   
  $json = 'try{' . $_GET['callback'] . '(' . $json . ')}catch(e){}'; 


  
  
  
  
 
  
 
  
  
   
   
   
   
 } 


  
  
  
  
 
  
 
  
  
   
   
   
   
 echo $json; 


 
 
 
 

 

 
 
  
  
  
  

这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo：

 
 
  
  
  
  



  
  
  
  
 
  
 
  
  
   
   
   
   
 <script type="text/javascript" src="http://www.a.com/user?id=123?callback=foo"></script> 


 
 
 
 

 

 
 
  
  
  
  

便可以使用foo函数来调用返回的数据了。

在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为'jsonp'：

 
 
  
  
  
  



  
  
  
  
 
  
 
  
  
   
   
   
   
 $.ajax({ 


  
  
  
  
 
  
 
  
  
   
   
   
   
  url: 'http://www.a.com/user?id=123', 


  
  
  
  
 
  
 
  
  
   
   
   
   
  
     
 
       async:false, 
     
 
     

           dataType :"jsonp", 
     
 
     

           jsonp:"callbackparam",//服务端用于接收callback调用的function名的参数 
     
 
     

           jsonpCallback:"success_jsonpCallback",//callback的function名称 
     
 
     

           success :function(json){ 
     
 
     

               alert(json); 
     
 
     

               alert(json[0].name); 
     
 
     

           }, 
     
 
     

           error:function(){ 
     
 
     

               alert('fail'); 
       
     
 
     

           } 
       
     
  


  
  
  
  
 
  
 
  
  
   
   
   
   
  


  
  
  
  
 
  
 
  
  
   
   
   
   
 }); 


 
 
 
 

 

 
 
  
  
  
  

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：

 
 
  
  
  
  



  
  
  
  
 
  
 
  
  
   
   
   
   
 $.getJSON('http://www.a.com/user?id=123&callback=?', function(data){ 


  
  
  
  
 
  
 
  
  
   
   
   
   
  //处理data数据 


  
  
  
  
 
  
 
  
  
   
   
   
   
 }); 


 
 
 
 

 

 
 
  
  
  
  

也可以简单地使用getScript方法：

 
 
  
  
  
  



  
  
  
  
 
  
 
  
  
   
   
   
   
 //此时也可以在函数外定义foo方法 


  
  
  
  
 
  
 
  
  
   
   
   
   
 function foo(data){ 


  
  
  
  
 
  
 
  
  
   
   
   
   
  //处理data数据 


  
  
  
  
 
  
 
  
  
   
   
   
   
 } 


  
  
  
  
 
  
 
  
  
   
   
   
   
 $.getScript('http://www.a.com/user?id=123&callback=foo');