XMLHttpRequest 基本用法

XMLHttpRequest 作为 AJAX 的一个重要组成部分，可以异步地和服务器交互，实现动态更新的网页。

一、同域 XMLHttpRequest

XMLHttpRequest 和服务器基本的交互方式是 GET 和 POST 方式。最简单的例子如下（模拟 jQuery 的 $.ajax 方法）：

$.ajax = function(settings) {
  var xhr = (window.XMLHttpRequest) ?
            new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      settings.success(xhr.responseText, xhr.status, xhr);
    }
  };
  xhr.open(settings.type, settings.url, true);
  if (settings.contentType) {
    xhr.setRequestHeader("Content-Type", settings.contentType);
  }
  xhr.send(settings.data);
};

var success = function(text, status) {
  if ((status >= 200 && status <300) || status == 304) {
    alert("success " + status + ": " + text);
  } else {
    alert("error " + status + ": " + text);
  }
};

$.ajax({
  type: "GET",
  url: "/geturl.php",
  data: "",
  success: success
});

$.ajax({
  type: "POST",
  url: "/posturl.php",
  data: "hello ajax!",
  success: success
});

在上面代码中，由于 IE6 中没有 XMLHttpRequest 对象，所以我们改用 ActiveX 对象。创建了 xhr 实例之后，我们调用 xhr.open() 方法设置 HTTP 请求。其中 type 参数可以是 "GET" 或者 "POST"，而 url 参数是 HTTP 请求的地址，而 true 参数表示使用异步请求。最后我们调用 xhr.send() 方法发送数据。其中的 data 参数是要提交的 HTTP 正文（对于 GET 方式可以为空）。由于是异步请求，在这之前我们需要先绑定 readystatechange 事件的处理函数。其中 xhr.readyState 有如下这些取值：

状态	名称	描述
0	Uninitialized	未初始化或已被 abort() 方法重置
1	Open	已调用 open() 方法，但是尚未调用 send() 方法
2	Send	已调用 send() 方法发送数据，但是尚未接收到响应
3	Receiving	开始接收响应数据
4	Loaded	已经完全接收响应数据

二、跨域 XMLHttpRequest

刚开始时，XMLHttpRequest 请求只能在同域时有效。随着许多网站开始开放它们的 API，跨域请求的需要就出现了。因此 W3C 在 XMLHttpRequest 1 的基础上制定了 XMLHttpRequest 2 标准，使得在服务器允许时可以发送跨域请求（CORS）。

要支持 CORS，首先服务器需要在回应的信息头中设置好 Access-Control-Allow-Origin 项。例如：

Access-Control-Allow-Origin: http://foo.example.com
Access-Control-Allow-Origin: *

其中第一行表示允许某个域名的 CORS 请求，而第二行表示允许所有域名的 CORS 请求。如果需要使用自定义 header，还需要设置如下：

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

确认服务器支持 CORS 之后，就可以使用下面的方式来发送 XMLHttpRequest 2 跨域请求了：

function createRequest(method, url, data) {
  var xhr = new XMLHttpRequest(); 
  xhr.open(method, url, true);
  xhr.onload = function() {
      var status = xhr.status;
      if ((status >= 200 && status <300) || status == 304) {
          alert(xhr.responseText);
        } else {
          alert(status + ' error in fetching data!');
        }
  };
  xhr.onerror = function() {
    alert('unknown error!');
  };
  xhr.send(data);
}

注意这里的 onload 和 onerror 是 XMLHttpRequest 2 才加入的事件，在 XMLHttpRequest 1 中只有 onreadystatechange 事件可以使用。

IE6 和 IE7 不支持跨域请求，而在 IE8 和 IE9 中可以用这样的方式创建跨域请求：

var xdr = new XDomainRequest();

XDomainRequest 虽然可以用于跨域请求，但是相对 XMLHttpRequest 2 功能还是差不少：比如不能用 setRequestHeader 方法，也没有 status 属性，等等。

幸好，最新的 IE10 支持 XMLHttpRequest 2，我们以后就方便了。

参考资料：
[1] XMLHttpRequest 1 - W3C
[2] XMLHttpRequest 2 - W3C
[3] Cross-Origin Resource Sharing - W3C
[4] cross-site xmlhttprequest with CORS
[5] 利用CORS实现跨域请求
[6] CORS for XHR in IE10 - IEBlog
[7] XDomainRequest - Restrictions, Limitations and Workarounds
[8] AJAX cross domain requests with CORS
[9] POSTing Multipart/Form-Data from an XMLHttpRequest
[A] XMLHttpRequest Call - Ajax Patterns
[B] Ways to circumvent the same-origin policy - Stack Overflow
[C] HTTP access control (CORS) - HTTP | MDN
[D] Using CORS - HTML5 Rocks