XHR 请求学习笔记

什么是XHR请求？

XHR代表XMLHttpRequest。它是一种在后台与服务器交换数据的技术，可以加载新数据而不必刷新整个页面。

如何使用XHR进行网络请求？

创建XHR对象

我们需要使用一个XHR对象来发起网络请求。创建XHR对象的代码如下所示：

javascriptCopy Code
const xhr = new XMLHttpRequest();

发送网络请求

要发送网络请求，我们需要调用xhr.open()函数并传递request method、URL和一个布尔值（表明是否异步执行请求）作为参数。然后我们需要调用xhr.send()函数将请求发送到服务器。请求发送后，我们可以使用onload函数来处理服务器响应。

javascriptCopy Code
xhr.open('GET', 'https://api.example.com/data.json', true);
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log('网络请求出错');
  }
};

在上述代码中，我们使用GET方法获取名为"data.json"的JSON数据。一旦服务器响应成功，我们就会看到控制台输出返回的数据。

处理异步网络请求

默认情况下，XHR是异步执行的。如果我们需要修改这个行为，我们可以将第三个参数改为false来同步执行请求。但这不是推荐的方式，因为它会使代码停滞，直到服务器响应为止。

XHR实例

我们可以通过下面的示例代码来深入了解XHR是如何工作的：

javascriptCopy Code
const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data.json', true);
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.log('网络请求出错');
  }
};

以上代码使用了一个名为"data.json"的JSON数据文件。一旦服务器响应成功，它就会将数据传递给onload函数进行处理。如果发生错误，我们就会看到控制台输出“网络请求出错”。

总结

XHR是与服务器交换数据的一种技术。

要发送XHR请求，请通过调用xhr.open()来设置请求方法、URL和请求方式，并通过xhr.send()发送请求。

一旦收到服务器响应，请使用onload()函数进行处理。