XHR 响应学习笔记

什么是XHR响应？

XMLHttpRequest（XHR）对象是在后台与服务器交换数据的技术，它们可以接收来自服务器的响应。XHR响应是指当前请求返回的数据，其中包含服务器发送的任何信息。

如何处理XHR响应？

XHR响应通常是文本、JSON或XML格式的数据。我们可以使用XHR对象的responseText属性或responseXML属性访问响应数据。对于JSON格式的数据，通常要使用JSON.parse()方法将其转换为JavaScript对象。以下是一个XHR响应处理的例子：

javascriptCopy Code
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.log('请求失败');
  }
};
xhr.send();

上述代码使用XHR对象获取了一个JSON格式的数据并将其打印到控制台中。

实例

以下是一个用XHR从服务器获取数据的实例：

javascriptCopy Code
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://binjie09.com/api/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    displayData(data);
  } else {
    console.log('请求失败');
  }
};
xhr.send();

function displayData(data) {
  // 将数据显示在页面上
}

以上代码使用XHR对象从远程服务器获取数据并将其传递给displayData函数来处理和显示数据。注意，在使用XHR对象时，我们需要确保浏览器支持它，并且服务器支持CORS（跨域资源共享）协议。