AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页应用的网页开发技术，主要用于在不重新加载整个页面的情况下，与服务器进行异步数据交互并更新部分网页内容，以下是其作用和交互流程各阶段的具体介绍：
AJAX 的作用
- 提升用户体验：通过异步加载数据，避免了页面的整体刷新，使用户在操作网页时能够获得更流畅、即时的反馈。例如，在用户填写表单时，可以实时验证输入内容的合法性，而无需等待页面提交和刷新。
- 减轻服务器负担：只获取和更新需要的数据，而不是整个页面，减少了服务器的处理量和网络传输的数据量，提高了服务器的性能和资源利用率。
- 实现局部更新：能够根据用户的操作动态地更新页面的特定部分，使网页更具交互性和动态性。比如在网页中加载更多内容、实时更新数据图表等。
- 增强前后端分离程度：使得前端和后端的职责更加明确，前端专注于用户界面和交互逻辑，后端专注于数据处理和业务逻辑，通过 AJAX 进行数据交互，两者可以相对独立地进行开发和维护。
AJAX 交互流程的阶段
交互流程，有 5 个阶段
- 请求初始化
- 服务器链接已建立
- 请求已接收
- 正在处理请求
- 请求已完成且响应已就绪
使用示例
<!DOCTYPE html>
<html><body><button type="button" onclick="loadDoc()">获取数据</button><div id="demo"></div><script>function loadDoc() {// 创建XMLHttpRequest对象let xhr = new XMLHttpRequest();// 设置请求参数，这里使用GET方法请求名为example.txt的文件，设置为异步请求xhr.open('GET', 'example.txt', true);// 注册事件处理函数xhr.onreadystatechange = function () {if (this.readyState == 4 && this.status == 200) {// 当请求完成且状态码为200时，将响应内容显示在页面上document.getElementById('demo').innerHTML = this.responseText;}};// 发送请求xhr.send();}</script></body></html>
