ajax是什么？作用是什么？交互流程有哪些阶段？

Enti7c2024-12-30 8:22

AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页应用的网页开发技术，主要用于在不重新加载整个页面的情况下，与服务器进行异步数据交互并更新部分网页内容，以下是其作用和交互流程各阶段的具体介绍：

AJAX 的作用

提升用户体验：通过异步加载数据，避免了页面的整体刷新，使用户在操作网页时能够获得更流畅、即时的反馈。例如，在用户填写表单时，可以实时验证输入内容的合法性，而无需等待页面提交和刷新。
减轻服务器负担：只获取和更新需要的数据，而不是整个页面，减少了服务器的处理量和网络传输的数据量，提高了服务器的性能和资源利用率。
实现局部更新：能够根据用户的操作动态地更新页面的特定部分，使网页更具交互性和动态性。比如在网页中加载更多内容、实时更新数据图表等。
增强前后端分离程度：使得前端和后端的职责更加明确，前端专注于用户界面和交互逻辑，后端专注于数据处理和业务逻辑，通过 AJAX 进行数据交互，两者可以相对独立地进行开发和维护。

AJAX 交互流程的阶段

交互流程，有 5 个阶段

请求初始化
服务器链接已建立
请求已接收
正在处理请求
请求已完成且响应已就绪

使用示例

html 复制代码

<!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>