jQuery Ajax基础与 $.ajax()

概览

jQuery Ajax 是一套用于执行异步HTTP请求（Ajax）的强大工具集，其核心是 $.ajax() 方法。该方法作为所有便捷Ajax方法（如 $.get() 和 $.post()）的基础，提供了一个灵活且可配置的接口，用于与服务器交换数据并更新页面部分内容，而无需重新加载整个页面。本章节将深入解析 $.ajax() 的语法、核心配置项、回调函数以及如何处理不同的数据类型，旨在全面展现 jQuery交互 中这一关键技术的原理与应用。

$.ajax()：核心方法

$.ajax() 是 jQuery 中所有 Ajax 操作的基础。它执行一个异步的HTTP（Ajax）请求，通过一个单一的设置对象进行配置，提供了对请求细节的完全控制。

语法

jQuery.ajax( [settings ] )

settings：一个选项对象，用于配置 Ajax 请求。包含url、method、data、callback等关键属性。所有设置都是可选的，默认值在 jQuery.ajaxSetup() 中定义。

常用配置项

$.ajax() 方法接受一个包含大量键值对的对象，以定义请求的行为。以下列举了最常用的一些配置项。

配置项	类型	描述
`url`	String	发送请求的地址。
`method` / `type`	String	HTTP 请求方法 (例如: `"POST"`, `"GET"`, `"PUT"`, `"DELETE"`)。默认: `"GET"`。
`data`	PlainObject / String / Array	发送到服务器的数据。如果是对象，jQuery 会将其转换为查询字符串（除非 `processData` 设为 `false`）。
`dataType`	String	期望从服务器返回的数据类型。如果不指定，jQuery 会智能判断。常见值：`"xml"`, `"html"`, `"script"`, `"json"`, `"jsonp"`, `"text"`。
`contentType`	String	发送信息至服务器时内容编码类型。默认: `"application/x-www-form-urlencoded; charset=UTF-8"`。
`headers`	PlainObject	一个对象，包含要随请求一起发送的额外头键/值对。
`async`	Boolean	默认值 `true`。是否执行异步请求。同步请求已不推荐使用。
`cache`	Boolean	默认值 `true`，`dataType` 为 `'script'` 或 `'jsonp'` 时默认为 `false`。是否缓存请求结果。
`processData`	Boolean	默认值 `true`。默认情况下，传入的 `data` 选项如果是对象，会被转换为查询字符串。如果想发送其他类型（如 `FormData`、`Document`），需设为 `false`。
`crossDomain`	Boolean	默认值，同域请求为 `false`，跨域请求为 `true`。如果你想在同一域上强制执行跨域请求（如 JSONP），请设置为 `true`。
`xhr`	Function	用于创建 `XMLHttpRequest` 对象的回调。
`username`, `password`	String	用于响应 HTTP 访问认证请求的用户名和密码。

回调函数

$.ajax() 返回一个 jqXHR 对象，该对象实现了 Promise 接口，允许链式绑定回调函数。也可以在设置对象中直接定义回调。

回调方法 (Promise风格)	设置对象属性	描述
`.done()`	`success`	请求成功完成后调用。函数接收三个参数：返回的数据、状态描述字符串、jqXHR 对象。
`.fail()`	`error`	请求失败时调用。函数接收三个参数：jqXHR 对象、错误描述字符串、可选的异常对象（如果发生了错误）。
`.always()`	`complete`	请求完成后（无论成功或失败）调用。函数接收两个参数：jqXHR 对象、状态描述字符串。

示例：基础 GET 请求

以下示例展示了如何使用 $.ajax() 发起一个简单的 GET 请求，获取一段文本并显示在页面上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.ajax() 基础示例 - GET</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="loadData">加载数据</button>
    <div id="result" style="border:1px solid #ccc; padding:10px; margin-top:10px;"></div>

    <script>
        $('#loadData').on('click', function() {
            var $resultDiv = $('#result');
            $resultDiv.text('加载中...');

            $.ajax({
                url: 'https://api.github.com/repos/jquery/jquery/issues', // 示例API
                method: 'GET',
                dataType: 'json', // 期望返回JSON
                success: function(data) {
                    var firstIssue = data[0];
                    $resultDiv.html('首个Issue标题: <strong>' + firstIssue.title + '</strong>');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $resultDiv.text('请求失败: ' + textStatus);
                }
            });
        });
    </script>
</body>
</html>

