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

Ajax原理、用法与经典代码实例

news 2025/7/16 9:20:23

一、什么是 Ajax

Ajax（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）是一种在无需重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容的技术。

简单来说，Ajax 让网页能够实现“局部刷新”、“无刷新动态加载”，比如：

点击加载更多内容
搜索框的自动补全
提交表单不用整个页面跳转

Ajax 不是一种单独的技术，而是一组技术的组合，核心是 JavaScript 的异步请求能力。

二、Ajax 的原理

用户在页面上触发事件（如点击按钮、输入内容）
JavaScript 通过浏览器内置的 XMLHttpRequest 对象（或现代 fetch API）向服务器发送 HTTP 请求
服务器处理请求后，返回数据（常见格式为 JSON、XML、HTML、文本）
JavaScript 收到响应后，动态更新页面内容，而不用整个页面刷新

三、Ajax 的典型应用场景

搜索引擎的下拉联想
发送验证码（异步倒计时）
聊天消息的实时获取
电商商品筛选和分页
表单的无刷新提交和校验

四、Ajax 的经典写法

1. 原生 XMLHttpRequest（经典写法）

// 创建一个 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();// 配置请求方式、URL、是否异步
xhr.open("GET", "https://api.example.com/data", true);// 监听请求状态变化
xhr.onreadystatechange = function () {if (xhr.readyState === 4) { // 请求完成if (xhr.status === 200) { // 状态码200=成功// 处理响应内容var data = JSON.parse(xhr.responseText);document.getElementById("result").innerText = data.message;} else {console.error("请求失败", xhr.status);}}
};// 发送请求
xhr.send();

2. jQuery Ajax（广泛用于早期项目）

$.ajax({url: "https://api.example.com/data",type: "GET",dataType: "json",success: function(data) {$("#result").text(data.message);},error: function(xhr, status, error) {alert("请求失败: " + error);}
});

五、现代 Ajax 写法（Promise 风格）

1. fetch API（原生 Promise）

fetch("https://api.example.com/data").then(response => {if (!response.ok) throw new Error("网络错误");return response.json();}).then(data => {document.getElementById("result").innerText = data.message;}).catch(error => {console.error("请求失败:", error);});

2. axios（社区主流库，Promise/async风格）

// 需提前用 npm/yarn 安装 axios
import axios from "axios";axios.get("https://api.example.com/data").then(response => {document.getElementById("result").innerText = response.data.message;}).catch(error => {console.error("请求失败:", error);});

3. async/await（Promise的语法糖）

async function loadData() {try {const response = await fetch("https://api.example.com/data");if (!response.ok) throw new Error("网络错误");const data = await response.json();document.getElementById("result").innerText = data.message;} catch (error) {console.error("请求失败:", error);}
}loadData();