[聚合文章] 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

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

jsonp

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

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

四、如何使用jsonp进行跨域访问

例：

页面js请求

$(document).ready(function(){
var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
   +"?id=1&callback=?';
$.ajax({
 url:url,
 dataType:'jsonp',
 processData: false, 
 type:'get',
 success:function(data){
   alert(data.name);
 },
 error:function(XMLHttpRequest, textStatus, errorThrown) {
   alert(XMLHttpRequest.status);
   alert(XMLHttpRequest.readyState);
   alert(textStatus);
 }});
});

后台接收数据

@RequestMapping(value = "/getGroupById")
public String getGroupById(@RequestParam("id") Long id,
  HttpServletRequest request, HttpServletResponse response)
  throws IOException {
	String callback = request.getParameter("callback");
	ReturnObject result = null;
	Group group = null;
	try {
	  group = groupService.getGroupById(id);
	  result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
	} catch (BusinessException e) {
	  e.printStackTrace();
	  result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
	}
	String json = JsonConverter.bean2Json(result);
	response.setContentType("text/html");
	response.setCharacterEncoding("utf-8");
	PrintWriter out = response.getWriter();
	out.print(callback + "(" + json + ")");
	return null;
}

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

五、jQuery插件-jquery-jsonp

jQuery还提供了专门用于跨域请求的方法：

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

ps:代码来源于网络