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!