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

一、什么是 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（经典写法）

javascript 复制代码

// 创建一个 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();

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

javascript 复制代码

$.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 风格）

fetch API（原生 Promise）

javascript 复制代码

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);
  });

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

javascript 复制代码

// 需提前用 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);
  });

async/await（Promise的语法糖）

javascript 复制代码

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();

六、Ajax 返回的数据格式

JSON（最常用） ：{"msg": "success"}
XML：早期流行，现在已较少用
HTML：直接插入到 DOM
纯文本：如普通字符串

七、Ajax 的优点与注意点

优点：

提升用户体验（局部刷新、无需等待页面重载）
减少服务器压力与网络流量
支持实时应用（聊天、股票、物流等）

注意点：

跨域请求限制（可用CORS、JSONP等方式解决）
异步处理（要理解回调、Promise）
前后端接口需约定好数据格式

八、总结

Ajax 是前端和服务器之间"无刷新"通信的基础。经典用 XMLHttpRequest，现在更推荐 fetch/axios 等 Promise 风格。

九、演示小结

经典写法（XMLHttpRequest）：入门理解 Ajax 原理
现代写法（fetch/axios）：实际开发必用，更优雅、易扩展