前端ajax拼接前端代码_面向前端设计师的AJAX简介

前端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对象表示法）是另一种流行的数据交换格式。 使用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是什么，可能已经遇到过的地方以及一些潜在问题所在的位置有了一个很好的了解。 它还快速检查了最流行的数据交换格式。 在下一个教程中，我们将跳入一个工作示例。 到时候那里见！

如果您想进一步了解AJAX和Codepen，请务必查看以下资源：

翻译自: https://webdesign.tutsplus.com/tutorials/an-introduction-to-ajax-for-front-end-designers--cms-25099

前端ajax拼接前端代码