AJAX的产生

• AJAX技术涉及发送服务器请求额外数据而不刷新页面，从而实现更好的用户体验。
• 把 Ajax 推到历史舞台上的关键技术是 XMLHttpRequest（XHR）对象。这个对象最早由微软发明，然后被其他浏览器所借鉴。在 XHR 出现之前，Ajax 风格的通信必须通过一些黑科技实现，主要是使用隐藏的窗格或内嵌窗格。XHR 为发送服务器请求和获取响应提供了合理的接口。这个接口可以实现异步从服务器获取额外数据，意味着用户点击不用页面刷新也可以获取数据。通过 XHR 对象获取数据后，可以使用 DOM 方法把数据插入网页。虽然 Ajax 这个名称中包含 XML，但实际上 Ajax 通信与数据格式无关。这个技术主要是可以实现在不刷新页面的情况下从服务器获取数据，格式并不一定是 XML。
• 所有现代浏览器都通过 XMLHttpRequest 构造函数原生支持 XHR 对象

  let xhr = new XMLHttpRequest();
  

使用XMLHttpRequest

• 使用 XHR 对象首先要调用 open()方法，这个方法接收 3 个参数：请求类型（“get”、"post"等）、请求 URL，以及表示请求是否异步的布尔值。

  xhr.open("get", "example.php", false);
  

• 调用 open()不会实际发送请求，只是为发送请求做好准备。要发送定义好的请求，必须调用 send()方法：

  xhr.open("get", "example.txt", false);
  xhr.send(null);
  

• send()方法接收一个参数，是作为请求体发送的数据。如果不需要发送请求体，则必须传 null，因为这个参数在某些浏览器中是必需的。调用 send()之后，请求就会发送到服务器。

HTTP头部

• 每个 HTTP 请求和响应都会携带一些头部字段，这些字段可能对开发者有用。XHR 对象会通过一些方法暴露与请求和响应相关的头部字段。默认情况下，XHR 请求会发送以下头部字段。

  1. Accept：浏览器可以处理的内容类型。
  2. Accept-Charset：浏览器可以显示的字符集。
  3. Accept-Encoding：浏览器可以处理的压缩编码类型。
  4. Accept-Language：浏览器使用的语言。
  5. Connection：浏览器与服务器的连接类型。
  6. Cookie：页面中设置的 Cookie。
  7. Host：发送请求的页面所在的域。
  8. Referer：发送请求的页面的 URI。
  9. User-Agent：浏览器的用户代理字符串。

• 如果需要发送额外的请求头部，可以使用 setRequestHeader()方法。这个方法接收两个参数：头部字段的名称和值。为保证请求头部被发送，必须在 open()之后、send()之前调用 setRequestHeader(),例如下面的例子：

  let xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {
   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
   alert(xhr.responseText);
   } else {
   alert("Request was unsuccessful: " + xhr.status);
   }
   }
  };
  xhr.open("get", "example.php", true);
  xhr.setRequestHeader("MyHeader", "MyValue");
  xhr.send(null);
  

GET请求

• 最常用的请求方法是 GET 请求，用于向服务器查询某些信息。必要时，需要在 GET 请求的 URL后面添加查询字符串参数。对 XHR 而言，查询字符串必须正确编码后添加到 URL 后面，然后再传给open()方法。

  let url = "example.php";
  // 添加参数
  url = addURLParam(url, "name", "Nicholas");
  url = addURLParam(url, "book", "Professional JavaScript");
  // 初始化请求
  xhr.open("get", url, false);
  

POST请求

• 第二个最常用的请求是 POST 请求，用于向服务器发送应该保存的数据。每个 POST 请求都应该在请求体中携带提交的数据，而 GET 请求则不然。POST 请求的请求体可以包含非常多的数据，而且数据可以是任意格式。要初始化 POST 请求，open()方法的第一个参数要传"post"。

  xhr.open("post", "example.php", true);
  

• 因为 XHR 最初主要设计用于发送 XML，所以可以传入序列化之后的 XML DOM 文档作为请求体。当然，也可以传入任意字符串。默认情况下，对服务器而言，POST 请求与提交表单是不一样的。服务器逻辑需要读取原始 POST数据才能取得浏览器发送的数据。不过，可以使用 XHR 模拟表单提交。为此，第一步需要把 ContentType 头部设置为"application/x-www-formurlencoded"，这是提交表单时使用的内容类型。第二步是创建对应格式的字符串。POST 数据此时使用与查询字符串相同的格式。如果网页中确实有一个表单需要序列化并通过 XHR 发送到服务器，则可以使用函数来创建相应的字符串,例如：

  function submitData() {
  let xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
  alert(xhr.responseText);
  } else {
  alert("Request was unsuccessful: " + xhr.status);
  }
  }
  };
  xhr.open("post", "postexample.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  let form = document.getElementById("user-info");
  xhr.send(serialize(form));
  }