通过 XMLHttpRequest 生成的请求可以有两种方式来获取数据，异步模式或同步模式。请求的类型是由这个 XMLHttpRequest 对象的 open() 方法的第三个参数async的值决定的。如果该参数的值为 false，则该 XMLHttpRequest请求以同步模式进行，否则该过程将以异步模式完成。这两种类型请求的详细讨论和指南可以在同步和异步请求页找到。

W3C 规范定义了 XMLHttpRequest() 对象的几种类型的响应属性。这些属性告诉客户端关于 XMLHttpRequest 返回状态的重要信息。一些处理非文本返回类型的用例，可能包含下面章节所描述的一些操作和分析。

如果你使用 XMLHttpRequest 来获得一个远程的 XML 文档的内容，responseXML 属性将会是一个由 XML 文档解析而来的 DOM 对象，这很难被操作和分析。这里有五种主要的分析 XML 文档的方式：

1. 使用 XPath 定位到文档的指定部分。
2. 手动解析和序列化 XML 为字符串或对象。
3. 使用 XMLSerializer 把 DOM 树序列化成字符串或文件。
4. 如果你预先知道 XML 文档的内容，你可以使用 RegExp。如果你用 RegExp 扫描时受到换行符的影响，你也许想要删除所有的换行符。然而，这种方法是"最后手段"，因为如果 XML 代码发生轻微变化，该方法将可能失败。

如果使用 XMLHttpRequest 从远端获取一个 HTML 页面，则所有 HTML 标记会以字符串的形式存放在 responseText 属性里，这样就使得操作和解析这些标记变得困难。解析这些 HTML 标记主要有三种方式：

1. 使用 XMLHttpRequest.responseXML 属性。
2. 将内容通过 fragment.body.innerHTML 注入到一个 文档片段 中，并遍历 DOM 中的片段。
3. 如果你预先知道 HTML 文档的内容，你可以使用 RegExp。如果你用 RegExp 扫描时受到换行符的影响，你也许想要删除所有的换行符。然而，这种方法是"最后手段"，因为如果 HTML 代码发生轻微变化，该方法将可能失败。

尽管 XMLHttpRequest 一般用来发送和接收文本数据，但其实也可以发送和接收二进制内容。有许多经过良好测试的方法来强制使用 XMLHttpRequest 发送二进制数据。利用 XMLHttpRequest 对象的 overrideMimeType() 方法是一个解决方案，虽然它并不是一个标准方法。

var oReq = new XMLHttpRequest();
oReq.open("GET", url);
// 以二进制字符串形式检索未处理的数据
oReq.overrideMimeType("text/plain; charset=x-user-defined");
/* ... */

然而，自从 responseType 属性目前支持大量附加的内容类型后，已经出现了很多的现代技术，它们使得发送和接收二进制数据变得更加容易。

例如，考虑以下代码，它使用 "arraybuffer" 的 responseType 来将远程内容获取到一个存储原生二进制数据的 ArrayBuffer 对象中。

var oReq = new XMLHttpRequest();

oReq.onload = function (e) {
  var arraybuffer = oReq.response; // 不是 responseText！
  /* ... */
};
oReq.open("GET", url);
oReq.responseType = "arraybuffer";
oReq.send();

更多示例请参考 发送和接收二进制数据。

XMLHttpRequest 提供了各种在请求被处理期间发生的事件以供监听。这包括定期进度通知、错误通知，等等。

支持 DOM 的 progress 事件监测之于 XMLHttpRequest 传输，遵循 Web API 进度事件规范：这些事件实现了 ProgressEvent 接口。

progress

检索的数据量发生了变化。

load

传输完成，所有数据保存在 response 中。

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress);
oReq.addEventListener("load", transferComplete);
oReq.addEventListener("error", transferFailed);
oReq.addEventListener("abort", transferCanceled);

oReq.open();

// ...

// 服务端到客户端的传输进程（下载）
function updateProgress(oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = (oEvent.loaded / oEvent.total) * 100;
    // ...
  } else {
    // 总大小未知时不能计算进程信息
  }
}

function transferComplete(evt) {
  console.log("The transfer is complete.");
}

