AJAX异步通信和XMLHttpRequest 对象

AJAX指的是 JavaScript 的异步通信
AJAX 包括以下几个步骤
1、创建XMLHttpRequest对象。
2、设置请求方式。
3、调用回调函数。
4、发送请求。
概括起来,AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。

详细步骤：

var xhr = new XMLHttpRequest();

XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。
一旦新建实例，就可以使用open()方法发出 HTTP 请求。

xhr.open('GET', 'http://www.example.com/page.php', true);

上面代码向指定的服务器网址，发出 GET 请求。
然后，指定回调函数，监听通信状态（readyState属性）的变化。

xhr.onreadystatechange = handleStateChange;

function handleStateChange() {
  // ...
}

上面代码中，一旦XMLHttpRequest实例的状态发生变化（即XMLHttpRequest.readyState的状态变化），就会调用监听函数handleStateChange
一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。
AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错（详见同源政策和CORS 通信）。
下面是XMLHttpRequest对象简单用法的完整例子。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){	//onreadystatechange是一个监听函数，当readyState状态值发生改变时就会触发
  // 通信成功时，状态值为4
  if (xhr.readyState === 4){
    if (xhr.status === 200){
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};

xhr.onerror = function (e) {
  console.error(xhr.statusText);
};

xhr.open('GET', '/endpoint', true);
xhr.send(null);

XMLHttpRequest 的实例属性

1.XMLHttpRequest.readyState

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当readyState状态改变时，就会触发onreadystatechange事件。
XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值。
0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。
1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。
2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。
4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。

var xhr = new XMLHttpRequest();
if (xhr.readyState === 4) {
  // 请求结束，处理服务器返回的数据
} else {
  // 提示数据“正在加载中……”
}

2.XMLHttpRequest.onreadystatechange

XMLHttpRequest.onreadystatechange属性指向一个监听函数。onreadystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。

3.XMLHttpRequest.response

XMLHttpRequest.response属性表示服务器返回的数据体（即 HTTP 回应的 body 部分）。它可能是任何数据类型，比如字符串、对象、二进制对象等等，具体的类型由XMLHttpRequest.responseType属性决定。该属性只读。

4.XMLHttpRequest.responseType

XMLHttpRequest.responseType属性是一个字符串，表示服务器返回数据的类型。这个属性是可写的，可以在调用open()方法之后、调用send()方法之前，设置这个属性的值，告诉服务器返回指定类型的数据。如果responseType设为空字符串，就等同于默认值text。

“”（空字符串）：等同于text，表示服务器返回文本数据。
“arraybuffer”：ArrayBuffer 对象，表示服务器返回二进制数组。
“blob”：Blob 对象，表示服务器返回二进制对象。
“document”：Document 对象，表示服务器返回一个文档对象。
“json”：JSON 对象。
“text”：字符串。

5.XMLHttpRequest.responseText / XMLHttpRequest.responseXML

XMLHttpRequest.responseText属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.responseType = 'text';
xhr.onload = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send(null);

XMLHttpRequest.responseXML属性返回从服务器接收到的 HTML 或 XML 文档对象，该属性为只读。如果本次请求没有成功，或者收到的数据不能被解析为 XML 或 HTML，该属性等于null。

6.XMLHttpRequest.status，XMLHttpRequest.statusText

XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。

1xx：信息响应类，表示接收到请求并且继续处理
2xx：处理成功响应类，表示动作被成功接收、理解和接受
3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
5xx：服务端错误，服务器不能正确执行一个正确的请求

200, OK，访问正常
301, Moved Permanently，永久移动
302, Moved temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现指定网址、没有发现文件、查询或URl
500, Internal Server Error，服务器发生错误

（详细状态码解析）

http://www.cnblogs.com/liu-fei-fei/p/5618782.html

7.事件监听属性

XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数
XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数
XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
XMLHttpRequest.onerror：error 事件（请求失败）的监听函数
XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数
XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数

XMLHttpRequest 的实例方法

8.XMLHttpRequest.open()

open()方法相当于创建一个HTTP请求。
XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。它一共可以接受三个参数。（其实是五个）
XMLHttpRequest.open( method , url , async )
method：表示 HTTP 动词方法，比如GET、POST、PUT、DELETE、HEAD等。
url: 表示请求发送目标 URL。
async: 布尔值，表示请求是否为异步，默认为true。如果设为false，则send()方法只有等到收到服务器返回了结果，才会进行下一步操作。该参数可选。由于同步 AJAX 请求会造成浏览器失去响应，许多浏览器已经禁止在主线程使用，只允许 Worker 里面使用。所以，这个参数轻易不应该设为false。

9.XMLHttpRequest.send()

XMLHttpRequest.send()方法用于实际发出 HTTP 请求
它的参数是可选的，如果不带参数，就表示 HTTP 请求只有一个 URL，没有数据体，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

GET 请求例子：

var xhr = new XMLHttpRequest();
xhr.open('GET',
  'http://www.example.com/?id=' + encodeURIComponent(id),
  true
);
xhr.send(null);

POST请求例子：

var xhr = new XMLHttpRequest();
var data = 'email='
  + encodeURIComponent(email)
  + '&password='
  + encodeURIComponent(password);

xhr.open('POST', 'http://www.example.com', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);

注意，所有 XMLHttpRequest 的监听事件，都必须在send()方法调用之前设定。

XMLHttpRequest 实例的事件

10.readyStateChange 事件

readyState属性的值发生改变，就会触发 readyStateChange 事件。
我们可以通过onReadyStateChange属性，指定这个事件的监听函数，对不同状态进行不同处理。尤其是当状态变为4的时候，表示通信成功，这时回调函数就可以处理服务器传送回来的数据。

11.load 事件、error 事件、abort 事件

load 事件表示服务器传来的数据接收完毕，error 事件表示请求出错，abort 事件表示请求被中断（比如用户取消请求）。

附录：
1.Ajax：readyState（状态值）和status（状态码）的区别
readyState，是指运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤，使用“ajax.readyState”获得
status，是指无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，使用“ajax.status”获得
总体理解：可以简单的理解为state代表一个整体的状态。而status是这个大的state下面具体的小的状态。

2.下面写出一段ajax请求的伪代码

if(window.xmlHttpRequest){//非IE浏览器
	var xmlHttp = new xmlHttpRequest();
}if else(window.ActiveXObject){//IE浏览器
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
xmlHttp.open('GET', '/server', true);
xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState == 4 && xmlHttp.stauts == 200){
		var document.getElementById(id).innerHTML = xmlHttp.responseText;
	}
}
xmlHttp.send();