当前位置：首页 > news >正文

AJAX 入门到精通

news 2025/7/16 9:31:31

关键词：AJAX、前端开发、异步请求、JavaScript、XMLHttpRequest、jQuery、Fetch API

✅ 摘要

在现代 Web 开发中，AJAX（Asynchronous JavaScript and XML） 是实现页面无刷新更新数据的核心技术之一。它通过浏览器与服务器之间的异步通信，提升用户体验并减少页面重载。

本文将从 AJAX 的基本概念讲起，涵盖其核心原理、常用方法，并结合实际场景提供多个可运行的示例代码（包括原生 JS、jQuery 和 Fetch API），帮助你全面掌握 AJAX 技术。

📌 一、什么是 AJAX？

1.1 简介

AJAX 不是一种新的编程语言，而是一种使用已有技术组合来创建异步 Web 应用程序的技术。它可以让你在不重新加载整个网页的情况下，与服务器进行数据交换并更新部分网页内容。

1.2 核心特点

特性	描述
异步通信	浏览器可以与服务器进行后台交互，无需刷新页面
局部刷新	只更新需要变化的部分内容，提高响应速度
客户端主导	请求由 JavaScript 发起，客户端控制流程

📌 二、AJAX 的核心技术

2.1 XMLHttpRequest 对象

这是最早期也是最基础的 AJAX 实现方式。

示例代码：发送 GET 请求获取数据

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>AJAX 原生示例</title>
</head>
<body><button onclick="loadData()">加载数据</button><div id="result"></div><script>function loadData() {var xhr = new XMLHttpRequest();xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);xhr.onload = function () {if (xhr.status === 200) {document.getElementById("result").innerHTML = xhr.responseText;}};xhr.send();}</script>
</body>
</html>

📌 输出结果：

{"userId": 1,"id": 1,"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit","body": "quia et suscipit\nsuscipit..."
}

📌 三、AJAX 发送 POST 请求

POST 请求用于向服务器提交数据，例如表单提交、注册等操作。

示例代码：使用原生 JS 发送 POST 请求

function postData() {var xhr = new XMLHttpRequest();xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");xhr.onload = function () {if (xhr.status === 201) {console.log(xhr.responseText);}};var data = JSON.stringify({title: '新文章',body: '这是通过 AJAX 提交的内容',userId: 1});xhr.send(data);
}

📌 控制台输出：

{"title": "新文章","body": "这是通过 AJAX 提交的内容","userId": 1,"id": 101
}

📌 四、使用 jQuery 简化 AJAX 请求

jQuery 封装了 AJAX 请求，使得开发者可以更方便地处理 HTTP 请求。

示例代码：jQuery 发送 GET 请求

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<button onclick="getData()">获取数据</button>
<div id="jquery-result"></div><script>function getData() {$.get("https://jsonplaceholder.typicode.com/posts/1", function(data, status){$("#jquery-result").html(JSON.stringify(data));});}
</script>

示例代码：jQuery 发送 POST 请求

function submitData() {$.post("https://jsonplaceholder.typicode.com/posts", {title: 'jQuery 提交',body: '这是一个使用 jQuery 的 POST 请求',userId: 1}, function(data, status){console.log("Data: ", data);});
}

📌 五、使用 Fetch API 进行 AJAX 请求（现代写法）

Fetch API 是现代浏览器提供的用于网络请求的新标准接口，基于 Promise，语法简洁且支持 async/await。

示例代码：Fetch 发送 GET 请求

async function fetchData() {const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');const data = await response.json();console.log(data);
}

示例代码：Fetch 发送 POST 请求

async function postDataWithFetch() {const response = await fetch('https://jsonplaceholder.typicode.com/posts', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({title: 'Fetch API 提交',body: '这是一个使用 Fetch API 的 POST 请求',userId: 1})});const data = await response.json();console.log(data);
}

📌 六、AJAX 处理错误和超时

AJAX 请求可能由于网络问题或服务器错误失败，我们需要添加错误处理逻辑。

示例代码：添加错误处理（Fetch）

async function safeFetch() {try {const response = await fetch('https://jsonplaceholder.typicode.com/non-existent-endpoint');if (!response.ok) throw new Error('HTTP 错误');const data = await response.json();console.log(data);} catch (error) {console.error('请求出错:', error);}
}

示例代码：设置超时时间（原生 XMLHttpRequest）

function timeoutRequest() {var xhr = new XMLHttpRequest();xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);xhr.timeout = 2000; // 设置超时时间为 2 秒xhr.ontimeout = function () {console.log("请求超时！");};xhr.onload = function () {if (xhr.status === 200) {console.log(xhr.responseText);}};xhr.send();
}

📌 七、AJAX 与跨域请求（CORS）

当 AJAX 请求的目标 URL 与当前页面不在同一个域名下时，会触发跨域限制。

示例代码：后端允许跨域（Node.js Express 示例）

const express = require('express');
const app = express();app.use((req, res, next) => {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");next();
});app.get('/api/data', (req, res) => {res.json({ message: "跨域请求成功！" });
});

前端调用：

fetch('http://localhost:3000/api/data').then(res => res.json()).then(data => console.log(data));

📌 八、AJAX 在真实项目中的应用场景

场景 1：登录验证（POST + JSON）

function login() {fetch('/api/login', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ username: 'admin', password: '123456' })}).then(res => res.json()).then(data => {if (data.success) alert('登录成功！');else alert('用户名或密码错误');});
}

场景 2：搜索框自动补全（GET + 动态参数）

function search(query) {fetch(`/api/search?q=${query}`).then(res => res.json()).then(results => {// 显示搜索结果});
}

📌 九、AJAX 最佳实践总结

原则	说明
使用 Fetch API 或 jQuery	推荐使用现代 API 提高开发效率
统一错误处理机制	使用 try/catch 或 `.catch()` 捕获异常
添加加载提示	请求期间显示“正在加载…”提示用户
避免频繁请求	使用防抖或节流控制请求频率
合理使用缓存	对于静态资源或重复请求的数据启用缓存
注意安全性	验证用户输入，防止 XSS 和 CSRF 攻击