CORS跨域资源共享

[FanWalker]

AJAX(Asynchronous JavaScript And Xml) 是JavaScript执行异步网络请求

用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，web的运作原理：一次HTTP请求对应一个页面
要让用户留在当前页面，同时发送请求，要用JavaScript实现，接收到数据后，再用JavaScript更新页面

实现AJAX主要依靠XMLHttpRequest对象：

function success(text){
  var textarea = document.getElementById('response-text');
  textarea.value = text;
}
function fail(err){
  var textarea = document.getElementById('response-text');
  text.value = 'Error:' + err;
}
var xhr = new XMLHttpRequest();  //创建XMLHttpRequest对象

必须在调用open之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性

xhr.onreadystatechange = function(){    //监测状态变化
  if(xhr.readyState == 4){  //状态为4时代表请求完成
    if(xhr.status === 200){   //响应已经成功返回
      return success(xhr.responseText);
    }else{
      return fail(xhr.status);
    }  
  }
  else{
    console.log('HTTP请求还在继续');
  }
}
xhr.open('get',url); 
xhr.send();

IE以及低版本IE,XMR对象是通过MSXML库中的一个ActiveX对象实现的。
所以在IE中可能会遇到三种不同的XHR对象：
MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0
所以封装一个函数来创建XHR对象，兼容IE版本

function createXHR(){
  if(typeof XMLHttpRequest != "undefined"){
    return new XMLHttpRequest();
  }else if(typeof ActiveXObject != "undefined"){
    if(typeof arguments.callee.activeXString != "string"){
      var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
          i, len;
      for(i=0, len=versions.length; i<len; i++){
        try{
          new ActiveXObject(versions[i]);
          arguments.callee.activeXString = versions[i];
          break;
        }catch(ex){
          console.log(ex);
        }
      }
    }
    return new ActiveXObject(arguments.callee.activeXString);
  }
}
var xhr = createXHR();

CORS(Cross-Origin Resource Sharing)跨域资源共享

Ajax同信限制：跨域安全策略；
XHR对象只能访问与包含它的页面位于同一个域中的资源：
1、域名要相同（www.example.com和example.com不同），
2、协议要相同（http和https不同），
3、端口号要相同（默认是:80端口，它和:8080就不同）。
CORS定义了在访问跨域资源时，浏览器和服务器应该怎样沟通，CORS的思想是使用自定义的HTTP头部让浏览器与服务区进行沟通，从而决定响应是成功还是失败
比如一个简单的GET或POST请求，它没有自定义的头部，而主题内容是text/plain。在发送该请求时需要给它加一个额外的头部，包含请求页面的源信息（协议、域名和端口），服务器根据该头部信息决定是否给予响应，Origin头部示例：
Origin : http://www.fanwalker.com
如果服务器接收该请求，会在Access-Control-Allow-Origin头部中回发相同的源信息。例如：
Acess-Control-Allow-Origin: http://www.fanwalker.com
如果没有这个头部或不匹配源信息，浏览器会驳回请求。这里注意请求和响应都不包含cookie信息

IE对CORS的实现

IE8中引入了XDR(XDomainRequest)类型，可以实现安全的跨域通信，XDR对象的使用方法与XHR对象相似：

GET请求

var xdr = new XDomainRequest();
xdr.onload = function(){
      alert(xdr.responseText);    //xdr.responseText保存着响应数据
}
xdr.onerror = function(){       //失败后出发error事件
      alert("an error occurred.");
}
xdr.timeout = 1000;     //支持timeout属性和ontimeout事件处理程序，1秒钟后超时并调用ontimeout方法
xdr.ontimeout = function(){
      alert("Request took too long");
}
xdr.open("get", "http://www.fanwalker.com/page/");
xdr.send(null);

POST请求

var xdr = new XDomainRequest();
xdr.onload = function(){
      alert(xdr.responseText);    //xdr.responseText保存着响应数据
}
xdr.onerror = function(){       //失败后出发error事件
      alert("an error occurred.");
}
xdr.timeout = 1000;     //支持timeout属性和ontimeout事件处理程序，1秒钟后超时并调用ontimeout方法
xdr.ontimeout = function(){
      alert("Request took too long");
}
xdr.open("post", "http://www.fanwalker.com/page/");
xdr.contentType = "application/x-www-form-urlencoded":    //设置contentType属性表示发送数据的格式
xdr.send(null);

更多详细的介绍：HTTP访问控制（CORS）