jQuery-based Ajax General Interactive Architecture

Jingjing Li

Research Institute Of Electronic Science And Technology Of UESTC

Chengdu, Sichuan Province, China

xiaosuiba@163.com

Chunlin Peng

Research Institute Of Electronic Science And Technology Of UESTC

Chengdu, Sichuan Province, China

peng_chunlin@163.com

Abstract—This paper proposes a jQuery-based Ajax general interactive architecture under the research and summary of lots of Ajax application examples. This architecture designs and implements a general Ajax standard interactive model which comparing to traditional process, can effectively conceal the complex Ajax handling mechanism, swiftly realize the Ajax process and reduce the work of exploration.

Keywords- jQuery; Ajax; web; general architecture; front-end

1. INTRODUCTION

The interactive process of traditional web sites and server is synchronous. Users submit request by clicking hyperlink, etc. The Server responses to the request by sending back a new web page to the browser. The whole web page will be refreshed and displayed, even there is a change of only a single character, which leads to serious waste of broadband and lower the experience of users. Appearance of Ajax technology breaks interactive mode of traditional web sites and open a new era[1]. Ajax technology employs XMLHttpRequest to communicate with server asynchronously. JavaScript will then operate the document object model to dynamically refreshes the html page[2].

After several yearss development, Ajax has already become the most popular and well used technology. Although Ajax owns obviously advantages and overwhelms the whole industry after its appearance, it still has several defect. Its principle is complicated and realization is quite difficult for ordinary developers. Every specified Ajax application needs design of front-end , back-end and data processing component. Massive applications of Ajax easily leads to serious redundancy of code, and increases the chance of unexpected mistakes.

In this circumstance, a general Ajax interactive architecture can solve this problem. This paper proposes a jQuery-based Ajax general interactive architecture(jAGA for short) under the research and summary of lots of Ajax operating examples. This architecture defines a whole general Ajax interactive model, further packages on the basis of jQuery Ajax API and conceals the details of interactive implementation. The utility of jAGA can effectively reduce the work of code, cut down the difficulties of Ajax realization, make the coding process simple and hierarchical and decrease the chance of mistake. Whats more, due to its reasonable design, jAGA owns nice flexibility and scalable performance.

978-1-4673-2008-5/12/$31.00 copy;2012 IEEE

1. RELATED TECHNICAL BACKGROUND
2. Ajax Introduction

Ajax , which means Asynchronous JavaScript and XML, is not a abbreviation[3]. Strictly speaking, Ajax is not a technology or new programming language, its an organic combination of several technology. Ajax provides ability of communicating with server asynchronously, so as to free the users from the circles of request /response[4]. With the help of Ajax, when users click the hyperlink, JavaScript and DHTML are used to refresh the UI, sending asynchronous request to the server, updating and inquiring the database at the same time. When the request is sending back, JavaScript and CSS can be used to update partial html page rather than refresh the whole web page. More importantly, the users do not even known the browser is communicating with the server, just like the local application, web sites response immediately.

1. jQuery Introduction

jQuery is an excellent JavaScript framework after prototype, whose purpose is WRITE LESS, DO MORE[5]. Comparing to other JavaScript framework, jQuery is more lightweight, flexible and easy using. Its powerful selector is almost omnipotent. Implicit iteration makes the coding grateful. The package of Ajax is just right causing every API very useful[6]. Whats more, as base of JavaScript, jQuery is excellent at browser compatibility, event handler and document. Based on the previously advantages, jQuery becomes the first choice of front-end developers.

1. THE JAGA DESIGN IDEA AND PRINCIPLE
2. jAGA Design Idea

In the design of modern web page, the application of Ajax is ever-changing. Various traditional applications change to use Ajax technology to drive such as forms authentication, forum post, table paging and so on. Due to the use of Ajax, partly refreshing replace the original operation of refreshing the whole web page. As a general Ajax architecture, jAGA ought to realize most Ajax applications. However,the functions of Ajax are cater to specified requirement, so Ajax applications are usually unique and dont have the general characteristics and common features. Under the analysis and summary of lots of Ajax application, we can find that most Ajax applications can be divide into two operations. They are message prompt

and partial refresh. jAGA packages and changes the Ajax operation to two original sub-operation . As long as these two Ajax original sub-operation be realized, they can combined together to form more advanced and complicated Ajax applications.

1. jAGA Design Principle

jAGA architecture consists of front page logic, the backstage processing logic and general interactive core as shown in Fig. 1. The core part includes data interactive analysis module and the response logic module. The front page calls the packaged JavaScript interface logic, submitting the request

剩余内容已隐藏，支付完成后下载完整资料

基于JQuery的Ajax通用交互体系结构

摘要：本文提出了一种基于JQuery的Ajax通用交互体系结构，并对大量的Ajax应用实例进行了研究和总结。该架构设计并实现了一个与传统过程相比的通用Ajax标准交互模型，能够有效隐藏复杂的AJAX处理机制，快速实现Ajax过程，减少探索工作。

