新手学跨域之CORS

• jsonp
• iframe
  ● document.domain
  ● window.name
  ● location.hash
  ● navigator (IE6 bug)
  ● postMessage
• CORS
  ● XMLHttpRequest (modern browser)
  ● XDomainRequest (IE8+)
• 图像Ping (略)
• flash (略)

前后端跨域交互终于迎来了官方的支持，只需在后端设置允许前端请求域，即可轻松实现跨域。
CORS适用与IE8+及现代浏览器。现代浏览器通过XMLHttpRequest，IE通过XDomainRequest实现。
事件句柄（标*的事件XDomainRequest不支持）

onloadstart* 请求触发
onprogress 读取及发送数据时触发
onabort* 请求终止时触发
onerror 请求失败时触发
onload 请求成功时触发
ontimeout 超时触发
onloadend* 请求结束时触发

后端设置Access-Control-Allow-Origin，标识允许请求的来源域比如http://foo.com，*表示允许来自任意域的请求。

XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    console.log(xhr.responseText);
}
xhr.onerror = function() {
    console.log('Request Error!');
}
xhr.open('get', 'http://bar.com/xx.php');
xhr.send(null);

XDomainRequest

var xdr = new XDomainRequest(); 
xdr.onload = function() {
    console.log(xdr.responseText)
}
xdr.onerror = function() {
    console.log('Request Error!');
}
xdr.open('get', 'http://bar.com/.php');
xdr.send(null);

<?php
header("Access-Control-Allow-Origin:*");
echo 'xxx';
?>

References:

http://www.html5rocks.com/en/tutorials/cors/