介绍一下jQuery的AJAX异步请求

目录

[一、核心方法：.ajax()](#一、核心方法：.ajax())

二、简化方法（常用场景）

[1. .get()：快速发送 GET 请求（获取数据）](#1. .get()：快速发送 GET 请求（获取数据）)

[2. .post()：快速发送 POST 请求（提交数据）](#2. .post()：快速发送 POST 请求（提交数据）)

[3. .getJSON()：专门获取 JSON 数据](#3. .getJSON()：专门获取 JSON 数据)

三、关键概念解析

四、实战案例：加载并显示数据

五、注意事项

---

jQuery 的 AJAX（Asynchronous JavaScript and XML）是一套简化异步网络请求的 API，它封装了原生 JavaScript 的 XMLHttpRequest，让开发者能更轻松地实现页面与服务器的无刷新数据交互（比如加载数据、提交表单、获取动态内容等）。

相比原生 JS，jQuery 的 AJAX 语法更简洁，无需处理复杂的兼容性问题，是前端开发中与后端通信的常用工具。

一、核心方法：$.ajax()

$.ajax() 是 jQuery AJAX 的基础方法，支持几乎所有 AJAX 配置，语法如下：

javascript

$.ajax({
  url: "请求地址",        // 必需，后端接口地址（如 "/api/data" 或 "data.json"）
  type: "GET",           // 可选，请求方式（GET/POST/PUT/DELETE 等），默认 GET
  data: {                // 可选，发送到服务器的数据（对象形式）
    username: "张三",
    age: 20
  },
  dataType: "json",      // 可选，预期服务器返回的数据类型（json/text/html/xml等）
  timeout: 5000,         // 可选，请求超时时间（毫秒），超过则触发错误
  beforeSend: function(xhr) {
    // 可选，发送请求前执行（如添加请求头、显示加载动画）
    console.log("准备发送请求...");
  },
  success: function(response) {
    // 必需，请求成功时执行（response 是服务器返回的数据）
    console.log("请求成功：", response);
  },
  error: function(xhr, status, error) {
    // 可选，请求失败时执行（如网络错误、服务器错误）
    console.log("请求失败：", status, error);
  },
  complete: function(xhr, status) {
    // 可选，请求完成后执行（无论成功或失败，如隐藏加载动画）
    console.log("请求结束");
  }
});

二、简化方法（常用场景）

为了简化常见操作，jQuery 提供了几个快捷方法：

1. $.get()：快速发送 GET 请求（获取数据）

适用于从服务器获取数据（如加载列表、详情等），语法：

javascript

// 语法：$.get(请求地址, [发送的数据], 成功回调函数, [预期数据类型])
$.get("https://api.example.com/users", { page: 1 }, function(data) {
  // 成功获取数据后执行
  console.log("用户列表：", data);
}, "json"); // 预期返回 JSON 格式

2. $.post()：快速发送 POST 请求（提交数据）

适用于向服务器提交数据（如表单提交、注册信息等），语法：

javascript

// 语法：$.post(请求地址, [发送的数据], 成功回调函数, [预期数据类型])
$.post("/api/register", {
  username: "小明",
  password: "123456"
}, function(response) {
  console.log("注册结果：", response);
}, "json");

3. $.getJSON()：专门获取 JSON 数据

简化版的 $.get()，自动指定 dataType: "json"，适合加载 JSON 格式数据：

javascript

// 加载本地 JSON 文件（模拟后端数据）
$.getJSON("data/users.json", function(users) {
  // 直接使用 JSON 数据（无需解析）
  users.forEach(user => {
    console.log(user.name);
  });
});

三、关键概念解析

1. "异步" 的含义

   发送请求后，页面不会卡住等待服务器响应，而是继续执行其他代码，直到服务器返回数据后，再通过 success 回调处理结果。这避免了页面刷新或卡顿，提升用户体验。

2. 数据传递格式

   • 发送数据：data 参数支持对象（自动转为 key=value 格式）或字符串（如 "name=张三&age=20"）。
   • 接收数据：常用 JSON 格式（轻量、易解析），dataType: "json" 会自动将返回的字符串转为 JS 对象。

3. 跨域问题

   默认情况下，AJAX 只能请求同域名下的接口（浏览器安全限制）。若需请求其他域名，需后端配置 CORS（跨域资源共享） 允许跨域，否则会触发错误。

四、实战案例：加载并显示数据

假设后端提供一个获取文章列表的接口 "/api/articles"，返回 JSON 数据：

json

{
  "success": true,
  "data": [
    { "id": 1, "title": "jQuery 入门" },
    { "id": 2, "title": "AJAX 详解" }
  ]
}

用 jQuery 加载并显示到页面：

html

预览

<ul id="articleList"></ul>
<button id="loadBtn">加载文章</button>

<script>
  $("#loadBtn").click(function() {
    // 点击按钮后发送请求
    $.get("/api/articles", function(res) {
      if (res.success) {
        // 清空列表
        $("#articleList").empty();
        // 遍历数据，添加到页面
        res.data.forEach(article => {
          $("#articleList").append(`<li>${article.title}</li>`);
        });
      } else {
        alert("加载失败");
      }
    }).error(function() {
      alert("网络错误，请重试");
    });
  });
</script>

五、注意事项

• 避免滥用同步请求 ：$.ajax() 中设置 async: false 可开启同步请求，但会阻塞页面，影响体验，不推荐使用。
• 处理加载状态 ：在 beforeSend 中显示 "加载中" 提示，complete 中隐藏，提升用户体验。
• 数据验证 ：服务器返回的数据需先验证（如 res.success），再进行后续处理，避免报错。

通过 jQuery AJAX，你可以轻松实现动态加载内容、表单无刷新提交等功能，是构建现代交互式网页的核心技术之一。