ajax技术：不重新加载整个页面的情况下，异步地与服务器进行通信，并更新页面的部分内容
Ajax（Asynchronous JavaScript and XML）是一种使用 JavaScript 向服务器发送和接收数据的技术。
Ajax 的工作原理基于以下关键组件：
-
XMLHttpRequest 对象：XMLHttpRequest 是浏览器提供的 API，用于创建 HTTP 请求，并与服务器进行通信。通过 XMLHttpRequest 对象，您可以发送请求（例如 GET、POST、PUT、DELETE 等），并接收响应数据。
-
事件监听器：Ajax 使用事件监听器来处理异步请求的状态变化。这些事件包括请求已发送、请求已完成、请求失败等。您可以为 XMLHttpRequest 对象添加事件监听器来处理这些事件。
-
回调函数：Ajax 通常使用回调函数来处理异步请求的响应数据。您可以在请求成功时调用一个回调函数来处理响应数据，或在请求失败时调用另一个回调函数来处理错误。
-
服务器端处理：服务器端通常使用后端技术（如 PHP、Python、Node.js 等）来处理 Ajax 请求，并返回相应的数据。服务器端可以处理请求、查询数据库、执行操作，并将结果返回给客户端。
XMLHttpRequest
虽然 XMLHttpRequest 在其名称中包含了 “XML”（可扩展标记语言）一词，但它实际上并不仅限于与 XML 数据进行通信。这个名称的起源可以追溯到早期的 Web 开发阶段，当时 XML 是一种流行的数据格式，用于在 Web 上交换数据。因此，XMLHttpRequest 最初被设计为用于与服务器进行 XML 数据的异步交换。
然而，随着 Web 技术的发展，人们开始意识到 XMLHttpRequest 不仅可以用于 XML 数据，还可以与其他类型的数据进行通信，例如 JSON、HTML、纯文本等。由于 XMLHttpRequest 提供了灵活的 API，可以发送任意类型的 HTTP 请求和接收任意类型的响应，因此它在 Web 开发中变得非常普遍，不仅限于与 XML 相关的用例。
因此，尽管 XMLHttpRequest 在其名称中包含了 “XML” 一词，但它实际上是一个通用的 HTTP 客户端，可以用于与服务器进行各种类型的数据交换，而不仅仅局限于 XML 数据。
XMLHttpRequest 对象是浏览器提供的用于在 JavaScript 中执行 HTTP 请求的 API。它允许您在不重新加载整个页面的情况下，通过 JavaScript 与服务器进行异步通信，以获取数据并更新页面的部分内容。
使用 XMLHttpRequest 对象，您可以执行各种类型的 HTTP 请求，包括 GET、POST、PUT、DELETE 等。
var xhr = new XMLHttpRequest(); 创建XMLHttpRequest对象
xhr.open(method, url, async, username, password); 开启url的连接（将get参数放置到url中）
xhr.send(body); 发送body内容
异步响应状态readyState
在 JavaScript 中，使用 readyState 属性可以实时跟踪异步响应状态。当该属性值发生变化时，会触发 readystatechange 事件，调用绑定的回调函数。readyState 属性值说明如表所示。
readyState 的可能取值及其含义如下：
- 0（UNSENT）：XMLHttpRequest 对象已被创建，但尚未调用 open() 方法。
- 1（OPENED）：open() 方法已被调用。在这个状态下，您可以调用 setRequestHeader() 方法设置请求头，或者将请求体发送到服务器。
- 2（HEADERS_RECEIVED）：send() 方法已被调用，并且所有响应头已经可用。响应体尚未开始下载。
- 3（LOADING）：响应体正在下载。responseText 属性包含了部分响应数据。
- 4（DONE）：整个请求过程已经完成，包括响应体的下载和任何数据的处理。
Ajax 的请求是异步进行的，而不是阻塞的。这意味着当您发送一个 Ajax 请求时，浏览器会继续执行后续的 JavaScript 代码，而不会等待请求完成。当请求完成并收到响应时，浏览器会触发相应的事件（如 readystatechange 事件），您可以在事件处理程序中处理响应数据。
举例
<script>
function fetchData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log('Request successful:', xhr.responseText);
document.getElementById('result').innerText = xhr.responseText; // 将响应数据显示在页面上
} else {
console.error('Request failed with status:', xhr.status);
}
}
};
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.send();
}
</script>
</head>
<body>
<button onclick="fetchData()">Fetch Data</button>
getResponseHeader(“Header-name”)：获取指定的 HTTP 头部消息。
在 JavaScript 中，POST 请求允许发送任意类型、长度的数据，多用于表单提交，以 send() 方法进行传递，而不以查询字符串的方式进行传递。
axios基于ajax
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，网络请求框架。
Axios 在底层使用了浏览器提供的 XMLHttpRequest 对象来执行请求，并使用 Promise 对象来处理异步操作。
返回一个Promise，那么我们就能使用.then()操作Promise对象。
axios.get(url[, config]): 发送一个 GET 请求。
axios.post(url[, data[, config]]): 发送一个 POST 请求。
// 导入 Axios 库
import axios from 'axios';
// 定义请求配置对象
const config = {
method: 'get', // 请求方法
url: 'https://api.example.com/data', // 请求 URL
params: { // 请求参数（可选）
page: 1,
limit: 10
},
headers: { // 请求头（可选）
'Content-Type': 'application/json'
},
// 其他配置（可选）
// ...
};
// 发送 HTTP 请求并处理响应
axios(config)
.then(response => {
// 在请求成功时执行的逻辑
console.log('Response:', response.data);
})
.catch(error => {
// 在请求失败时执行的逻辑
console.error('Error:', error);
});
axios（config）的config属性：
-
baseURL：请求的域名 / 基本地址。
-
timeout：请求的超时时长，默认：1000毫秒(ms)，超过这个时长后端会报(返回)401超时。
备注：一般由后端定义，后端的接口需要的处理时长较长的时候，如果请求的时间过长，后端处理不过来，就会阻塞，给服务器造成较大的压力。设置后，可以及时释放掉。
-
url：请求的路径。
-
method：请求的方法。如：get、post、put、patch、delete等。
-
headers：请求头。
-
params：将请求参数拼接到url上
-
data：将请求参数放置到请求体里