面向前端设计师的AJAX简介

本教程系列旨在让前端设计人员和新手开发人员熟悉ajax，这是一项必不可少的前端技术。

在第一个教程中，我们将介绍 AJAX 的基础知识。我们将开始探索与它相关的不同事物，准确了解它是什么、它是如何工作的，以及它的局限性在哪里。让我们开始！

注意：本系列假设您熟悉核心前端技术，例如 html 和 css。

什么是 AJAX？

AJAX 代表“异步 javascript 和 XML”。它不是单一的，也不是新技术。事实上，它是一组现有技术（即HTML、CSS、JavaScript、XML等）共同构建现代 Web 应用程序。

使用 AJAX，客户端（即浏览器）与 Web 服务器通信并请求数据。然后，它处理服务器的响应并对页面进行更改而不完全重新加载它。

让我们分解一下 AJAX 的首字母缩略词：

• “异步”意味着当客户端从 Web 服务器请求数据时，它不会冻结，直到服务器回复。相反，用户仍然可以浏览页面。一旦服务器返回响应，相关函数就会在后台处理返回的数据。

• “javaScript”是实例化 AJAX 请求、解析相应的 AJAX 响应并最终更新dom的语言。

• 客户端使用XMLHttpRequest或 XHR api向服务器发出请求。将API（应用程序编程接口）视为一组方法，这些方法指定了两个相关方之间的通信规则。但是请注意，来自 AJAX 请求的传入数据可以是任何格式，而不仅仅是XML格式。

AJAX 是如何工作的

要初步了解 AJAX 的工作原理，请查看以下可视化：

这个可视化描述了一个典型的 AJAX 驱动场景：

• 用户想要查看更多文章，因此他或她单击目标按钮。此事件触发 AJAX 调用。

• 一个请求被发送到服务器。与请求一起，可以传递不同的数据。该请求可以指向example.json存储在服务器上的静态文件（例如）。或者，可以执行动态脚本（例如），此时脚本与数据库（或其他系统）对话以检索数据。functions.php

• 数据库将请求的文章发送回服务器。接下来，服务器将它们发送到浏览器。

• JavaScript 解析响应并更新 DOM 的特定部分（页面结构）。例如，这里仅更新侧边栏。页面的其他部分不会改变。

考虑到这一点，您就可以理解为什么 AJAX 是现代 Web 的一个重要概念。通过开发基于 AJAX 的应用程序，我们能够控制从服务器下载的数据量。

AJAX 实例

AJAX 无处不在。为了证明这一点，让我们简要介绍几个利用它的流行网站。

首先，考虑Facebook和Twitter的工作方式。当您向下滚动时，由于 AJAX，新内容会出现。其次，当您对Stack Overflow上的问题或答案投赞成票或反对票时，会触发 AJAX 调用。最后，只要您在Google或Youtube上搜索内容，就会执行多个 AJAX 请求。

此外，如果我们愿意，我们可以监控请求。例如，在 chrome 的控制台上，我们通过右键单击并选中该Log XMLHttpRequests选项来执行此操作。

发出请求

如上所述，要设置 AJAX 请求，我们使用 XMLHttpRequest API。此外，最流行的 JavaScript 库jquery提供了几个与 Ajax 相关的函数和方法。

在本系列中，我们将介绍使用纯 JavaScript 和 jQuery 向服务器发送请求的不同示例。

操纵响应

当我们从 Web 服务器检索数据时，这些数据可以是不同的格式。XML、JSON、JSONP、纯文本和 HTML 是可能的数据格式。

XML

XML（可扩展标记语言）是在应用程序之间交换数据的最流行的格式之一。与 HTML 类似，XML 使用标签来定义其结构。但是请注意，XML 没有附带任何预定义的标签，实际上，我们通过指定自己的标签来设置 XML 文档。其结构示例如下所示：

      Mike
      Mathew
      Australian
      English
      Spanish
      French
      Russian

有许多在线编辑器可用于构建 XML 文档。我最喜欢的编辑器是：

• XMLGrid.net。

基于此编辑器，我们的示例将可视化如下：

JSON

JSON（JavaScript Object Notation）是另一种流行的数据交换格式。使用 JSON，上述 XML 结构将如下所示：

      {
        "name"        : "Mike",
        "surname"     : "Mathew",
        "nationality" : "Australian",
        "languages"	  :	["English", "Spanish", "French", "Russian"]
      }

同样，您可以在网络上找到许多在线 JSON 编辑器。以下是我喜欢使用的编辑器：

• JSON 生成器

• JSON 在线编辑器

基于 JSON Editor Online 工具，前面的示例如下所示：

AJAX 请求的限制

在我们开始实际使用 AJAX 之前，了解它的局限性很重要。具体来说，我们将提到两个常见问题。

首先，考虑 Chrome 控制台中出现的以下错误：

当我们的请求指向本地文件时会发生此错误。在这里，我们尝试访问存储在本地文件（即Demo.json）而不是服务器中的数据。为了克服这个问题，我们可以安装一个本地服务器（例如将XAMPP设置为本地开发环境）并将目标文件存储在其中。

二、看下面的报错信息：

当我们请求位于与我们的页面相关的另一个域的数据时，就会发生这种情况（称为同源策略限制）。例如，这里的数据存储在本地服务器上，而页面存储在 Codepen 的服务器上。不过幸运的是，有解决此限制的方法。

一种解决方案是利用W3C提出的CORS（跨域资源共享）机制。请注意，这种机制需要我们对服务器的配置文件进行一些更改。例如，此页面描述了我们如何自定义Apache Web 服务器。

另一种选择是使用 JSONP（带填充的 JSON）技术。

结论

本概述应该使您对 AJAX 是什么、您可能已经遇到过它以及一些潜在问题所在的位置有了一个很好的了解。它还快速检查了最流行的数据交换格式。在下一个教程中，我们将进入一个工作示例。到时候那里见！