JavaScript篇：手把手教你掌握原生AJAX：从创建到响应的完整流程

江城开朗的豌豆
42 阅读3分钟

🎓 作者简介： 前端领域优质创作者

🚪 资源导航： 传送门=>

🎬 个人主页：  江城开朗的豌豆

🌐 个人网站:    江城开朗的豌豆 🌍

📧 个人邮箱: YANG_TAO_WEB@163.com 📩

💬 个人微信:     y_t_t_t_ 📱

📌  座  右 铭: 生活就像心电图，一帆风顺就证明你挂了。 💔

👥 QQ群:  906392632 (前端技术交流群) 💬

大家好，我是[小杨]。今天我们来聊聊前端开发中一个经典话题——原生AJAX。虽然现在有axios、fetch等更现代的方案，但理解原生AJAX的实现原理依然很重要。它能帮助我们更深入地理解HTTP请求的本质，也能在特殊场景下派上用场。

1. AJAX是什么？

AJAX全称Asynchronous JavaScript and XML（异步JavaScript和XML），它的核心是不刷新页面向服务器发送请求并接收响应。想象一下，我正在填写一个注册表单，输入用户名后页面不用刷新就能立即告诉我"用户名已存在"，这就是AJAX的典型应用。

2. 原生AJAX完整流程

2.1 创建XMLHttpRequest对象

// 创建XHR对象
const xhr = new XMLHttpRequest();

注意兼容性处理（虽然现在基本不用考虑IE6了）：

let xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest(); // 现代浏览器
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容IE5/6
}

2.2 配置请求参数

// 初始化请求
xhr.open('GET', 'https://api.example.com/user?name=我', true);

open()方法三个关键参数：

  1. HTTP方法（GET/POST/PUT等）
  2. 请求URL
  3. 是否异步（true表示异步，false表示同步，千万别用同步！）

2.3 设置请求头（可选）

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer token123');

常见需要设置的请求头：

  • Content-Type：请求体类型
  • Accept：希望接收的响应类型
  • Authorization：认证信息

2.4 定义回调函数

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成
    if (xhr.status === 200) { // 成功响应
      console.log(xhr.responseText);
    } else {
      console.error('请求失败:', xhr.status);
    }
  }
};

readyState的五个状态：

  • 0：未初始化（未调用open）
  • 1：已打开（已调用open）
  • 2：已发送（已调用send）
  • 3：接收中（已收到部分响应）
  • 4：完成（全部响应接收完毕）

2.5 发送请求

// GET请求（无请求体）
xhr.send();

// POST请求（带请求体）
const data = JSON.stringify({ name: "我", age: 25 });
xhr.send(data);

3. 完整示例演示

3.1 GET请求示例

function getUserInfo() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/user?name=我', true);
  
  xhr.onload = function() {
    if (this.status === 200) {
      const user = JSON.parse(this.responseText);
      console.log(`用户年龄：${user.age}`);
    } else {
      console.error('获取用户信息失败');
    }
  };
  
  xhr.onerror = function() {
    console.error('请求发生错误');
  };
  
  xhr.send();
}

3.2 POST请求示例

function submitForm() {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://api.example.com/submit', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 201) {
        alert('提交成功！');
      } else {
        alert(`提交失败：${xhr.statusText}`);
      }
    }
  };
  
  const data = {
    username: "我",
    password: "safePassword123"
  };
  
  xhr.send(JSON.stringify(data));
}

4. 实际开发中的注意事项

4.1 错误处理要全面

xhr.onerror = function() {
  // 网络错误处理
};

xhr.ontimeout = function() {
  // 超时处理
};

xhr.onabort = function() {
  // 请求中止处理
};

4.2 设置超时时间

xhr.timeout = 5000; // 5秒超时
xhr.ontimeout = function() {
  console.error('请求超时');
};

4.3 进度监控（适合大文件上传/下载）

// 上传进度
xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`上传进度：${percent}%`);
  }
};

// 下载进度
xhr.onprogress = function(e) {
  if (e.lengthComputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`下载进度：${percent}%`);
  }
};

5. 为什么现在不常用原生AJAX了？

  1. 回调地狱：多个异步请求嵌套时代码难以维护
  2. 功能有限：缺少拦截器、自动转换JSON等现代特性
  3. API不够友好：相比fetch和axios使用更繁琐

但理解原生实现仍然有价值！比如我在面试时就被问到："如何在不使用第三方库的情况下实现文件上传进度显示？"这时原生AJAX知识就派上用场了。

6. 总结

原生AJAX的核心步骤：

  1. 创建XMLHttpRequest对象
  2. 配置请求方法、URL和异步标志
  3. 设置必要的请求头
  4. 定义状态变化回调函数
  5. 发送请求（可带请求体）

虽然现在有更现代的替代方案，但AJAX作为Web异步通信的基石，理解它的工作原理对每个前端开发者都很重要。希望这篇文章能帮你彻底掌握AJAX！

avatar
文章
阅读
粉丝