在这个示例中，点击按钮后，$.ajax() 被调用，向 GitHub API 发起一个 GET 请求。请求成功后，success 回调被触发，将获取到的数据中的第一个 issue 标题显示在页面上。如果请求失败，error 回调会显示错误信息。这体现了 jQuery Ajax 在处理异步 jQuery交互 时的核心模式。

dataType 与数据处理

dataType 选项告知 jQuery 期望从服务器返回什么样的数据。jQuery 会尝试根据这个值来解析返回的数据。理解这一点对于正确处理服务器响应至关重要。

"json"：将响应解析为 JSON 对象。这是最常见的数据格式。如果解析失败，error 回调会被触发。
"html"：将响应解析为纯文本 HTML。通常用于直接插入到 DOM 元素中。
"xml"：将响应解析为 XML 文档，可以使用 jQuery 的遍历方法（如 .find()）进行处理。
"text"：将响应作为纯文本字符串返回，不进行任何解析。
"script"：将响应作为 JavaScript 执行，并将其视为纯文本返回。
"jsonp"：以 JSONP 形式发起请求，用于跨域请求。jQuery 会自动在 URL 中添加一个回调函数参数。

示例：处理 JSON 和 HTML 数据

以下示例展示了如何根据 dataType 分别处理来自不同 API 的 JSON 和 HTML 响应。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.ajax() dataType 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="getJson">获取用户 (JSON)</button>
    <button id="getHtml">获取片段 (HTML)</button>
    <div id="output" style="border:1px solid #aaa; padding:15px; margin-top:15px;"></div>

    <script>
        var $output = $('#output');

        $('#getJson').on('click', function() {
            $.ajax({
                url: 'https://jsonplaceholder.typicode.com/users/1',
                method: 'GET',
                dataType: 'json',
                success: function(user) {
                    var html = '<h3>' + user.name + '</h3>' +
                               '<p>邮箱: ' + user.email + '</p>' +
                               '<p>电话: ' + user.phone + '</p>';
                    $output.html(html);
                },
                error: function() {
                    $output.text('JSON 请求失败');
                }
            });
        });

        $('#getHtml').on('click', function() {
            // 假设服务器返回一段 HTML 片段，例如 <p><strong>Hello</strong> from server!</p>
            // 这里用一个模拟请求来演示，实际应用中应指向真实返回HTML的端点
            $.ajax({
                url: '/api/html-content', // 示例URL
                method: 'GET',
                dataType: 'html',
                success: function(htmlContent) {
                    $output.html(htmlContent); // 直接将HTML插入
                },
                error: function() {
                    $output.html('<p style="color:red;">HTML 片段加载失败</p>');
                }
            });
        });
    </script>
</body>
</html>

此示例清晰地表明，通过设定 dataType，jQuery 会自动处理响应内容。对于 JSON 数据，可以像操作普通 JavaScript 对象一样访问其属性；对于 HTML 数据，则可以将其直接插入 DOM。这种灵活性是 jQuery Ajax 简化 jQuery交互 开发的重要体现。

全局 Ajax 事件与默认设置

jQuery 提供了一组全局 Ajax 事件处理函数，可以在页面中的任何 Ajax 请求生命周期中触发，非常适合显示加载指示器或处理全局错误。同时，$.ajaxSetup() 可以用来为所有后续的 Ajax 请求设置默认值。

全局事件

全局事件可以在任何 Ajax 请求开始时、结束时、成功时等阶段被触发。它们需要绑定到特定的 DOM 元素上，通常是 document。

$(document).ajaxStart(handler)：当第一个 Ajax 请求开始时触发。
$(document).ajaxStop(handler)：当所有 Ajax 请求都完成时触发。
$(document).ajaxSend(handler)：在每个 Ajax 请求发送之前触发。
$(document).ajaxSuccess(handler)：在每个 Ajax 请求成功完成后触发。
$(document).ajaxError(handler)：在每个 Ajax 请求失败时触发。
$(document).ajaxComplete(handler)：在每个 Ajax 请求完成（无论成功或失败）时触发。

$.ajaxSetup()

此方法用于设置全局默认的 Ajax 选项。但需注意，其影响范围广，在大型项目中需谨慎使用，以避免意外地影响其他模块。

语法

jQuery.ajaxSetup( settings )

settings：一个对象，其属性定义了后续所有 $.ajax() 调用的默认选项。

示例：全局加载指示器与默认配置

