关于跨域的ajax――Cross-Origin Resource Sharing (CORS)
转载:http://mutongwu.iteye.com/blog/1637183 CORS浏览器支持:Firefox 3.5+,Safari 4+,Chrome,Safari for iOS,and WebKit for Android //页面A:http://shawn.test2.com/crossAjax.html functioncreate(){ varobjXMLHTTP=newXMLHttpRequest(); objXMLHTTP.open('GET','http://www.test.com:8080/jsp/json.jsp',true); //objXMLHTTP.setRequestHeader("hello","world"); objXMLHTTP.onreadystatechange=function(){ if(objXMLHTTP.readyState==4){ alert(objXMLHTTP.responseText); } }; objXMLHTTP.send(null); } //后端页面B:http://www.test.com:8080/jsp/json.jsp <% //允许来自http://shawn.test2.com(默认端口80)的请求。 response.setHeader("Access-Control-Allow-Origin","http://shawn.test2.com"); //允许所有 //response.setHeader("Access-Control-Allow-Origin","*"); /*cookie设置发送到浏览器端,不会生效。 StringcookieName="Sender"; Cookiecookie=newCookie(cookieName,"Test_Content"); cookie.setMaxAge(10);//存活期为10秒 response.addCookie(cookie); */ Stringstr=""; str+="{"; str+=""result":1"; str+=","data":[5,7]"; str+="}"; out.print(str); %> 允许多个域名? 可以考虑把 域名做一个白名单,读取到服务器,然后再进行匹配。 functioncreate(){ varobjXMLHTTP=newXMLHttpRequest(); objXMLHTTP.open('POST',true); objXMLHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded"); objXMLHTTP.setRequestHeader("hello","world"); objXMLHTTP.onreadystatechange=function(){ if(objXMLHTTP.readyState==4){ alert(objXMLHTTP.responseText); } }; objXMLHTTP.send("userName=shawn"); } 因为这里定义请求头,所以后端也需要做设置支持: <% response.setHeader("Access-Control-Allow-Origin","http://shawn.test2.com"); //response.setHeader("Access-Control-Allow-Methods","GET,POST");//逗号分隔;默认可以不设置。 response.setHeader("Access-Control-Allow-Headers","Content-Type,hello");//逗号分隔 //预检测被缓存时间:30秒;默认可以不设置。在这个时间内,用户再次请求改数据,可以跳过预检测阶段。 //在firefoxV8里面,发现这个设置并没有生效。chromeV14、Safari5是生效的。 //response.setHeader("Access-Control-Max-Age","30"); Stringstr=""; str+="{"; str+=""result":1"; str+=",7]"; str+=","userName":"+request.getParameter("userName"); str+="}"; out.print(str); %> 浏览器支持预检请求:Firefox 3.5+,and Chrome objXMLHTTP.withCredentials = true;//允许ajax请求携带cookie信息 //服务器端,同样要做调整: response.setHeader("Access-Control-Allow-Credentials","true"); 注意: 1. 这里面,请求携带的是 服务器所在域名的cookie。例子中,就是 www.test.com (包括test.com)的cookie信息。 //http://shawn.test2.com/crossAjax.html functioncreateXDR(){ varxdr=newXDomainRequest(); xdr.onload=function(){ alert(xdr.responseText); }; xdr.onerror=function(){ alert("Anerroroccurred."); }; //测试中,发现仅仅只能通过GET方式传值。 xdr.open("GET","http://www.test.com:8080/jsp/jsonie.jsp"); //IE8下报错 //xdr.contentType="application/x-www-form-urlencoded"; // xdr.send(); //后端无法读取到POST的内容。不知道为何? //xdr.send("userName=shawn"); } //http://www.test.com:8080/jsp/jsonie.jsp <% response.setHeader("Access-Control-Allow-Origin","*");//allowall Stringstr=""; str+="{"; str+=""result":1"; str+=",255);">总的来说,IE下出于安全的考虑,对于跨域的ajax限制很大,功能也弱。XDomainRequest也支持 progres、timeout等事件,更多内容可以参考MSDN. |