欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 时评 > js进阶——XHR讲解与应用

js进阶——XHR讲解与应用

2025/4/3 5:50:13 来源:https://blog.csdn.net/2301_79858914/article/details/142674847  浏览:    关键词:js进阶——XHR讲解与应用

什么是 XHR?

XHR 是 XMLHttpRequest 的缩写,是 JavaScript 中用来与服务器进行异步通信的 API。通过它,网页可以在不重新加载页面的情况下从服务器请求数据、发送数据,并在收到服务器响应后更新网页内容。

尽管名字里有 “XML”,但 XMLHttpRequest 其实可以处理任何类型的数据,包括 JSON、HTML、纯文本等。

为什么使用 XHR?

  1. 异步通信:允许在后台与服务器交换数据,不干扰用户操作。
  2. 动态更新页面:使网页内容可以根据服务器的响应进行局部更新,而无需刷新整个页面。
  3. 跨平台支持:XHR 是标准的浏览器 API,被所有主流浏览器支持。

如何使用 XHR?

使用 XHR 主要包括以下几个步骤:

1. 创建 XMLHttpRequest 对象

这是与服务器进行通信的关键对象。可以通过 new XMLHttpRequest() 创建一个实例:

let xhr = new XMLHttpRequest();
2. 初始化请求

通过 open() 方法初始化请求。这个方法的语法如下:

xhr.open(method, url, async);
  • method:请求方法,比如 "GET""POST"
  • url:请求的目标 URL。
  • async:是否异步执行,true 表示异步,false 表示同步(推荐使用异步)。

例如,发起一个 GET 请求:

xhr.open('GET', 'https://api.example.com/data', true);
3. 设置请求头(可选)

有些情况下需要设置 HTTP 请求头来发送额外的信息,比如指定内容类型:

xhr.setRequestHeader('Content-Type', 'application/json');
4. 发送请求

通过 send() 方法发送请求。如果是 GET 请求,直接调用 send() 即可:

xhr.send();

如果是 POST 请求,需要在 send() 中传递请求体(通常是 JSON 数据):

let data = JSON.stringify({ name: 'John', age: 30 });
xhr.send(data);
5. 监听响应

通过监听 onreadystatechange 事件,或者使用 loaderror 等事件来处理服务器的响应。

onreadystatechange 的每个状态(readyState)对应着请求的不同阶段:

  • 0: 请求未初始化。
  • 1: 服务器连接已建立。
  • 2: 请求已接收。
  • 3: 请求处理中。
  • 4: 请求已完成,响应已就绪。

通常我们关心的是 readyState == 4,表示请求完成后,可以通过 status 判断是否成功:

xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {// 成功处理响应console.log(xhr.responseText);} else if (xhr.readyState == 4 && xhr.status != 200) {// 处理错误console.error('Error: ' + xhr.status);}
};

或者使用更现代的 loaderror 事件:

xhr.onload = function() {if (xhr.status == 200) {console.log(xhr.responseText);} else {console.error('Request failed. Status: ' + xhr.status);}
};xhr.onerror = function() {console.error('Request error');
};

请求方法的选择

  • GET:常用于从服务器获取数据。请求参数通常附加在 URL 后面。
  • POST:常用于向服务器提交数据。数据通常放在请求体中。

例如,GET 请求:

xhr.open('GET', 'https://api.example.com/data?id=123', true);
xhr.send();

POST 请求:

xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ id: 123 }));

同步与异步

异步 是 XHR 的默认模式。它的好处是不会阻塞页面其他操作,用户可以继续与页面交互。

如果你将 async 参数设置为 false,请求将变为同步请求,意味着 JavaScript 将等待响应返回后再继续执行下一行代码。同步请求会阻塞浏览器,影响用户体验,不推荐使用。

异步请求示例:

xhr.open('GET', 'https://api.example.com/data', true); // true表示异步
xhr.send();

同步请求示例:

xhr.open('GET', 'https://api.example.com/data', false); // false表示同步
xhr.send();

响应类型

可以通过 xhr.responseType 来指定希望接收的数据类型。常见的类型包括:

  • “” (默认):字符串。
  • “json”:JSON 格式。
  • “document”:HTML/XML 文档。
  • “blob”:二进制大对象。
  • “arraybuffer”:二进制缓冲区。

例如,接收 JSON 数据:

xhr.responseType = 'json';
xhr.onload = function() {if (xhr.status == 200) {console.log(xhr.response);  // 自动转换为 JavaScript 对象}
};

处理跨域请求

XHR 的请求遵循同源策略,即只能请求与当前页面相同域名、协议、端口的资源。如果需要请求其他域名的资源,需要服务器设置 CORS(跨域资源共享),或者使用其他技术(如 JSONP)。

完整的 XHR 示例

这是一个完整的 XHR 异步请求示例:

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);xhr.onload = function() {if (xhr.status == 200) {let data = JSON.parse(xhr.responseText);console.log(data);} else {console.error('Error: ' + xhr.status);}
};xhr.onerror = function() {console.error('Request error');
};xhr.send();

XMLHttpRequest 的替代方案

尽管 XHR 强大,但现代开发中更多使用 Fetch API,它提供了更简洁、基于 Promise 的方式来处理 HTTP 请求,并且支持更多特性。示例:

fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

小结

  • XHR 是 JavaScript 中与服务器进行异步通信的核心 API。
  • 可以处理多种请求类型(GET、POST 等)和数据格式(JSON、XML、HTML)。
  • 使用 onreadystatechangeonload 等事件来处理服务器的响应。
  • 尽量使用异步请求以避免阻塞用户界面。
  • 可以通过 CORS 技术解决跨域问题。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词