AJAX（Asynchronous JavaScript And XML， 异步的JavaScript和XML）

AJAX是浏览器与服务器交换数据，并在不重新加载整个页面的情况下，更新部分DOM节点的技术。

在没有AJAX的年代，如果需要更新一个网页中的任何内容，都必需重新加载整个网页面。 即使只是更新一个很小的内容，显然这是不科学的，而且用户体验也不好，所以出现了AJAX。

AJAX被W3C标准化，规范:https://www.w3.org/TR/XMLHttpRequest

XMLHttpRequest对象是AJAX的基础。人们经常将XMLHttpRequest简称为XHR.

所有现代浏览器（IE7+、Firefox、Chrome、Safari、Opera）均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject对象）。

创建实例：

var xhr;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xhr = new XMLHttpRequest();
} else {// code for IE6, IE5
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

创建一个连接。

method是HTTP请求方式， 比如GET、POST、PUT、DELETE等。

url是请求的地址。url既可以是相对路径（相对于本站的根的资源）， 也可以是包含主机名的，如果是请求的别站的资源，这就出现了跨域问题， 出于安全考虑，需要一些其他的设置。

async表示是否是异步请求。通常我们使用异步请求，也就是此参数为true

示例：

xhr.open("GET", "/", true);
xhr.open("GET", "/login", true);
xhr.open("GET", "http://www.baidu.com", true);

这里需要特別注意的是：出于浏览器安全的考虑，并不是所有的HTTP请求头都可以进行设置的， 关于哪些请求头不能进行设置，请参考：https://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader()-method

示例：

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

示例1 —— GET请求：

xhr.open("GET", "avatar.jpg?t=" + Math.random(), true);
xhr.send();

示例2 —— POST FORM：

xhr.open("POST", "login", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("username=baihe&password=123456");

存有XMLHttpRequest的状态。其值为从0到4发生变化。

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

存有HTTP状态码，比如200、404等。

获得非XML形式的响应体。

document.getElementById("myDiv").innerHTML = xhr.responseText;

获得XML形式的响应体。

每当readyState改变时，就会触发onreadystatechange回掉函数。

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById("myDiv").innerHTML = xhr.responseText;
    }
}