跳到主要内容

XMLHttpRequest

2023年03月24日
柏拉文
越努力，越幸运

一、构造函数​

1.1 XMLHttpRequest()​

XMLHttpRequest() 该构造函数用于初始化一个 XMLHttpRequest 实例对象。在调用下列任何其他方法之前，必须先调用该构造函数，或通过其他方式，得到一个实例对象。

const ajax = new XMLHttpRequest();

二、实例属性​

2.1 ajax.readyState​

ajax.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个:

  • 0: 状态为 UNSENT, 此时 代理被创建，但尚未调用 open() 方法。

  • 1: 状态为 OPENED, 此时 open() 方法已经被调用。

  • 2: 状态为 HEADERS_RECEIVED, 此时 send() 方法已经被调用，并且头部和状态已经可获得。

  • 3: 状态为 LOADING 下载中；responseText 属性已经包含部分数据。

-4: 状态为 DONE 下载操作已完成。

语法

const ajax = new XMLHttpRequest(); // ajax.readyState = 0
ajax.open("get","htt://localhost:4000/api",true); // ajax.readyState = 1

2.2 ajax.response​

ajax.response 返回响应的正文。返回的类型为 ArrayBuffer、Blob 、 Document、JavaScript Object 或 DOMString 中的一个。这取决于 responseType 属性。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.readystatechange = function(){
  if(ajax.readyState === 4){
    console.log(xhr.response);
  }
};
ajax.send();

2.3 ajax.responseText​

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

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.responseType = "text";
ajax.readystatechange = function(){
  if(ajax.readyState === 4 && [200,304].includes(ajax.status)){
    console.log(xhr.responseText);
  }
};
ajax.send();

2.4 ajax.responseType​

ajax.responseType是一个枚举字符串值，用于指定响应中包含的数据类型。它可以采用以下值：

  • "" : 空的 responseType 字符串与默认类型 "text" 相同。
  • arraybuffer: response 是一个包含二进制数据的 JavaScript ArrayBuffer。
  • blob: response 是一个包含二进制数据的 Blob 对象。
  • document: response 是一个 HTML Document 或 XML XMLDocument，根据接收到的数据的 MIME 类型而定。
  • json: response 是通过将接收到的数据内容解析为 JSON 而创建的 JavaScript 对象。
  • text: response 是通过将接收到的数据内容解析为 JSON 而创建的 JavaScript 对象。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.responseType = "text";
ajax.readystatechange = function(){
  if(ajax.readyState === 4 && [200,304].includes(ajax.status)){
    console.log(xhr.responseText);
  }
};
ajax.send();

2.5 ajax.status​

ajax.status 返回了 XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前，status 的值为 0。值得注意的是，如果 XMLHttpRequest 出错，浏览器返回的 status 也为 0。

2.6 ajax.statusText​

ajax.statusText 返回了XMLHttpRequest 请求中由服务器返回的一个DOMString 类型的文本信息，这则信息中也包含了响应的数字状态码。

2.7 ajax.timeout​

ajax.timeout 是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.timeout =  3000;
ajax.readystatechange = function(){
  if(ajax.readyState === 4 && [200,304].includes(ajax.status)){
    console.log(xhr.responseText);
  }
};
ajax.send();

2.8 ajax.upload​

ajax.upload 返回一个 XMLHttpRequestUpload 对象，用来表示上传的进度。这个对象是不透明的，但是作为一个XMLHttpRequestEventTarget，可以通过对其绑定事件来追踪它的进度。

语法

const ajax = new XMLHttpRequest();

ajax.upload.addEventListener("loadstart",function(){},false); // 上传开始
ajax.upload.addEventListener("progress",function(){},false); // 上传中
ajax.upload.addEventListener("abort",function(){},false); // 上传终止
ajax.upload.addEventListener("error",function(){},false); // 上传失败
ajax.upload.addEventListener("load",function(){},false); // 上传成功
ajax.upload.addEventListener("timeout",function(){},false); // 上传超时
ajax.upload.addEventListener("loadend",function(){},false); // 上传完成（不论成功与否）

2.9 ajax.withCredentials​

ajax.withCredentials 属性是一个 Boolean 类型，它指示了是否该使用类似 Cookies、Authorization Headers (头部授权) 或者 TLS 客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用 withCredentials 属性是无效的。

语法

document.cookie = "id=0928;username=bolawen;"
const ajax = new XMLHttpRequest();
ajax.open("post", "http://localhost:4000/post-method", true);
ajax.setRequestHeader("Content-Type", "application/json");
ajax.withCredentials = true;
ajax.onreadystatechange = () => {
  if (ajax.readyState === 4 && [200, 304].includes(ajax.status)) {
    const { response } = ajax;
    const result = JSON.parse(response);
    console.log(result);
  }
};
const data = JSON.stringify({
  a: 1,
  b: 2,
  c: 3,
});
ajax.send(data);

说明

http://localhost:3000 页面请求 http://localhost:4000 服务，如果要携带 http://localhost:3000 页面的 cookie ，那么需要配置ajax.withCredentials = true

三、实例方法​

3.1 ajax.abort()​

ajax.abort() 如果该请求已被发出，XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止，它的 readyState 将被置为 XMLHttpRequest.UNSENT (0)，并且请求的 status 置为 0。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.readystatechange = function(){
  if(ajax.readyState === 4 && [200,304].includes(ajax.status)){
    console.log(xhr.responseText);
  }
};
ajax.send();

if(true){
  ajax.abort();
}

返回值

undefined

3.2 ajax.getAllResponseHeaders()​

