html5 XHR2 and CORS
一. XMLHttpRequest Level2
由于同源限制(same-origin policy)，以前XMLHttpRequest(XHR) 只能同源通讯，不能进行跨源资源共享(Cross-Origin Resource Sharing,CORS) 。由于HTML 5的概念形成，在原有XHR的基础上提出了XMLHttpRequest Level2(XHR2)，在XHR2中对CORS有了很好的支持。当前浏览器对XHR2支持情况：from http://caniuse.com/xhr2
在使用XHR2之前要进行检测，检查浏览器是否支持XHR2。在IE中，引入了XDomainRequest(XDR)类型对CORS进行支持，由此也能实现跨域通讯。
二.CORS
The basic idea behind CORS is to use custom HTTP headers to allow both the browser and the server to know enough about each other to determine if the request or response should succeed or fail.For a simple request, one that uses either GET or POST with no custom headers and whose body is text/plain, the request is sent with an extra header called Origin. The Origin header contains the origin (protocol, domain name, and port) of the requesting page so that the server can easily determine whether or not it should serve a response. from：https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser. Additionally, for HTTP request methods that can cause side-effects on user data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTPOPTIONS request header, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.from:http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
简单来说，服务器首先要具备对CORS支持，这样浏览器才能对该服务器进行跨源访问。如果服务器允许某个源对其访问，则体现在HTTP响应的头部。下边第一个图是post.com:8080/ source.html不能被receive.com:8081/get.html跨源访问的HTTP响应头部，第二个图的是post.com:8080/source.html能被receive.com:8081/get.html跨源访问的HTTP响应头部。对比发现差别在于，响应头信息中的Access-Control-Allow-Origin，Access-Control-Allow-Origin是在服务器中表示允许访问获得信息的源，如果任意源都可以访问则Access-Control-Allow-Origin:*。
如何设置服务器能够支持CORS可以参考:http://enable-cors.org/server.html
在iis 7中可以添加Web.config文件，其中代码如下：
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
三.具体一个例子
在post.com:8080中添加一个 source.html代码只有一个字符串，提供给访问者。在receive.com:8081中添加一个get.html文件，代码如下:
<html>
<head>
<script type="text/javascript">
function getString(){
var request=createCORSRequest("GET","http://post.com:8080/source.html");
if(request){
request.onload=function(){
alert(request.responseText);
}
request.onerror=function(e){
alert("error");
}
request.send();
}
}
function createCORSRequest(method,url){
var xhr=new XMLHttpRequest();
if("withCredentials" in xhr){
xhr.open(method,url,true);
}else if(typeof XDomainRequest!="undefined"){
xhr=new XDomainRequest();
xhr.open(method,url);
}else{
xhr=null;
}
return xhr;
}
window.onload=getString();
//window.addEventListener("load",getString,true);
</script>
</head>
<body>
</body>
</html>
参考资料如下：
http://www.html5rocks.com/en/tutorials/file/xhr2/
http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
http://enable-cors.org/server.html
