XMLHttpRequest对象的一个简单运用示例

XMLHttpRequest（）是一个构建HTTP请求的JavaScript对象（即构造器）。
XMLHttpRequest（）对象的用法，主要分为两个有效步骤：

• 发送请求——这一步，完成XMLHttpRequest对象的构建，并为其设置时间监听器。
• 处理响应——这一步，事件监听器会在服务器的响应信息到达时发出通知，然后代码就会忙于从中提取有用的信息

发送请求
1、创建一个对象，并为其设置一个能触发readystatechange事件的事件监听器

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = callback;

2、调用open()方法

xhr.open('GET', 'myfile.txt', true);

第一个参数是http请求的类型（GET、POST、HEAD等）；第二个参数是请求目标的URL（该示例请求的是与当前页面处于同一目录下的文本文件myfile.txt）。第三个参数是布尔值，该值决定了请求是否按照异步的方式进行（true表示异步请求，false表示不是异步请求）。
PS: 记得先在同目录下新建myfile.txt文件写入一些内容，这里我写入“This is my first XMLHttpRequest demo!”

3、发送请求。

xhr.send(''); //该示例发送一个空字符串

处理响应
每个XHR对象中都有一个readystate属性。一旦该属性值改变就会触发readystatechange事件。该属性可能的状态中有：

• 0——未初始化状态
• 1——载入请求状态
• 2——载入请求完成状态
• 3——请求交互状态

• 4——请求完成状态

  当请求的值为4时，说明服务端的响应信息已经返回，可以处理了。在callback函数中，除了确定readyState的值是4外，还要检查http请求的状态码。如果目标URL实际上不存在，就会收到一个值为404的状态码（表示未找到文件），正常情况下值为200。状态码可以通过XHR对象的statues属性来获得。
  一旦xhr.readyState值为4并且xhr.status值为200，就可以通过xhr.responseText来访问目标URL中的内容了。下面代码演示了在callback中实现用alert()方法来显示目标URL中的内容：

function callback() {
  if (xhr.readyState < 4) {
    return;
  };
  if (xhr.status !== 200) {
    alert('the status code is not ok');
    return;
  };
  alert(xhr.responseText);
}

启动服务可看到如下效果：

浏览器中出现如下alert弹窗，实现了用alert()方法来显示myfile.txt的内容。