XMLHttpRequest：在不重载页面下与服务器交换数据

前端

2023-06-11 22:43:58

XMLHttpRequest：为您的 Web 应用程序实现数据交换

简介

XMLHttpRequest (XHR) 是一项强大的工具，可用于在客户端（浏览器）和服务器之间进行无缝的数据交换。它允许 Web 应用程序异步处理数据请求，从而提供动态且响应迅速的用户体验。

XMLHttpRequest 的工作原理

创建 XHR 对象：
```
var xhr = new XMLHttpRequest();
```
设置请求属性：
```
xhr.open("GET", "data.txt", true);
```
- open() 方法指定请求类型（GET 或 POST）、URL 和异步模式（true 或 false）。
发送请求：
```
xhr.send();
```
- send() 方法触发请求。
等待响应：
```
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求完成，响应状态为 200
  }
};
```
- onreadystatechange 事件处理程序在 XHR 对象的 readyState 属性发生变化时触发。
- readyState 属性表示请求的当前状态。
- status 属性包含响应的状态代码。
处理响应：
```
var data = xhr.responseText;
```
- responseText 属性包含响应的文本数据。

XMLHttpRequest 的好处

异步数据交换： 无需重新加载页面即可更新网页内容。
服务器数据访问： 从服务器检索数据，即使页面已加载。
后台数据发送： 向服务器发送数据，而不会中断页面交互。
动态交互： 创建交互式 Web 应用程序，提供类似桌面的体验。

示例：从服务器加载数据

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.txt", true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = xhr.responseText;
    document.getElementById("data").innerHTML = data;
  }
};