Ajax学习之跨域请求详解
本文和大家分享的主要是前端开发中，ajax跨域请求相关内容，希望对大家学习ajax有所帮助。
一、什么是跨域请求
域名http://www.maiziedu:8080/script/jquery.js，它由http://(协议)、www(子域名)、baidu(主域名)以及8080(端口号)组成，当另一个域名与其中任意一项对应不等的话，那么我们说两个域名就是跨域的。
如http://www.maiziedu: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:代码来源于网络
来源：搬砖工