基于jQuery的Ajax通用互动架构

基于jQuery的Ajax通用互动架构

摘要：本文根据对大量Ajax的应用实例的研究和总结提出了一种基于jQuery的Ajax通用互动架构。这种架构设计和实现了一个通用的Ajax标准的交互式模型。相比传统工艺，它可以有效地避免复杂的Ajax处理机制，加快了Ajax处理并减少了检索的工作。 引言

传统的网站和服务器的交互过程是同步的。用户通过点击超链接等方式提交请求。被请求的服务器则回送一个新的Web页浏览器来响应该请求。之后，即使只存在单个字符的改变，整个网页也将被刷新，显示。这将导致宽带的严重浪费并降低用户的体验。Ajax技术的出现将打破传统网站的交互模式并开启一个新时代[ l]。Ajax技术使用XMLHttpRequest与服务器进行异步沟通。然后通过JavaScript对文档对象模型的操作来动态刷新HTML页[2] 。

经过几年的发展，Ajax已经成为当下最流行和良好的技术。尽管Ajax拥有明显的优势，并在出现后席卷了整个行业，它仍然存在一些缺陷。对于普通的开发人员来讲其原理是复杂的，实现是相当困难的。每一个Ajax应用程序都需要设计一个前端、后端和数据处理组件。Ajax技术的大量应用，很容易造成严重代码冗余现象，并增加了始料未及的错误出现的概率。

在这种情况下，一种Ajax通用互动架构可以解决这个问题。本文根据对大量Ajax的应用实例的研究和总结提出了一种基于jQuery的Ajax通用互动架构（简称JAGA）。此架构定义了一个完整的Ajax通用交互的模式，在jQuery的Ajax API的基础上进行了进一步的打包并隐藏了交互执行的细节。 JAGA的使用可以有效地减少代码工作量，降低了Ajax实现的难度，使编码过程变得简单且层次化，并降低错误发生的概率。除此以外，由于设计合理， JAGA拥有不错的灵活性和扩展性。 相关技术背景 A. AJAX简介

Ajax不是一个缩写，它意味着异步JavaScript和XML [3]。严格地说，Ajax不是一种技术或新的编程语言，它是多种技术的有机结合。阿贾克斯提供与服务器异步通信的能力，以便从请求Iresponse的圈子中释放用户[ 4 ] 。在Ajax的帮助下，当用户单击超链接时， JavaScript和DHTML被用于刷新UI，它们被请求的服务器发送异步请求，并在同一时间更新和查询数据库。当请求的内容被发回， JavaScript和CSS可用于更新部分HTML页面，而不是刷新整个网页。更重要的是，用户甚至不知道浏览器与服务器进行了通信，就好像在使用本地应用一样，网站会立即响应。 B. jQuery的简介

jQuery是继prototype后又一种优秀的JavaScript框架，其宗旨是写得更少，做得更多[5] 。相较于其他的JavaScript框架jQuery更轻巧，灵活和易于使用。它的功能强大的选择器几乎无所不能。隐迭代使得编码成为一件令人愉快的事情。其中的Ajax包则使得每个API都非常有用[ 6 ] 。除此以外，由于它基于JavaScript， jQuery对浏览器、事件处理程序和文档都具有极好的兼容性。基于 上诉优势， jQuery的成为当前首选的前端开发工具。 III。 THE JAGA设计理念和原则 A. JAGA设计理念

在现代的网页设计中，Ajax应用设计是不断变化的。各种传统的应用使用Ajax技术来推动，如窗体身份验证，数据提交，表分页等。由于使用Ajax，局部刷新取代了以前对整个网页的刷新。作为一种通用的Ajax架构，JAGA能实现大多数Ajax应用。然而，Ajax的功能是迎合特定的需求，因此，Ajax应用通常是独特的，不具备一般特征和共同的特点。通过对大量Ajax的应用实例的研究和总结，我们发现，大多数Ajax应用程序可分为两个操作。他们分别是信息提示和局部刷新。 JAGA将Ajax打包成两个原始子操作。只要实现了这两个Ajax的原子操作，它们就可以合并在一起，形成更高级和复杂的Ajax应用。

B. JAGA设计原理

如图1所示，JAGA架构由前端页面逻辑，后台处理逻辑和通用互动核心组成。核心部分包括数据交互式分析模块和响应逻辑模块。前端页面调用打包好的JavaScript接口逻辑，提交申请资料到JAGA的数据交互分析模块。数据交互式分析模块处理系统中的数据并调用jQuery的AJAX API将数据发送到后台逻辑。处理之后，后台逻辑按标准交互数据结构JSON 将数据打包并发送回前端[7]。JAGA的交互式数据分析模块来分析这个JSON数据包并根据内容进行分布式操作。然后，响应逻辑模块被调用以改变页面内容或给予提示。该通用的Ajax交互过程完成。

图1.JAGA结构图

IV 。 THE JAGA设计与实现 A.阿贾克斯标准交互式数据结构

