使用XHR设置参数

XMLHttpRequest（XHR）是一个浏览器API，允许JavaScript发送HTTP请求与服务器进行通信。XHR对象允许在发送请求前设置一些参数以控制请求的行为。

基本用法

以下是一个简单的XHR请求的示例，向指定的URL发送GET请求，并在数据成功返回后显示响应：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
  else {
    console.error('Failed to get data');
  }
};
xhr.send();

在这个例子中，XHR对象被创建并与指定的URL打开连接。onload函数将在成功接收到数据时被调用，请求的结果将被记录在xhr.responseText中。如果请求失败，会记录一个错误消息。

设置请求头

XHR对象允许设置请求头，这将影响到服务器处理请求的方式。例如，可以设置Content-Type头来指示发送的数据是JSON格式，或者Accept头来指示请求的数据类型。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
  else {
    console.error('Failed to get data');
  }
};
xhr.send(JSON.stringify({
  key: 'value'
}));

在这个例子中，我们使用了setRequestHeader方法来设置Content-Type和Accept头。我们还使用了JSON.stringify函数将数据转换为JSON格式。在发送请求时，我们将JSON数据包含在send方法中。

设置请求参数

XHR对象允许设置多个参数，以控制请求方式和服务器处理行为的方式。以下是一些常用的选项：

• method: 请求方式（GET, POST, PUT, DELETE等）
• url: 请求的URL
• headers: 请求头
• body: 请求体（通常用于POST和PUT请求）

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
  else {
    console.error('Failed to save data');
  }
};
xhr.send(JSON.stringify({
  key: 'value'
}));

在这个例子中，我们使用了POST请求来向服务器发送数据。我们将请求数据转换为JSON格式，并将其包含在send方法中。注意，在设置请求头时，我们必须设置Content-Type为application/json。

总结

XHR对象提供了许多选项，以控制请求方式和服务器处理行为的方式。我们可以设置请求头，请求体，请求方式等等。熟练地使用XHR对象将使得我们更好地管理数据通信和使用AJAX请求。