ajax.getAllResponseHeaders() 方法返回所有的响应头，以 CRLF 分割的字符串，或者 null 如果没有收到任何响应。 注意： 对于复合请求（ multipart requests ），这个方法返回当前请求的头部，而不是最初的请求的头部。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.readystatechange = function(){
  if(ajax.readyState === 4 && [200,304].includes(ajax.status)){
    const headers = request.getAllResponseHeaders();
    const headersList = headers.trim().split(/[\r\n]+/);
    const headersMap = {};
    headersList.forEach(function (line) {
      const parts = line.split(': ');
      const header = parts.shift();
      const value = parts.join(': ');
      headerMap[header] = value;
    });
  }
};
ajax.send();

3.3 ajax.getResponseHeader()​

ajax.getResponseHeader() 返回包含指定响应头文本的字符串。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.readystatechange = function(){
  if(ajax.readyState === 4 && [200,304].includes(ajax.status)){
    const contentType=client.getResponseHeader("Content-Type");
    if(contentType != my_expected_type) { // 如果这不是你的预期值
      client.abort(); // 终止连接
    }
  }
};
ajax.send();

3.4 ajax.open()​

ajax.open() 方法初始化一个请求。该方法要从 JavaScript 代码使用；从原生代码初始化一个请求.

语法

ajax.open(method,url);

ajax.open(method,url,async);

ajax.open(method,url,async,user);

ajax.open(method,url,async,user,password);

  • method: 要使用的 HTTP 方法，比如 GET、POST、PUT、DELETE、等。对于非 HTTP(S) URL 被忽略。

  • url: 一个 DOMString 表示要向其发送请求的 URL。

  • async: 一个可选的布尔参数，表示是否异步执行操作，默认为 true。如果值为 false，send() 方法直到收到答复前不会返回。如果 true，已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true，否则将引发异常。主线程上的同步请求很容易破坏用户体验，应该避免；实际上，许多浏览器已完全弃用主线程上的同步 XHR 支持。在 Worker 中允许同步请求

  • user: 可选的用户名用于认证用途；默认为 null。

  • password: 可选的密码用于认证用途，默认为 null。

3.5 ajax.overrideMimeType()​

ajax.overrideMimeType 方法是指定一个 MIME 类型用于替代服务器指定的类型，使服务端响应信息中传输的数据按照该指定 MIME 类型处理。例如强制使流方式处理为"text/xml"类型处理时会被使用到，即使服务器在响应头中并没有这样指定。此方法必须在 send 方法之前调用方为有效。

语法

ajax.overrideMimeType(mimeType)
  • mimeType: 一个 DOMString 指定具体的 MIME 类型去代替有服务器指定的 MIME 类型. 如果服务器没有指定类型，那么 XMLHttpRequest 将会默认为 "text/xml".

3.6 ajax.send()​

ajax.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。ajax.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。

语法

ajax.send(body);
  • body: 在 XHR 请求中要发送的数据体. 可以是：
    • 可以为 Document, 在这种情况下，它在发送之前被序列化。
    • 为 XMLHttpRequestBodyInit, 从 per the Fetch spec （规范中）可以是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString 对象。
    • null 如果 body 没有指定值，则默认值为 null .

3.7 ajax.setRequestHeader()​

ajax.setRequestHeader() 是设置 HTTP 请求头部的方法。此方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。如果没有设置 Accept 属性，则此发送出send() 的值为此属性的默认值：*/*。

语法

ajax.setRequestHeader(header, value);
  • header: 属性的名称
  • value: 属性的值

四、实例事件​

4.1 ajax.abort​

ajax.abort 当一个请求终止时 abort 事件被触发，比如程序执行 XMLHttpRequest.abort()。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.onabort = function(e){
  console.log(e);
};
ajax.send();

4.2 ajax.error​

ajax.error 当请求遇到错误时，将触发error 事件。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.onerror = function(e){
  console.log(e);
};
ajax.send();

4.3 ajax.load​

ajax.load 当一个XMLHttpRequest请求完成的时候会触发load 事件。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.onload = function(e){
  console.log(e);
};
ajax.send();

4.4 ajax.loadend​

ajax.loadendd loadend 事件总是在一个资源的加载进度停止之后被触发 (例如，在已经触发 “error”，“abort” 或 “load” 事件之后)。这适用于 XMLHttpRequest 调用，以及 <img> 或 <video> 之类元素的内容。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.onloadend = function(e){
  console.log(e);
};
ajax.send();

4.5 ajax.loadstart​

ajax.loadstart 当程序开始加载时，loadstart 事件将被触发。这个事件可以被 XMLHttpRequest 调用，也适用于 <img> 和 <video> 元素。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.onloadstart = function(e){
  console.log(e);
};
ajax.send();

4.6 ajax.progress​

ajax.progress progress事件会在请求接收到数据的时候被周期性触发。

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.onprogress = function(e){
  console.log(e);
};
ajax.send();

4.7 ajax.readystatechange​

ajax.readystatechange 只要 readyState 属性发生变化，就会调用相应的处理函数 (en-US)。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange (en-US) 事件的时候被调用。当一个 XMLHttpRequest 请求被 abort() 方法取消时，其对应的 readystatechange 事件不会被触发。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.onreadystatechange = function(e){
  console.log(e);
};
ajax.send();

或者

function handleReadyStateChange(e){
  console.log(e)
}

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.addEventListener("readystatechange",handleReadyStateChange,false)
ajax.send();

4.8 ajax.timeout​

ajax.timeout 当进度由于预定时间到期而终止时，会触发timeout 事件。

语法

const ajax = new XMLHttpRequest();
ajax.open("get","htt://localhost:4000/api",true);
ajax.ontimeout = function(e){
  console.log(e);
};
ajax.send();