以下示例展示了如何利用全局事件显示和隐藏一个全局的加载动画，并通过 $.ajaxSetup() 设置一个通用的基础 URL 和错误处理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全局 Ajax 事件与 $.ajaxSetup 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        #loading-indicator { display: none; position: fixed; top: 10px; right: 10px; background: #f0f0f0; padding: 5px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <div id="loading-indicator">加载中...</div>
    <button id="loadPost">加载文章 1</button>
    <button id="loadAnother">加载文章 2</button>
    <div id="post-container"></div>

    <script>
        // 设置全局默认值
        $.ajaxSetup({
            baseURL: 'https://jsonplaceholder.typicode.com/', // 注意：$.ajaxSetup 不支持 baseURL，这里仅作演示概念
            timeout: 5000,
            error: function(jqXHR, textStatus) {
                $('#post-container').html('<p style="color:red;">请求出错: ' + textStatus + '</p>');
            }
        });

        // 绑定全局事件
        $(document).ajaxStart(function() {
            $('#loading-indicator').show();
        }).ajaxStop(function() {
            $('#loading-indicator').hide();
        }).ajaxError(function(event, jqXHR, settings, errorThrown) {
            console.log('全局错误捕获: ' + errorThrown);
        });

        // 发送请求
        function loadPost(id) {
            $.ajax({
                url: 'https://jsonplaceholder.typicode.com/posts/' + id,
                dataType: 'json',
                success: function(post) {
                    $('#post-container').html('<h3>' + post.title + '</h3><p>' + post.body + '</p>');
                }
            });
        }

        $('#loadPost').on('click', function() { loadPost(1); });
        $('#loadAnother').on('click', function() { loadPost(2); });
    </script>
</body>
</html>

在这个综合示例中，当任何 $.ajax() 请求开始时，ajaxStart 事件触发，显示加载指示器；所有请求结束后，ajaxStop 触发，隐藏指示器。通过 $.ajaxSetup() 设置的默认 error 回调为所有请求提供了一个基础错误处理。这种全局管理方式极大地简化了 jQuery Ajax 在复杂页面中的状态管理和 jQuery交互 的一致性。

版本变更记录

版本	变更内容
1.0	引入 `jQuery.ajax()` 基础方法。
1.2	引入便捷方法 `jQuery.get()` 和 `jQuery.post()`。
1.4	增强对 JSONP 的支持，引入 `jQuery.getJSON()`。
1.5	重大重构：`jQuery.ajax()` 返回 `jqXHR` 对象，实现 Promise 接口，支持链式回调（`.done()`、`.fail()`、`.always()`）。
1.9	移除了 `jQuery.ajax()` 中已废弃的选项，如 `jsonp` 和 `scriptCharset` 的某些用法。
3.0	`jqXHR.success()`、`jqXHR.error()` 和 `jqXHR.complete()` 回调被正式弃用，推荐使用 Promise 风格的方法（`.done()` 等）。
4.0	增加对二进制数据（包括 `FormData`）的自动支持。移除 JSONP 自动提升逻辑（即将 JSON 请求自动转换为 JSONP）。默认情况下，脚本请求使用 `<script>` 标签以避免 CSP 错误，同时支持 Trusted Types。

浏览器兼容性

jQuery 的 Ajax 功能基于浏览器的 XMLHttpRequest (XHR) 对象，其兼容性覆盖了几乎所有现代及历史浏览器。以下为 jQuery 核心所支持的最低浏览器版本。

浏览器	最低支持版本
Chrome	30+
Edge	12+
Firefox	25+
Opera	18+
Safari	7+
Chrome Android	30+
Firefox for Android	25+
Opera Android	18+
Safari on iOS	7+
Samsung Internet	4.0+
WebView Android	4.4+
WebView on iOS	7+

注：对于 IE6-8，jQuery 1.x 系列提供了基于 ActiveXObject 的兼容支持，但现代开发中建议使用 polyfill 或升级用户浏览器。jQuery 4.x 已放弃对 IE 10 及更早版本的支持，但仍兼容 IE11。

$.ajax() 作为 jQuery Ajax 体系中的基石，提供了构建丰富且动态 jQuery交互 所需的全部控制力。从配置单个请求到管理全局事件，其设计兼顾了简洁与强大。通过结合 Promise 风格的异步处理和对多种数据类型的自动解析，它极大地简化了客户端与服务器之间的数据通信，使开发者能够专注于构建流畅、响应式的用户体验。

简介与入门

jQuery 选择器

DOM操作与遍历

HTML元素操作

动画与特效

事件处理

实用函数

回调、延迟与异步

jQuery Ajax

jQuery 插件

优化与实践

与现代前端开发

综合实战项目

参考手册

概览