前端开发|异步请求：ajax应用实例详解及常见用法示例

前端开发 | 异步请求：AJAX应用实例详解及常见用法示例

2025年7月最新动态：随着WebAssembly和现代JavaScript框架的普及，AJAX仍然是前端异步请求的核心技术之一，尽管Fetch API和Axios逐渐成为主流，但AJAX因其兼容性和灵活性，依然在大量遗留项目和特定场景中广泛使用。

AJAX是什么？

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，就是让网页能够“偷偷”请求数据，用户完全感受不到页面的刷新。

虽然名字里有XML,但现在大家更常用JSON格式传输数据，AJAX的核心是XMLHttpRequest对象（简称XHR），通过它我们可以在后台发送HTTP请求。

AJAX基础示例

创建一个简单的AJAX请求

// 1. 创建XHR对象  
const xhr = new XMLHttpRequest();  
// 2. 配置请求（GET请求，请求一个JSON文件）  
xhr.open('GET', 'https://api.example.com/data.json', true);  
// 3. 设置回调函数，处理响应  
xhr.onload = function() {  
  if (xhr.status >= 200 && xhr.status < 300) {  
    const data = JSON.parse(xhr.responseText);  
    console.log('请求成功，返回数据：', data);  
  } else {  
    console.error('请求失败，状态码：', xhr.status);  
  }  
};  
// 4. 发送请求  
xhr.send();  

发送POST请求（带数据）

const xhr = new XMLHttpRequest();  
xhr.open('POST', 'https://api.example.com/submit', true);  
xhr.setRequestHeader('Content-Type', 'application/json');  
xhr.onload = function() {  
  if (xhr.status === 200) {  
    console.log('提交成功！');  
  }  
};  
const postData = {  
  username: '张三',  
  age: 25  
};  
xhr.send(JSON.stringify(postData));  

AJAX常见用法

动态加载内容（无刷新更新页面）

点击按钮后加载新的内容而不刷新整个页面：

document.getElementById('load-more').addEventListener('click', function() {  
  const xhr = new XMLHttpRequest();  
  xhr.open('GET', '/api/load-more-content', true);  
  xhr.onload = function() {  
    if (xhr.status === 200) {  
      document.getElementById('content-container').innerHTML += xhr.responseText;  
    }  
  };  
  xhr.send();  
});  

表单提交（避免页面跳转）

传统表单提交会刷新页面,而AJAX可以让用户无感知提交：

document.getElementById('my-form').addEventListener('submit', function(e) {  
  e.preventDefault(); // 阻止默认表单提交  
  const formData = new FormData(this);  
  const xhr = new XMLHttpRequest();  
  xhr.open('POST', '/api/submit-form', true);  
  xhr.onload = function() {  
    if (xhr.status === 200) {  
      alert('提交成功！');  
    }  
  };  
  xhr.send(formData);  
});  

实时搜索（输入时自动查询）

搜索框输入时自动匹配结果：

document.getElementById('search-input').addEventListener('input', function() {  
  const query = this.value.trim();  
  if (query.length < 2) return; // 避免频繁请求  
  const xhr = new XMLHttpRequest();  
  xhr.open('GET', `/api/search?q=${encodeURIComponent(query)}`, true);  
  xhr.onload = function() {  
    if (xhr.status === 200) {  
      const results = JSON.parse(xhr.responseText);  
      displaySearchResults(results);  
    }  
  };  
  xhr.send();  
});  

AJAX的优缺点

✅ 优点

• 无刷新更新：提升用户体验，避免页面闪烁。
• 异步通信：不会阻塞用户操作。
• 节省带宽：只传输必要数据，而不是整个页面。

❌ 缺点

• SEO不友好：搜索引擎可能无法抓取AJAX加载的内容。
• 回调地狱：多个异步请求嵌套时，代码可读性变差（可用Promise或Async/Await优化）。
• 兼容性问题：旧版IE需要特殊处理（如ActiveXObject）。

AJAX vs Fetch vs Axios

虽然AJAX仍然可用,但现代前端更推荐：

• Fetch API：浏览器原生支持，基于Promise，更简洁。
• Axios：第三方库，支持请求/响应拦截、自动JSON转换等。

但如果你维护老项目,或者需要兼容旧浏览器，AJAX依然是个可靠的选择。

AJAX是前端开发的基石之一,尽管新技术层出不穷，但它的核心思想（异步无刷新通信）仍然影响着现代Web开发，掌握AJAX，不仅能让你更深入理解HTTP请求，还能在需要时快速解决兼容性问题。

如果你刚开始学前端,建议先用AJAX练手，再过渡到Fetch或Axios，毕竟，了解底层原理，才能更好地驾驭高级工具！ 🚀