前言

在JavaScript中，XMLHttpRequest是最早且最基础的用于发送HTTP请求的技术之一，尤其是在 AJAX（Asynchronous JavaScript and XML）编程中。尽管随着Web技术的发展，官方再提供了一个Fetch API接口，同时axios、jQuery.ajax、Superagent 等第三方库也是十分优秀，但是我们还是需要清晰的了解这个最早的官方接口。

XMLHttpRequest对象的属性和事件

readyState属性

当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样一来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性。readyState官方说明：XMLHttpRequest.readyState - Web API | MDN (mozilla.org)

status属性

这个status属性描述了HTTP状态代码。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将为0。status官方说明：XMLHttpRequest.status - Web API | MDN (mozilla.org)

responseType属性

responseType 属性主要用于定义Ajax请求期望从服务器接收的数据类型。当你发送一个网络请求时，可以通过设置responseType来指定你期望服务器返回的数据格式。

response

response属性返回响应的正文，返回的类型这取决于请求的 responseType 属性。

XMLHttpRequest.responseText

XMLHttpRequest.responseText 在一个请求被发送后，从服务器端返回文本。

XMLHttpRequest.responseURL

只读属性 XMLHttpRequest.responseURL 返回响应的序列化 URL，如果 URL 为空则返回空字符串。如果 URL 有锚点，则位于 URL # 后面的内容会被删除。如果 URL 有重定向，responseURL 的值会是经过多次重定向后的最终 URL。

# XMLHttpRequest.responseXML

XMLHttpRequest.responseXML 属性是一个只读值，它返回一个包含请求检索的 HTML 或 XML 的Document，如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。默认是当作“text / xml”来解析。当 responseType 设置为“document”并且请求已异步执行时，响应将被当作“text / html”来解析。responseXML 对于任何其他类型的数据以及 data: URLs 为 null。

官方文档：XMLHttpRequest.responseText - Web API | MDN (mozilla.org)

onreadystatechange事件

无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。

open()方法

你需要调用open(DOMString method，DOMString url，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。另外，url参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URL。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器，你可以提供可选的用户名和口令参数。

要注意的是：在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。open() 方法不仅用于启动一个新的请求，也负责重置对象的状态，确保每次请求开始时环境是干净的，不受之前请求的影响。

send()方法

在通过调用open()方法准备好一个请求之后，你需要把该请求发送到服务器。仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。

send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。

实例：

    //向后端发一个请求，获取后端数据
      let xhr = new XMLHttpRequest();//创建了一个Ajax的实例
      xhr.open('get', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList', true)
      xhr.responseType = 'text'
      xhr.send()
      xhr.onreadystatechange = () => {//实时检测请求的每个阶段
        if (xhr.readyState == 4 && xhr.status == 200) {
          const movieList = xhr.response
          console.log(movieList)
        }
      }

      let xhr1 = new XMLHttpRequest();//创建了一个Ajax的实例
      xhr1.open('get', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList', true)
      xhr1.responseType = 'blob'
      xhr1.send()
      xhr1.onreadystatechange = () => {//实时检测请求的每个阶段
        if (xhr1.readyState == 4 && xhr1.status == 200) {
          const movieList = xhr1.response
          console.log(movieList)
        }
      }

注意这里的如果不进行responseType指定，XMLHttpRequest对象的responseType属性的默认值是''（一个空字符串），这默认行为相当于text。换句话说，服务器的响应会被自动处理为文本格式，可以使用xhr.responseText属性来访问这个文本数据。因此，如果没有明确设置，response的默认类型是文本（text）。