关键字：

一、引言

传统网站和服务器的交互过程是同步的。用户通过点击超链接提交请求等。服务器通过向浏览器发送一个新网页来响应请求。整个网页将被刷新和显示，即使只有一个字符的变化，这导致严重浪费宽带和降低用户的体验。AJAX技术的出现打破了传统网站的互动模式，开启了一个新的时代。Ajax技术采用XMLHTTPREQUEST与服务器异步通信。然后，JavaScript将运行文档对象模型来动态刷新HTML页面。

经过几年的发展，AJAX已经成为最流行、应用最广泛的技术。虽然AJAX在外观上具有明显的优势，并在整个行业中占有一席之地，但仍存在一些缺陷。它的原理是复杂的，对普通开发人员来说很难实现。每一个指定的Ajax应用都需要前端、后端和数据处理组件的设计。AJAX的大量应用容易导致代码的严重冗余，并增加意外错误的机会。

在这种情况下，一个通用的AJAX交互体系结构可以解决这个问题。本文在大量Ajax操作实例的研究和总结的基础上，提出了一种基于JQuery的Ajax通用交互体系结构（JGAA）。该体系结构定义了一个完整的Ajax交互模型，在JQuery Ajax API的基础上进一步封装，并隐藏了交互实现的细节。JGAA的实用性可以有效地减少代码的工作量，减少Ajax实现的困难，使编码过程简单、层次化，减少出错的机会。此外，由于其合理的设计，JGAA具有良好的灵活性和可扩展性。

1. 相关技术背景

1.Ajax简介

Ajax，这意味着Asynchronous JavaScript和XML，不是一个缩写。严格来说，Ajax不是一种技术或新的编程语言，它是多种技术的有机结合。AJAX提供了与服务器异步通信的能力，从而将用户从请求/响应圈中解放出来。在Ajax的帮助下，当用户单击超链接时，使用JavaScript和DHTML刷新UI，同时向服务器发送异步请求，同时更新和查询数据库。当请求返回时，可以使用JavaScript和CSS来更新部分HTML页面，而不是刷新整个网页。更重要的是，用户甚至不知道浏览器正在与服务器通信，就像本地应用程序一样，网站立即响应。

2.jQuery 简介

JQuery是一个优秀的JavaScript框架，在原型之后，其目的是写少，做更多。与其他JavaScript框架相比，jQuery更轻量级、灵活和易于使用。它强大的选择器几乎无所不能。隐式迭代使代码增值。Ajax的包是正确的，导致每个API非常有用]。此外，JQuery作为JavaScript的基础，在浏览器兼容性、事件处理程序和文档方面都很优秀。基于以前的优势，JQuery成为前端开发人员的首选。

三、JAGA 的设计思想和原则

1.jAGA 设计理念

在现代Web页面的设计中，Ajax的应用是不断变化的。各种传统应用程序采用AJAX技术进行驱动，如表单认证、论坛帖子、表格分页等。由于使用AJAX，部分刷新，取代了原有的刷新整个网页的操作。作为一个通用的Ajax架构，JAGA应该实现大多数Ajax应用程序。然而，Ajax的功能满足特定的需求，因此Ajax应用程序通常是唯一的，没有一般的特性和共同的特性。在大量的Ajax应用分析和总结的基础上，我们发现大多数Ajax应用程序可以分为两个操作。它们是消息提示和部分刷新。JAGA包，并将AJAX操作更改为两个原始子操作。只要实现这两个AJAX原始子操作，它们就可以组合在一起，形成更先进和复杂的AJAX应用程序。

2.jAGA 设计原则

JAGA体系结构由前页逻辑、后台处理逻辑和一般交互核心组成，如图1所示。核心部分包括数据交互分析模块和响应逻辑模块。首页调用打包的JavaScript接口逻辑，将请求数据提交给JAGA的数据交互分析模块。数据交互分析模块对数据进行系统处理，调用JQuery Ajax API将数据发送到后台逻辑。在该过程之后，后台逻辑填充包标准交互数据结构JSON，并发送回前端JAGA数据交互分析模块，以分析该JSON并根据内容执行分布式操作。然后，响应逻辑模块被调用来改变首页内容或给出提示。标准AJAX交互过程已完成。根据HTTP状态代码和通常的实践，JGAA PRSET3最常用的状态代码：200（成功）、400（失败）和408（超时）。自定义扩展应优先遵循HTTP状态代码的标准定义。此外，定制扩展将从100开始，以便留出足够的扩展空间用于建筑。

B. 数据交互分析模块

JAGA中的数据交互分析模块用于数据打包、数据发送和接收、数据解析和操作分配。其运行示意图如图2所示。封装、发送和接收子模块负责发送和接收ASI。当接收到后端发送的响应ASI时，将ASI分发到数据解析子模块。回收步骤如下：

