XMLHTTPRequest的属性和方法简介

XMLHTTPRequest（XHR）是用于向服务器发送HTTP请求和处理响应的JavaScript API。在本文中，我们将介绍一些常见的属性和方法，并给出示例说明。

XHR对象

在发送HTTP请求之前，我们需要获取XHR对象。可以通过调用XMLHttpRequest()构造函数来获得XHR对象。

let xhr = new XMLHttpRequest();

XHR属性

XHR对象具有许多有用的属性，以下是一些常见的属性：

1. xhr.readyState - 表示XHR请求的状态，包括以下值：
   • 0 - 请求未初始化
   • 1 - 已启动，尚未发送请求（open方法已调用）
   • 2 - 请求已经发送（send方法已调用），尚未接收到响应
   • 3 - 正在接收响应数据
   • 4 - 响应已经完全接收
2. xhr.status - 表示服务器响应的HTTP状态码。常见的状态码有：
   • 200 - 请求成功
   • 400 - 请求错误
   • 404 - 请求的资源不存在
   • 500 - 服务器错误
3. xhr.responseText - 服务器响应的文本内容

XHR方法

XHR对象还有一些常用的方法，以下是一些示例。

1. xhr.open(method, url) - 配置请求参数，比如请求的URL，请求方法等

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');

1. xhr.send(data) - 发送HTTP请求

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
  title: 'New post',
  content: 'This is my new post!'
}));

示例

下面是一个发送GET请求的示例，获取JSON格式的数据。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.send();

下面是一个发送POST请求的示例，示例中发送JSON格式的数据。

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 201) {
    console.log(xhr.responseText);
  }
}
xhr.send(JSON.stringify({
  title: 'New post',
  content: 'This is my new post!'
}));

我们介绍了XHR对象常用的属性和方法，并提供了两个示例方便理解。开发人员可以根据具体需求进行配置和调用。