XMLHttpRequest基础知识_setrequestheader-CSDN博客

本文链接：https://blog.csdn.net/weixin_43899065/article/details/128192664

XMLHttpRequest 是一个由浏览器的js环境提供的一个API对象，主要用来浏览器与服务器交换数据，简称XHR。

XHR可以在页面加载完后，再继续向服务端发送请求及接收返回的数据时，达到不刷新页面情况下更新页面数据。

XHR使用的协议不同于HTTP，不仅可以使用XML格式的数据，也支持JSON、HTML、或者纯文本。

发展历史

在这里插入图片描述

使用代码

// 1、创建XMLHttpRequest对象，兼容旧版本
var xhr;
if (window.XMLHttpRequest) {
  // modal brower
  xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  // IE 6 and old
  xhr = new ActiveXObject();
}

// 2、定义数据请求方法
const request = function (url, method = 'get', headers, data) {
  if (!xhr) {
    return;
  }
  // 设置触发事件
  addListeners(xhr);
  // 打开请求，初始化请求
  xhr.open(method, url ,true);
  // 设置请求头
  for(let key in headers) {
    xhr.setRequestHeader(key, headers[key]);
  }
  // 发送请求
  xhr.send(data);
}

// 3、设置各个事件触发的事件
function addListeners(x) {
  x.addEventListener('readystatechange', handleEvent);
  x.addEventListener('loadstart', handleEvent);
  x.addEventListener('load', handleEvent);
  x.addEventListener('loadsend', handleEvent);
  x.addEventListener('progress', handleEvent);
  x.addEventListener('error', handleEvent);
  x.addEventListener('abort', handleEvent);
  x.addEventListener('timeout', handleEvent);
}

function handleEvent(e) {
  const { type, currentTarget } = e;
  console.log(type, currentTarget);
  // 0 初始化状态，已创建XMLHttpRequest UNSENT
  // 1 准备发送状态，已调用open方法 OPENED
  // 2 已经发送状态，已调用send方法 HEADERS_RECEIVED
  // 3 正在接收状态，已接收响应头部信息 LOADING
  // 4 完成响应状态，已完成响应的接收 DONE
  console.log('readyState状态', currentTarget.readyState);
  // 1** 服务器已接收到请求，需要继续处理
  // 2** 请求成功
  // 3** 重定向
  // 4** 客户端错误
  // 5** 服务器错误
  console.log('status状态码', currentTarget.status);
  console.log('响应头部', currentTarget.getAllResponseHeaders());
  console.log('响应内容', currentTarget.responseText)
}

属性

readyState

值为0： 描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
值为1： 描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
值为2： 描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
值为3： 描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
值为4： 描述一种"已加载"状态；此时，响应已经被完全接收。

responseText

这个responseText属性包含客户端接收到的HTTP响应的文本内容。

当readyState值为0、1或2时，responseText包含一个空字符串。
当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。
当readyState为4(已加载)时，该responseText包含完整的响应信息。

responseXML

此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。

如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。

无论何时，只要readyState值不为4，那么该responseXML的值也为null。

其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。

status

这个status属性描述了HTTP状态代码，而且其类型为short。

而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

statusText

这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

事件

onreadystatechange

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

方法

abort()

暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。

open(method, url, async, username, password)

调用open方法初始化一个XMLHttpRequest对象。

其中，

method参数是必填- 发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。
url参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。
async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。
对于要求认证的服务器，你可以提供可选的用户名和口令参数。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。

send(data)

在通过调用open()方法准备好一个请求之后，你需要把该请求发送到服务器。

仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。
当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。
在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为3后再立即把它设置为4。
send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。对于大多数其它的数据类型，在调用send()方法之前，应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。如果数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。