jQuery AJAX 简介

jQuery - AJAX 简介

AJAX 允许网页在后台与服务器通信，从而无需完全重新加载整个页面即可更新页面的部分内容。这带来了更流畅、更快速、更具交互性的用户体验。

想象一下，更新购物车或检查用户名是否可用，而不会中断用户当前正在浏览的内容——这就是 AJAX 的作用。

什么是 AJAX？

AJAX 代表 异步 (Asynchronous) JavaScript 和 XML。

关键概念：

• 异步 (Asynchronous)： 操作（例如从服务器获取数据）在后台进行，不会冻结用户界面。
• JavaScript： 用于发起请求和处理响应的核心语言。
• XML（历史）： 尽管 XML 是最初的数据格式，但 JSON (JavaScript Object Notation - JavaScript 对象表示法) 现在是更为常见的数据交换格式，因为它更简单，并且可以直接映射到 JavaScript 对象。
• 无需整页刷新： 只有页面的相关部分会用获取到的数据进行更新。

现代 Web 应用程序大量依赖 AJAX 来实现各种功能，例如实时搜索结果、无限滚动、实时通知以及不刷新页面提交表单（例如 Gmail、Google Maps、Twitter/X、Facebook）。

您可以在专门的 AJAX 教程中了解更多关于底层浏览器技术（如 XMLHttpRequest 和现代 Fetch API）的信息。

jQuery 在 AJAX 中的作用

虽然现代浏览器提供了原生的 Fetch API 来进行 AJAX 请求，但 jQuery 提供了一组方便而强大的包装方法，可以简化这个过程。

使用 jQuery 进行 AJAX 的优势：

• 简化的语法： jQuery 提供了简写方法（$.get、$.post）和一个功能全面的 $.ajax 方法，拥有清晰的选项结构。
• 跨浏览器一致性： 历史上，jQuery 弥合了不同浏览器在实现底层 XMLHttpRequest 对象时的不一致性。虽然现代标准使其不再那么关键，但它仍然确保了广泛的兼容性。
• Promise 接口： jQuery 的 AJAX 方法返回 Promise 类似的对象（jqXHR），允许使用 .done()、.fail() 和 .always() 等方法更清晰地处理异步操作的成功和失败状态。
• 辅助函数： 简化处理不同数据类型（JSON、HTML、文本、XML）和发送数据等任务。

| | jQuery 对比原生 Fetch： 尽管 jQuery 简化了 AJAX，但原生的 Fetch API 是内置于浏览器的现代标准。 Fetch 原生使用 Promise，并提供更大的灵活性，特别是对于处理 Service Workers 等高级用例。对于不使用 jQuery 的新项目，Fetch 通常是首选。但是，如果您的项目已经使用了 jQuery，其 AJAX 方法仍然是非常实用且高效的选择。 | | --- | --- |

使用 jQuery，您可以轻松地使用 HTTP GET 或 POST 请求从服务器请求数据（如文本、HTML、JSON），并将响应无缝集成到您的网页中。

常用的 jQuery AJAX 方法

以下章节将介绍几个关键的 jQuery AJAX 方法，包括：

• load(): 从服务器加载 HTML 并将其放入选定的元素中（简单但不够灵活）。
• $.get(): 执行异步 HTTP GET 请求。
• $.post(): 执行异步 HTTP POST 请求。
• $.getJSON(): 专门用于获取 JSON 数据的 GET 请求。
• $.ajax(): 核心方法，为任何 AJAX 请求提供最大的灵活性和配置选项。