js实现原声ajax

admin 2026年03月08日 00:59 104 0

原生AJAX通过XMLHttpRequest对象实现异步数据交互，核心步骤包括：创建XHR对象，调用open()方法配置请求（方法、URL、是否异步），设置onreadystatechange事件监听响应状态（readyState为4且status为200时获取数据），通过send()发送请求（POST请求需设置请求头及数据），支持同步/异步模式，异步模式下需处理回调，通过responseText或responseXML获取服务器返回数据，无需刷新页面即可更新页面内容，实现动态数据交互。

原生AJAX实现：从零开始掌握JavaScript核心通信技术

在Web开发中,前后端数据交互是核心环节，AJAX（Asynchronous JavaScript and XML）作为异步通信技术的代表，允许在不刷新页面的情况下与服务器交换数据，显著提升了用户体验，尽管fetch、axios等现代HTTP客户端库已广泛应用，但深入理解原生AJAX的实现原理仍是前端开发者的必备技能——它能帮助我们透彻掌握HTTP协议、异步编程机制，并在调试复杂问题时游刃有余，本文将带领读者从零开始，用原生JavaScript实现完整的AJAX通信流程。

AJAX核心概念：重新定义网页交互

AJAX（Asynchronous JavaScript and XML）并非一种独立的编程语言，而是JavaScript、XML（或JSON）、HTML/CSS及Web API的组合技术，其核心在于异步通信能力：通过浏览器内置的XMLHttpRequest（XHR）对象发起HTTP请求，在不阻塞页面渲染的前提下接收响应数据，最终实现局部内容动态更新。

"异步"是AJAX的灵魂所在：传统同步请求会导致页面冻结（等待响应时用户无法操作），而异步请求可在后台默默执行，用户仍可流畅浏览页面，体验更佳。

AJAX的核心引擎：XMLHttpRequest（XHR）对象

XMLHttpRequest（XHR）是AJAX技术的核心载体，提供了向服务器发送请求和接收响应的完整能力，目前所有主流浏览器（包括IE7+）均支持XHR对象，旧版IE需使用ActiveXObject进行兼容处理。

XHR对象的生命周期与核心API

理解XHR的工作流程需掌握其关键属性和方法：

核心属性

readyState：请求状态标识（0-4）：
- 0（UNSENT）：未初始化，尚未调用open()；
- 1（OPENED）：已打开，已调用open()但未调用send()；
- 2（HEADERS_RECEIVED）：已接收响应头，send()已调用且响应头已返回；
- 3（LOADING）：加载中，响应体正在接收；
- 4（DONE）：完成，响应体已接收完毕。
status：HTTP状态码（如200成功、404未找到、500服务器错误）；
responseText：响应体原始文本（JSON/XML/HTML等）；
responseXML：XML格式的响应体（需服务器设置Content-Type: text/xml）；
onreadystatechange：状态变更回调函数，在readyState变化时触发；
responseType（现代浏览器）：指定响应数据类型（如"json"、"blob"）；
timeout：请求超时时间（毫秒），超时触发ontimeout事件。

核心方法

open(method, url, async, username, password)：初始化请求
- method：HTTP方法（GET/POST/PUT/DELETE等）；
- url：请求地址；
- async：是否异步（默认true，设为false将导致页面卡顿）；
- username/password：可选的认证凭据。
setRequestHeader(header, value)：设置请求头（如Content-Type、Authorization）；
send(data)：发送请求
- GET请求：传null；
- POST/PUT请求：传字符串/FormData/ArrayBuffer等数据体。
abort()：终止当前请求；
getResponseHeader(header)：获取指定响应头值。

原生AJAX实现：GET请求完整示例

以下以"获取用户列表"为例，分步骤实现原生AJAX的GET请求：

步骤1：创建兼容性XHR对象

需兼容不同浏览器版本（包括旧版IE）：

function createXHR() {
  if (window.XMLHttpRequest) {
    // 现代浏览器、IE7+支持
    return new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    // IE5-IE6兼容处理
    try {
      return new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      try {
        return new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        console.error("浏览器不支持AJAX");
        return null;
      }
    }
  }
}
<p>const xhr = createXHR();
if (!xhr) {
alert("浏览器不支持AJAX，无法请求数据");
}

步骤2：配置请求参数

使用open()初始化请求：

// 配置GET请求，异步执行
xhr.open("GET", "https://api.example.com/users", true);

步骤3：设置请求头（可选）

GET请求通常无需设置请求头,但需传递认证信息时：

// 添加Bearer Token认证
xhr.setRequestHeader("Authorization", "Bearer your_token_here");

步骤4：发送请求

GET请求通过URL传递参数,send()传null：

xhr.send(null);

步骤5：监听响应状态

通过onreadystatechange处理响应：

xhr.onreadystatechange = function() {
  // 请求完成且状态码为200
  if (xhr.readyState === 4 && xhr.status === 200) {
    try {
      // 解析JSON响应
      const users = JSON.parse(xhr.responseText);
      console.log("用户列表：", users);
<pre><code>  // 渲染到页面
  renderUserList(users);
} catch (e) {
  console.error("数据解析失败：", e);
}

} // 处理错误

标签： #js #原 #生ajax #实现