AJAX异步通信和XMLHttpRequest 对象

AJAX指的是 JavaScript 的异步通信
AJAX 包括以下几个步骤
1.创建 XMLHttpRequest 实例
2.发出 HTTP 请求
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实例的状态发生变化，就会调用监听函数handleStateChange
一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。
AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错（详见同源政策和CORS 通信）。
下面是XMLHttpRequest对象简单用法的完整例子。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
  // 通信成功时，状态值为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);