概览

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() 方法接受一个包含大量键值对的对象，以定义请求的行为。以下列举了最常用的一些配置项。

回调函数

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

示例：基础 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交互 的一致性。

版本变更记录

浏览器兼容性

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

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

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