步骤1：调用JAGA辅助API，将后端发送的数据转换为JSON格式。

步骤2：判断ASI的状态码，如果存在状态码，则调用相应的处理逻辑来提示消息或进行其他操作。否则，响应数据是将被加载在调用方的内容区域中的实际页面HTML。

步骤3：提取ASI的作业代码和响应，传输到操作分发子模块进行进一步的分发。

Figure 1. jAGA principle diagram

四、JAGA的设计与实现

1. Ajax 标准交互式数据结构

AJAX标准交互数据结构（称为ASI）用于JGAA与后台逻辑之间的逻辑结构化数据交互。ASI采用简单的JSON数据格式，其设计如下：

statusCode : 200,//back-end response

message : 'well done',// additional text information jobCode : 1,//operation code

response : ''//response data

“statusCode”是用于确定服务器返回状态的后端响应代码。根据状态进行不同的操作。“message”是附加的文本信息；“jobCode”是指示操作类型的结构的一个重要部分。JGAA的数据交互分析模块将根据作业代码将操作分配给相应的响应逻辑模块；“response”是后端响应的实际数据。

操作分配子模块根据jobCode从JGAA的响应逻辑模块中搜索相应的响应函数，然后调用该函数来分发操作。图3所示的算法NS流程图。

Figure 3. Operating distribution submodule NS flowchart

3.响应逻辑模块

响应逻辑模块用于实现来自操作分发子模块的操作分发请求。为了保证体系结构的强大功能，并提供良好的可扩展性能，模块设计如下：

• 1. 函数名称与作业代码相关联，彼此对应。
  2. 提供三种功能：预操作、实际操作和后期操作

在这个设计之后，对应于作业代码的三个函数的名称是：BooWorkJooCodoFunc、JooCoodoFunc和SuxJooCudioFunc。通过这种设计和分层，可以实现更小的操作耦合，强大的灵活性和可扩展性能的能力。

对应于先前提出的两个AJAX原子操作：消息提示和本地内容刷新，响应逻辑模块提供相应的功能来完成相应的操作。作业代码与操作之间的对应关系如表I所示。

TABLE I. JOBCODE OPERATIONS

JobCode 1 将操作标记为消息提示。响应是JavaScript列表的形式。响应的每一个元素都是一对“密钥：值”数据。操作1FUNC解析响应，格式化数据并显示它。开发人员只需要完成预先的1FUNC和后缀1FUNC函数来实现自定义的验证提示功能和样式。

JobCode 2 标记本地局部刷新操作。反应是“关键：价值”的形式。密钥是jQuery选择器字符串，值是HTML。2_FUNC搜索对应于JKQuery对象的密钥，将HTML替换并加载到内容区域中，完成局部整体刷新。

JobCode 3 将操作标记为本地部件刷新。与局部整体刷新不同，在许多应用中，只需要更新整个区域的一部分（如DIV）。这些应用通常对实时性能有严格的要求。如果仍然使用本地的整体刷新，必然会造成带宽的严重浪费，加重服务器的负担。在这种情况下，JAGA提出了局部部件刷新方法。因此，该地区的每一部分都具有特殊的性质。与JooCoDe1一样，响应是JavaScript列表，响应的每个元素都是一个“KEY:VALUE”数据，其中键对应于部分区域的属性标记。3Y-FUNC将通过密钥查询部分区域，然后将相应的值加载到区域。

使用作业代码1,2,3的有机结合，可以轻松完成大部分Ajax操作。对于特定的需求，开发人员可以通过定制作业代码和相应的处理方法来实现它们。

4.试验和结果

为了验证JGAA的功能和性能，本文从一个常见的Ajax场景中选择了一组最具代表性的Ajax应用程序，比较了常用的JAGA实现方式。结果显示在图4中。完成相同的应用程序，使用JAGA可以大大减少代码量。对于某些特定的应用程序，甚至不需要编写一行代码。只有你需要做的是实现它是填写ASI后的协议。此外，代码的减少意味着实现难度的降低。

amp;RPPRQ M$*$

60

40

FRGH(OLQH)

sup2;0 0

)RUPV

$XWKHQWL FDWLRQ

)RUPV 6XEPLW

$MD[ SDJLQDWL RQ

GLY GQDPLF ORDGLQJ

Figure 4. Test results

1. 总结

在大量Ajax应用实例的研究和总结的基础上，本文提出了一种基于JQuery的Ajax通用交互体系结构JGAA。灵活使用JGAA可以大大减少AJAX应用程序的工作量。此外，由于该方法的实用性，原本复杂的工作变得层次化和结构化。

剩余内容已隐藏，支付完成后下载完整资料

资料编号：[23388]，资料为PDF文档或Word文档，PDF文档可免费转换为Word