参考链接1
参考链接2
浏览器与服务器之间时采用HTTP协议通信的；如在地址栏输入地址或者提交表单，浏览器都会向服务器发起请求；而AJAX是脚本向服务器发起HTTP请求的代名词；
AJAX总结为以下步骤：
1.创建AJAX对象；
2.发起HTTP请求(只能是协议、域名、端口都相同的同源网址)；
3.接收服务器传回的数据；
4.更新局部网页数据；

实例化XMLHttpRequest对象，使用它向服务器发出HTTP请求

httpRequest = new XMLHttpRequest();  

提出请求后利用XMLHttpRequest实例的属性——readyState相应的值来获得XMLHttpRequest请求当前所处的状态；readyState有以下值：

readyState属性的值发生改变，就会触发readyStateChange事件。此时我们可以通过onReadyStateChange属性，指定这个事件的回调函数，对不同状态进行不同处理。尤其是当状态变为4的时候，表示通信成功，这时回调函数就可以处理服务器传送回来的数据。
接下来，通过status还要检查HTTP响应的响应代码;

根据readyState、onReadyStateChange、status属性，当我们利用open方法和send发送HTTP请求时，代码如下：

httpRequest.onreadystatechange = alertContents;
 httpRequest.open('GET', 'test.html');
httpRequest.send();
function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
           .....
      } else {
           ......
      }
    }
  }

open方法用于指定发送HTTP请求的参数，一共可以接受五个参数：

• method：表示HTTP动词，比如“GET”、“POST”、“PUT”和“DELETE”。
  该请求所要访问的URL;
• url: 表示请求发送的网址。
• async: 默认为true，表示请求为异步。如果设为false，则send()方法-
  只有等到收到服务器返回的结果，才会有返回值。
• user：表示用于认证的用户名，默认为空字符串。
• password：表示用于认证的密码，默认为空字符串。

send方法用于实际发出HTTP请求;如果不带参数，就表示HTTP请求只包含头信息，也就是只有一个URL，典型例子就是GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求。如下两个例子：

ajax.open('GET'
  , 'http://www.example.com/somepage.php?id=' + encodeURIComponent(id)
  , true
);

// 等同于
var data = 'id=' + encodeURIComponent(id);
ajax.open('GET', 'http://www.example.com/somepage.php', true);
ajax.send(data);

var data = 'email='
  + encodeURIComponent(email)
  + '&password='
  + encodeURIComponent(password);
ajax.open('POST', 'http://www.example.com/somepage.php', true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.send(data);

上面代码中的setRequestHeader方法用于设置HTTP头信息。该方法必须在open()之后、send()之前调用;另外send方法的参数就是发送的数据。多种格式的数据，都可以作为它的参数。可以是表单数据，Document数据，JavaScript生成的文件，发送二进制数据，最好使用ArrayBufferView或Blob对象，这使得通过Ajax上传文件成为可能。

在检查请求的状态(readyState)和响应的HTTP状态代码(status)之后，通过response属性获得服务器返回的数据；

它的类型由XMLHttpRequest.responseType属性的值决定。默认为字符串，如果本次请求没有成功或者数据不完整，该属性就会等于null；

• “arraybuffer”：ArrayBuffer对象
• “blob”：Blob对象
• “document”：Document对象
• “json”：JSON对象
• “text”：字符串
  blob类型适合读取二进制数据，比如图片文件。参考以下代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = new Blob([this.response], {type: 'image/png'});
    // 或者
    var blob = oReq.response;
  }
};

xhr.send();

如果将这个属性设为ArrayBuffer，就可以按照数组的方式处理二进制数据。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
  var uInt8Array = new Uint8Array(this.response);
  for (var i = 0, len = binStr.length; i < len; ++i) {
  // var byte = uInt8Array[i];
  }
};

xhr.send();

responseText和responseXML分别返回从服务器接收到的字符串和Document对象；如下代码：

var data = ajax.responseText;
data = JSON.parse(data);

如果想在请求的各种情况下做什么其他处理，可以使用可以使用事件监听接口：

• onloadstart 请求发出
• onprogress 正在发送和加载数据
• onabort 请求被中止，比如用户调用了abort()方法
• onerror 请求失败
• onload 请求成功完成
• ontimeout 用户指定的时限到期，请求还未完成
• onloadend 请求完成，不管成果或失败

httpRequest = new XMLHttpRequest();  
function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
           .....
      } else {
           ......
      }
   }
}
httpRequest.onreadystatechange = alertContents; 
httpRequest.open('GET', 'test.html',true);
httpRequest.onerror = function () {
  console.log("** An error occurred during the transaction");
};
httpRequest.send();

利用表单进行文件上传的时候

现有HTML代码如下：

<form id="file-form" action="handler.php" method="POST">
  <input type="file" id="file-select" name="photos[]" multiple/>
  <button type="submit" id="upload-button">上传</button>
</form>

JavaScript代码如下：

var file = document.getElementById('test-input').files[0];
var xhr = new XMLHttpRequest();

xhr.open('POST', 'myserver/uploads');
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);