别让用户等咖啡凉：Ajax如何实现“丝滑”交互

原生Ajax技术介绍与代码解析

一、Ajax核心概念

Ajax（Asynchronous JavaScript and XML）是一种异步通信技术，允许浏览器在不刷新页面的情况下与服务器交换数据。其核心优势在于：

异步交互：主线程和网络请求可以并行执行
局部更新：仅更新页面指定区域
响应式体验：避免页面闪烁

二、原生Ajax实现步骤

graph TD
    A[创建XMLHttpRequest对象] --> B[配置请求参数]
    B --> C[发送请求]
    C --> D[监听状态变化]
    D --> E[处理响应数据]

三、代码优化解析（基于一言API示例）

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>名言获取器</title>
    <style>
      /* 样式优化：更符合现代UI设计 */
      #fetchBtn {
        padding: 12px 24px;
        background: #4a6fa5;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s;
      }
      #fetchBtn:hover {
        background: #3a5a80;
      }

      #resultContainer {
        margin-top: 20px;
        padding: 15px;
        border-left: 4px solid #4a6fa5;
        background: #f8f9fa;
      }
    </style>
  </head>
  <body>
    <button id="fetchBtn">获取</button>
    <div id="resultContainer">等待获取内容...</div>

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const btn = document.getElementById("fetchBtn");
        const container = document.getElementById("resultContainer");

        btn.addEventListener("click", () => {
          // 1. 创建XHR对象
          const xhr = new XMLHttpRequest();

          // 2. 配置GET请求（API地址+时间戳防缓存）
          xhr.open("GET", `https://v1.hitokoto.cn/?t=${Date.now()}`, true);

          // 3. 设置响应类型（推荐）
          xhr.responseType = "json";

          // 4. 发送请求
          xhr.send();

          // 5. 事件监听（推荐使用load事件）
          xhr.addEventListener("load", () => {
            if (xhr.status === 200) {
              // 6. 处理JSON响应
              const data = xhr.response;
              container.innerHTML = `
                            <blockquote>${data.hitokoto}</blockquote>
                            <p>—— ${data.from || "未知来源"}</p>
                        `;
            } else {
              container.textContent = `请求失败：HTTP ${xhr.status}`;
            }
          });

          // 7. 错误处理
          xhr.addEventListener("error", () => {
            container.textContent = "网络连接异常";
          });
        });
      });
    </script>
  </body>
</html>

成功读取

四、原生Ajax核心对象方法

方法/属性	作用	示例
`open(method, url)`	初始化请求	`xhr.open('GET', url)`
`send([body])`	发送请求	`xhr.send()`
`responseType`	设置响应数据类型	`xhr.responseType='json'`
`status`	HTTP状态码	`if(xhr.status===200)`
`response`	响应主体（根据responseType）	`xhr.response.hitokoto`

最佳实践建议：

始终添加error事件监听处理网络异常

对于JSON API优先设置responseType='json'

使用DOMContentLoaded替代load事件加快交互绑定

重要操作添加加载状态提示（如按钮禁用+加载动画）

此实现完整展示了原生Ajax的核心技术栈，后续会向大家展示一些Ajax封装库用法。

别让用户等咖啡凉：Ajax如何实现“丝滑”交互

Coder Chen

原生Ajax技术介绍与代码解析

一、Ajax核心概念

二、原生Ajax实现步骤

三、代码优化解析（基于一言API示例）

四、原生Ajax核心对象方法

其他文章

Hello World