ajax跨域请求问题中xhr2的解决方案

转载自：http://blog.csdn.net/zhourenfei17/article/details/72312503

对于跨域请求目前常用的有三种方式，1：代理，2：JSONP，3：XHR2，前面两种方式我这边不做介绍，相关的帖子有很多，但是对于XHR2的跨域处理方式很多都介绍的很简单，这边对XHR2处理跨域请求做一个简单的讲解。

首先先贴js端代码：

[javascript]  view plain  copy

1. //跨域请求方法示例  
2.     function ajaxPost(){  
3.             var xhr = new XMLHttpRequest();  
4.         if (xhr.withCredentials === undefined) {  
5.                 return;  
6.             }  
7.         //示例为POST请求  
8.             xhr.open("POST", "http://localhost:8080/sendMsg");  
9.         //当为post请求时，这段话必须要添加，否则post过去的数据无法正常接收  
10.             xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");  
11.   
12.             xhr.onreadystatechange = function () {  
13.             if (xhr.readyState !== 4) return;//忽略未完成的调用  
14.             if (xhr.status === 200) {  
15.                 //知道为什么这边接受到的返回值是字符串类型，手动转成json格式，不过这里没有考虑兼容性问题，只是做一个简单的演示  
16.                 var data = JSON.parse(xhr.responseText);  
17.                 alert(data.msg);  
18.             }  
19.         }  
20.         //发送请求，并post提交的参数  
21.         xhr.send("datas=1231232");  
22.     }  

服务器端代码：

[java]  view plain  copy

1. @RequestMapping("sendMsg")  
2.     @ResponseBody  
3.     public Json sendMsg(HttpServletResponse response, String datas){  
4.         Json json = new Json();  
5.         json.setSuccess(true);  
6.         json.setMsg("获取数据成功");  
7.           
8.         System.out.println(datas);  
9.           
10.         //这里需要设置头信息，不然客户端无法接收到返回值  
11.         response.setHeader("Access-Control-Allow-Origin", "*");  
12.         response.setHeader("Access-Control-Allow-Methods", "POST");  
13.         response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");  
14.           
15.         return json;  
16.     }