Ajax跨域请求

一、什么是跨域请求

域名http://www.baidu:8080/script/jquery.js，它由http://(协议)、www(子域名)、baidu(主域名)以及8080(端口号)组成，当另一个域名与其中任意一项对应不等的话，那么我们说两个域名就是跨域的。
如http://www.baidu:8080的页面上我们要请求数据到http://www.sohu:8080上去，那么就说这种请求是跨域请求。

二、为什么要讲跨域请求
因为在一般的请求条件下，我们的请求都是访问到原有服务。当服务有分开的时候，就必然会使用跨域请求。如果用原有的请求方式去请求跨域域名，请求是不能成功发送到后台。因此，对于ajax跨域请求有独特的方法使用。

三、json和jsonp
web开发很多时候都会用到json数据，那jsonp是干嘛的？jsonp是ajax提供的一种跨域请求实现的方式。首先我们看一下json和jsonp的数据格式
json

[javascript] view plain copy

1. {  
2.     "message":"获取成功",  
3.     "state":"1",  
4.     "result":{"name":"工作组1","id":1,"description":"11"}  
5. }  

jsonp

[javascript] view plain copy

1. callback({  
2.     "message":"获取成功",  
3.     "state":"1",  
4.     "result":{"name":"工作组1","id":1,"description":"11"}  
5. })  

大家发现，jsonp其实就是callback(json)。

四、如何使用jsonp进行跨域访问
例：
页面js请求

[javascript] view plain copy

1. $(document).ready(function(){  
2. var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"  
3.    +"?id=1&callback=?';  
4. $.ajax({  
5.  url:url,  
6.  dataType:'jsonp',  
7.  processData: false,   
8.  type:'get',  
9.  success:function(data){  
10.    alert(data.name);  
11.  },  
12.  error:function(XMLHttpRequest, textStatus, errorThrown) {  
13.    alert(XMLHttpRequest.status);  
14.    alert(XMLHttpRequest.readyState);  
15.    alert(textStatus);  
16.  }});  
17. });  

后台接收数据

[java] view plain copy

1. @RequestMapping(value = "/getGroupById")  
2. public String getGroupById(@RequestParam("id") Long id,  
3.   HttpServletRequest request, HttpServletResponse response)  
4.   throws IOException {  
5.     String callback = request.getParameter("callback");  
6.     ReturnObject result = null;  
7.     Group group = null;  
8.     try {  
9.       group = groupService.getGroupById(id);  
10.       result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);  
11.     } catch (BusinessException e) {  
12.       e.printStackTrace();  
13.       result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);  
14.     }  
15.     String json = JsonConverter.bean2Json(result);  
16.     response.setContentType("text/html");  
17.     response.setCharacterEncoding("utf-8");  
18.     PrintWriter out = response.getWriter();  
19.     out.print(callback + "(" + json + ")");  
20.     return null;  
21. }  

这样，就可以达到跨域请求的目的了，这里注意的是。因为我们ajax里面请求的数据格式是jsonp，那么返回的数据格式就是callback(json)，如果直接返回json会报转换类型失败。

五、jQuery插件-jquery-jsonp
jQuery还提供了专门用于跨域请求的方法：

[javascript] view plain copy

1. var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"  
2.     +"?id=1&callback=?";  
3. $.jsonp({  
4.   "url": url,  
5.   "success": function(data) {  
6.     $("#current-group").text("当前工作组:"+data.result.name);  
7.   },  
8.   "error": function(d,msg) {  
9.     alert("Could not find user "+msg);  
10.   }  
11. });