面向前端设计人员的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上对问题或答案进行upvote或downvote时，会触发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文档。其结构示例如下所示：

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

• XMLGrid.net。

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

JSON

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

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

• JSON生成器

• JSON编辑器在线

基于JSON编辑器在线工具，前面的示例如下所示：

AJAX请求的限制

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

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

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

其次，查看以下错误消息：

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

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

另一种选择是使用JSONP（JSON with Padding）技术。

结论

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

 苏州企业网站制作