AJAX 简介

什么是 AJAX？

AJAX 代表 异步 JavaScript 和 XML。AJAX 通过 HTTP 的 GET 和 POST 请求与服务器进行后台通信。AJAX 允许我们在不刷新页面的情况下从服务器加载数据。它是开发交互式网站的关键组件，几乎每个现代网站都使用了 AJAX 框架。

传统模型与 AJAX 模型的对比

在传统网页模型中，HTTP 请求的工作流程如下：

在基于 AJAX 的网页模型中，HTTP 请求的工作流程如下：

上述图示展示了传统网页模型与基于 AJAX 的网页模型之间的区别：

• 在 传统网页模型 中：

  • 浏览器向服务器发送一个阻塞式的 HTTP 请求，并等待服务器响应。
  • 服务器返回一个包含完整 HTML 和 CSS 内容的全新网页。
  • 浏览器加载整个新网页。

• 在 基于 AJAX 的网页模型 中：

  • 浏览器调用 jQuery 中相应的 AJAX 方法。
  • 该方法在后台发送一个非阻塞式的 HTTP 请求到服务器。
  • 服务器返回的不是整个网页，而是网页所需的部分新内容，格式为 JSON、XML 或纯文本。
  • jQuery 的 AJAX 方法在回调函数中接收这些数据，并相应地更新网页的 HTML 或 CSS 内容，而无需重新加载整个页面。

使用 jQuery 中 AJAX 的优势

使用 AJAX（尤其是 jQuery 中的 AJAX）的主要优势包括：

• 避免页面刷新 —— 如上所述，AJAX 请求可以动态更新网页内容，无需刷新页面。
• 跨浏览器兼容性 —— 不同浏览器在发起 AJAX 请求时语法可能不同。jQuery 提供统一的接口，解决了这一问题。
• jQuery 提供的 AJAX 方法 —— jQuery 提供了多种 AJAX 方法，如 GET、POST 等。这些简洁的方法简化了底层 AJAX 请求的复杂性。

jQuery 中的 AJAX 方法

jQuery 中最常用的两种 AJAX 方法是：

• GET 方法
• POST 方法

GET 和 POST 方法常被混淆。有人误以为 GET 仅用于获取数据，而 POST 仅用于上传数据。实际上并非如此。这两种方法都可以用于获取和上传数据。它们的区别在于数据传输方式：

• 在 GET 方法 中，信息通过请求的 URL 发送到服务器。
• 而在 POST 方法 中，信息通过请求的 消息体 单独发送到服务器，而不是包含在 URL 中。