function transferFailed(evt) {
  console.log("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  console.log("The transfer has been canceled by the user.");
}

第 3-6 行为多种事件添加了事件监听，这些事件在使用 XMLHttpRequest 执行数据传输时被发出。

在上一个例子中，progress 事件被指定由 updateProgress() 函数处理，并接收到传输的总字节数和已经传输的字节数，它们分别在事件对象的 total 和 loaded 属性里。但是如果 lengthComputable 属性的值是 false，那么意味着总字节数是未知并且 total 的值为零。

progress 事件同时存在于下载和上传的传输。下载相关事件在 XMLHttpRequest 对象上被触发，就像上面的例子一样。上传相关事件在 XMLHttpRequest.upload 对象上被触发，像下面这样：

var oReq = new XMLHttpRequest();

oReq.upload.addEventListener("progress", updateProgress);
oReq.upload.addEventListener("load", transferComplete);
oReq.upload.addEventListener("error", transferFailed);
oReq.upload.addEventListener("abort", transferCanceled);

oReq.open();

使用 loadend 事件可以侦测到所有的三种加载结束条件（abort、load，或 error）：

req.addEventListener("loadend", loadEnd);

function loadEnd(e) {
  console.log(
    "The transfer finished (although we don't know if it succeeded or not).",
  );
}

需要注意的是，没有方法可以确切的知道 loadend 事件接收到的信息是来自何种条件引起的操作终止；但是你可以在所有传输结束的时候使用这个事件处理。

XMLHttpRequest 的实例有两种方式提交表单：

• 使用 AJAX
• 使用 FormData API

第二种方式（使用 FormData API）是最简单最快捷的，但是缺点是被收集的数据无法使用 JSON.stringify() 转换为一个 JSON 字符串。 只使用 AJAX 则更为复杂，但也更灵活、更强大。

在大多数用例中，提交表单时即便不使用 FormData API 也不会要求其他的 API。唯一的例外情况是，如果你要上传一个或多个文件，你需要额外的 FileReader API。

提交方法简介

一个 html

Content-Type: application/x-www-form-urlencoded

foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A

?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.

  
    
    
    
  
  
    
Sending forms with pure AJAX

    
Using the GET method

    
      

        
Registration example
        

          First name: 

          Last name: 
        
        

          
        
      
    

    
Using the POST method
    
Enctype: application/x-www-form-urlencoded (default)

    

      

        
Registration example
        

          First name: 

          Last name: 
        
        

          
        
      
    

    
Enctype: text/plain

    

      

        
Registration example
        
Your name: 
        

          Your message:

          
        
        

          
        
      
    

    
Enctype: multipart/form-data

    

      

        
Upload example
        

          First name: 

          Last name: 

          Sex:
          
          Male
          
          Female

          Password: 

          What do you prefer:
          
            Books
            Cinema
            TV
          
        
        

          Post your photos:
          
        
        

          
          I have a bike

          
          I have a car
        
        

          Describe yourself:

          
        
        

          
        
      
    
  

要测试它的话，创建一个名为 register.php 的页面（作为示例表单的 action 属性）并且只输入以下内容：

AJAXSubmit(myForm);

FormData 构造函数能使你编译一个键/值对的集合，然后使用 XMLHttpRequest 发送出去。其主要用于发送表格数据，但是也能被单独用来传输表格中用户指定的数据。传输的数据格式与表格使用 submit() 方法发送数据的格式一致，如果该表格的编码类型被设为 "multipart/form-data"。FormData 对象可以被结合 XMLHttpRequest 的多种方法利用。例如，想了解如何利用 FormData 与 XMLHttpRequest，请转到使用 FormData 对象页面。为了说教的目的，这里有一个早期的示例，被转译成了使用 FormData API 的形式。注意以下代码片段：

  
    
    
    
  
  
    
Sending forms with FormData

    
Using the GET method

    

      

        
Registration example
        

          First name: 

          Last name: 
        
        

          
        
      
    

    
Using the POST method
    
Enctype: application/x-www-form-urlencoded (default)

    

      

        
Registration example
        

          First name: 

          Last name: 
        
        

          
        
      
    

    
Enctype: text/plain

    
The text/plain encoding is not supported by the FormData API.

    
Enctype: multipart/form-data

    

      

        
Upload example
        

          First name: 

          Last name: 

          Sex:
          
          Male
          
          Female

          Password: 

          What do you prefer:
          
            Books
            Cinema
            TV
          
        
        

          Post your photos:
          
        
        

          
          I have a bike

          
          I have a car
        
        

          Describe yourself:

          
        
        

          
        
      
    
  

先创建两个函数：

function getHeaderTime() {
  var nLastVisit = parseFloat(
    window.localStorage.getItem("lm_" + this.filepath),
  );
  var nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));

  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
    window.localStorage.setItem("lm_" + this.filepath, Date.now());
    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
  }
}

function ifHasChanged(sURL, fCallback) {
  var oReq = new XMLHttpRequest();
  oReq.open("HEAD" /* 使用 HEAD - 我们仅需要头部信息 (headers)! */, sURL);
  oReq.callback = fCallback;
  oReq.filepath = sURL;
  oReq.onload = getHeaderTime;
  oReq.send();
}

/* 测试一下这个文件："yourpage.html"... */

ifHasChanged("yourpage.html", function (nModif, nVisit) {
  console.log(
    "The page '" +
      this.filepath +
      "' has been changed on " +
      new Date(nModif).toLocaleString() +
      "!",
  );
});

现代浏览器通过实现跨源资源共享（CORS）标准来支持跨站请求。只要服务器端的配置允许你从你的 Web 应用发送请求，就可以使用 XMLHttpRequest。否则，会抛出一个 INVALID_ACCESS_ERR 异常

有一个跨浏览器兼容的方法，就是给 URL 添加时间戳。请确保你酌情地添加了 "?" or "&" 。例如，将：

http://example.com/bar.html -> http://example.com/bar.html?12345
http://example.com/bar.html?foobar=baz -> http://example.com/bar.html?foobar=baz&12345

const req = new XMLHttpRequest();

req.open("GET", url + (/\?/.test(url) ? "&" : "?") + new Date().getTime());
req.send(null);

要启用跨站脚本，推荐的做法是对 XMLHttpRequest 的响应使用 Access-Control-Allow-Origin 的 HTTP 标头。

如果你的 XMLHttpRequest 收到 status=0 和 statusText=null 的返回，这意味着请求无法执行。就是未被发送的（UNSENT）。一个可能导致的原因是在 XMLHttpRequest 在执行 open() 时，XMLHttpRequest 的来源发生了改变。这种情况是可能发生的，例如，我们在一个窗口的 onunload 事件触发时在进行一个 XMLHttpRequest，之前创建的 XMLHttpRequest 仍然在那里，最后当这个窗口失去焦点、另一个窗口获得焦点时，它还是发送了请求（也就是 open()）。最有效的避免这个问题的方法是在关闭的窗口触发 unload 事件时为新窗口的 DOMActivate 事件设置一个监听器。