跨域AJAX
早期，由于浏览器的安全策略，AJAX只能在同域情况下发送成功。但是目前很多浏览器已经开始支持XMLHttpRequest2。XMLHttpRequest2引入了大量的新特性，例如跨域资源请求（CORS）、上传进度事件、支持二进制数据上传/下载等。
现在我们来了解一下vue-resource中用到的CORS特性和XMLHttpRequest2的替代品XDomainRequest。
XMLHttpRequest2 CORS
XMLHttpRequest2是第二代XMLHttpRequest技术，提交AJAX请求还是和普通的XMLHttpRequest请求一样，只是增加了一些新特性。
在提交AJAX跨域请求时，首先需要知道当前浏览器是否支持XMLHttpRequest2，判断方法是使用in操作符检测当前XMLHttpRequest实例对象是否包含withCredentials属性，如果包含则支持CORS。代码示例如下：
var xhrCors='withCredentials' in new XMLHttpRequest()
除此之外，还需要服务端启用CORS支持。
如果想从http://example.com域中提交请求到http://crossdomain.com域中，需要在crossdomain.com域中添加如下响应头：
Access-Control-Allow-Origin:http://example.com
如果crossdomain.com要允许所有异域都可以AJAX请求该域资源，则添加如下响应头：
Access-Control-Allow-Origin:*
服务端开启CROS支持后，在浏览器中就可以和提交普通AJAX请求一样提交跨域请求了。代码示例如下：
var xhr=new XMLHttpRequest()
xhr.open('GET','http://www.crossdomain.com/hello.json')
xhr.onload=function(e){
var data=JSON.parse(this.response)
...
}
xhr.send()
XDomainRequest
如果想在IE8、IE9中支持CROS（IE10以后版本都支持XMLHttpRequest2），我们可以使用XDomainRequest（该属性目前已废弃，不建议使用）。如果vue-resource不支持XMLHttpRequest2，则会降级使用此方式。代码示例如下：
//实例化XDomainRequest
var xdr=new XDomainRequest()
xdr.open('GET','http://www.crossdomain.com/hello.json')
xdr.onprogress=function(){
//进度回调
}
xdr.oerror=function(){
//出错回调
}
xdr.onload=function(){
//成功回调
//success(xdr.responseText)
}
xdr.ontimeout=function(){
//超时回调
}
setTimeout(function(){
//发送请求
xdr.send()
},0)
注：XDomain只支持GET和POST两种请求，如果要在vue-resource中使用其他方法请求，请设置请求选项对象的emulateHTTP为true。在定时器中调用xdr.send()方法，是为了防止多个XDomainRequest请求同时发送时部分请求丢失。
网友评论