Ajax的标准交互数据结构（简称ASI ）用于JAGA和背景的逻辑之间的数据交互。ASI采用简单的JSON 数据格式，其设计如下： StatusCode：200 ， //后端响应

message：\个附加文本信息 jobCode：1， //操作码 response：“ ” //响应数据

“StatusCode ”是后端响应代码，用于确定服务器返回的状态。不同的操作根据状态划分执行。 “message”是附加的文本信息。“jobCode ”是该结构一个重要的组成部分表示操作的类型。JAGA的数据交互分析模块将根据jobCode的值将数据发送到相应的响应逻辑模块。“response”是后端响应的实际数据。

根据HTTP状态代码和常用做法， JAGA 设置三个最常用的StatusCode ：200 （成功） ， 400 （失败）和408 （超时） 。自定义扩展应优先遵循HTTP状态代码的标准定义。此外，自定义扩展将从100开始 ，以便为架构预留足够的扩展空间。 B.数据的交互分析模块

在JAGA数据交互分析模块，用于数据打包，数据发送和接收，数据解析和操作分析。其运行原理如图2 。包装，发送和接收子模块负责发送和接收的ASI。当接收到由后端发回的响应ASI后，它分发ASI到对应数据解析子模块。解析步骤如下：

第1步：调用JAGA协助API ，将后端发送回的数据转码成JSON格式。

第二步：判断ASI的StatusCode，如果存在StatusCode ，调用相应的处理逻辑，提示消息或做一些其他的操作。否则，响应数据将在被调用的区域加载的实际HTML页面。

步骤3 ：提取响应ASI的jobCode，传送到操作分配子模块做进一步的分析和处理。

图2.数据交互分析模块示意图 根据jobCode的值，操作分配子模块从JAGA的响应逻辑选择对应的响应函数然后调用函数来完成操作。该算法的NS流程图如图3所示。 图3.操作分布子模块NS流程图 C.响应逻辑模块 响应逻辑模块主要用于实现来自操作分布子模块的操作请求。为了确保该体系强大的功能，并提供好的扩展性，模块设计如下： 1）函数名与jobCode结合，彼此之间一一对应。 2）提供三种类型的功能：预操作，实际操作和后操作。按照这种设计，所述三种功能的名称对应的jobCode分别在jobCode FUNC之前，jobCode JUNC中和jobCode JUNC之后。较小的操作耦合，强大的灵活性和可扩展能力性能，都可以通过这种设计来实现和分层。 对于先前提出了两种AJAX原子操作：消息提示和本地内容的刷新，响应逻辑模块提供相应的功能来完成相应的操作。jobCode和操作之间的对应关系如表1所示。 表1.JOBCODE与操作的对于关系 jobCode 1 2 3 操作 消息提示 本地整体刷新 本地局部刷新 JOBCODE 为1时代表的操作是消息提示。返回值在一个JavaScript列表的数组中。其中的每个元素 是一对按“键：值”方式存放的信息。操作l_func解析响应，格式化数据，并将它显示出来。开发人员只需完成FUNC 1的预操作和后操作功能来实现自定义验证提示功能和格式。 JOBCODE 为2时代表的操作是本地整体刷新。返回一个按“键：值”方式存储的数组。键值对应jQuery选择字符串和值则对应html属性。FUNC 2搜索符合键值的jQuery对象，替换并加载HTML到内容区域完成本地的整体刷新。 JOBCODE 为3时代表的操作是本地局部刷新。不同于本地整体刷新，在许多应用中，只有整个区域（如格）的一部分需要被刷新。这些应用程序通常对实时性具有严格的要求。如果仍然使用本地整体刷新，则势必会造成带宽严重浪费，加剧服务器的负担。在这种情况下，JAGA提出了本地局部刷新方法。为此，区域的每一部分都具有一个独一无二的标志。如jobCodel一样，该操作返回一个JavaScript列表且其中的每个元素是一个“键：值”数据，其中键值对应所述部分区域的属性标记。3_ FUNC会根据键值访问对应区域，然后加载相应的值到该地区。

通过jobCode 1,2,3的有机结合， 可以轻松完成大部分的Ajax操作。对于特定需求，开发人员可以通过自定义jobCode和相应的处理方法来实现。 D.测试及结果

为了验证JAGA功能和性能，本文从一般AJAX实例中选择了最具代表性的一组AJAX应用，用一般的方式与使用JAGA进行了比较。结果如图4所示。对于相同的应用程序，使用JAGA可以大大减少代码量。对于一些特定的应用程序，你甚至不需要编写代码。为了实现这些应用程序，你唯一需要做的，就是填写下面的ASI协议。值得一提的是，代码量的减少意味着实现难度的降低。

图4.测试结果 五，结论

本文根据对大量Ajax的应用实例的研究和总结提出了一种基于jQuery的Ajax通用互动架构--JAGA。灵活使用JAGA可以大大减少Ajax应用程序的工作负载。此外 ，由于该架构的作用，原本复杂的工作会变得层次化和结构化。

本文来源：https://www.bwwdw.com/article/pxsf.html