基于jquery的ajax聊天室系统,基于jQuery的Ajax通用互动架构

《基于jQuery的Ajax通用互动架构》由会员分享，可在线阅读，更多相关《基于jQuery的Ajax通用互动架构(4页珍藏版)》请在人人文库网上搜索。

1、基于jQuery的Ajax通用互动架构摘要：本文根据对大量Ajax的应用实例的研究和总结提出了一种基于jQuery的Ajax通用互动架构。这种架构设计和实现了一个通用的Ajax标准的交互式模型。相比传统工艺，它可以有效地避免复杂的Ajax处理机制，加快了Ajax处理并减少了检索的工作。引言传统的网站和服务器的交互过程是同步的。用户通过点击超链接等方式提交请求。被请求的服务器则回送一个新的Web页浏览器来响应该请求。之后，即使只存在单个字符的改变，整个网页也将被刷新，显示。这将导致宽带的严重浪费并降低用户的体验。Ajax技术的出现将打破传统网站的交互模式并开启一个新时代 l。Ajax技术使用XM。

2、LHttpRequest与服务器进行异步沟通。然后通过JavaScript对文档对象模型的操作来动态刷新HTML页2 。经过几年的发展，Ajax已经成为当下最流行和良好的技术。尽管Ajax拥有明显的优势，并在出现后席卷了整个行业，它仍然存在一些缺陷。对于普通的开发人员来讲其原理是复杂的，实现是相当困难的。每一个Ajax应用程序都需要设计一个前端、后端和数据处理组件。Ajax技术的大量应用，很容易造成严重代码冗余现象，并增加了始料未及的错误出现的概率。在这种情况下，一种Ajax通用互动架构可以解决这个问题。本文根据对大量Ajax的应用实例的研究和总结提出了一种基于jQuery的Ajax通用互动架。

3、构(简称JAGA)。此架构定义了一个完整的Ajax通用交互的模式，在jQuery的Ajax API的基础上进行了进一步的打包并隐藏了交互执行的细节。 JAGA的使用可以有效地减少代码工作量，降低了Ajax实现的难度，使编码过程变得简单且层次化，并降低错误发生的概率。除此以外，由于设计合理， JAGA拥有不错的灵活性和扩展性。相关技术背景A. AJAX简介Ajax不是一个缩写，它意味着异步JavaScript和XML 3。严格地说，Ajax不是一种技术或新的编程语言，它是多种技术的有机结合。阿贾克斯提供与服务器异步通信的能力，以便从请求Iresponse的圈子中释放用户 4 。在Ajax的帮助下。

4、，当用户单击超链接时， JavaScript和DHTML被用于刷新UI，它们被请求的服务器发送异步请求，并在同一时间更新和查询数据库。当请求的内容被发回， JavaScript和CSS可用于更新部分HTML页面，而不是刷新整个网页。更重要的是，用户甚至不知道浏览器与服务器进行了通信，就好像在使用本地应用一样，网站会立即响应。B. jQuery的简介jQuery是继prototype后又一种优秀的JavaScript框架，其宗旨是写得更少，做得更多5 。相较于其他的JavaScript框架jQuery更轻巧，灵活和易于使用。它的功能强大的选择器几乎无所不能。隐迭代使得编码成为一件令人愉快的事情。。

5、其中的Ajax包则使得每个API都非常有用 6 。除此以外，由于它基于JavaScript， jQuery对浏览器、事件处理程序和文档都具有极好的兼容性。基于上诉优势， jQuery的成为当前首选的前端开发工具。III。 THE JAGA设计理念和原则A. JAGA设计理念在现代的网页设计中，Ajax应用设计是不断变化的。各种传统的应用使用Ajax技术来推动，如窗体身份验证，数据提交，表分页等。由于使用Ajax，局部刷新取代了以前对整个网页的刷新。作为一种通用的Ajax架构，JAGA能实现大多数Ajax应用。然而，Ajax的功能是迎合特定的需求，因此，Ajax应用通常是独特的，不具备一般特征和。

6、共同的特点。通过对大量Ajax的应用实例的研究和总结，我们发现，大多数Ajax应用程序可分为两个操作。他们分别是信息提示和局部刷新。 JAGA将Ajax打包成两个原始子操作。只要实现了这两个Ajax的原子操作，它们就可以合并在一起，形成更高级和复杂的Ajax应用。B. JAGA设计原理如图1所示，JAGA架构由前端页面逻辑，后台处理逻辑和通用互动核心组成。核心部分包括数据交互式分析模块和响应逻辑模块。前端页面调用打包好的JavaScript接口逻辑，提交申请资料到JAGA的数据交互分析模块。数据交互式分析模块处理系统中的数据并调用jQuery的AJAX API将数据发送到后台逻辑。处理之后，后。

7、台逻辑按标准交互数据结构JSON 将数据打包并发送回前端7。JAGA的交互式数据分析模块来分析这个JSON数据包并根据内容进行分布式操作。然后，响应逻辑模块被调用以改变页面内容或给予提示。该通用的Ajax交互过程完成。图1.JAGA结构图IV 。 THE JAGA设计与实现A.阿贾克斯标准交互式数据结构Ajax的标准交互数据结构(简称ASI )用于JAGA和背景的逻辑之间的数据交互。ASI采用简单的JSON数据格式，其设计如下：StatusCode：200 ， /后端响应message：well done,! / 1个附加文本信息jobCode：1， /操作码response：“ ” /响应数。

8、据“StatusCode ”是后端响应代码，用于确定服务器返回的状态。不同的操作根据状态划分执行。 “message”是附加的文本信息。“jobCode ”是该结构一个重要的组成部分表示操作的类型。JAGA的数据交互分析模块将根据jobCode的值将数据发送到相应的响应逻辑模块。“response”是后端响应的实际数据。根据HTTP状态代码和常用做法， JAGA 设置三个最常用的StatusCode ：200 (成功) ， 400 (失败)和408 (超时) 。自定义扩展应优先遵循HTTP状态代码的标准定义。此外，自定义扩展将从100开始 ，以便为架构预留足够的扩展空间。B.数据的交互分析模块。

9、在JAGA数据交互分析模块，用于数据打包，数据发送和接收，数据解析和操作分析。其运行原理如图2 。包装，发送和接收子模块负责发送和接收的ASI。当接收到由后端发回的响应ASI后，它分发ASI到对应数据解析子模块。解析步骤如下：第1步：调用JAGA协助API ，将后端发送回的数据转码成JSON格式。第二步：判断ASI的StatusCode，如果存在StatusCode ，调用相应的处理逻辑，提示消息或做一些其他的操作。否则，响应数据将在被调用的区域加载的实际HTML页面。步骤3 ：提取响应ASI的jobCode，传送到操作分配子模块做进一步的分析和处理。图2.数据交互分析模块示意图根据jobCo。

10、de的值，操作分配子模块从JAGA的响应逻辑选择对应的响应函数然后调用函数来完成操作。该算法的NS流程图如图3所示。图3.操作分布子模块NS流程图C.响应逻辑模块响应逻辑模块主要用于实现来自操作分布子模块的操作请求。为了确保该体系强大的功能，并提供好的扩展性，模块设计如下：1)函数名与jobCode结合，彼此之间一一对应。2)提供三种类型的功能：预操作，实际操作和后操作。按照这种设计，所述三种功能的名称对应的jobCode分别在jobCode FUNC之前，jobCode JUNC中和jobCode JUNC之后。较小的操作耦合，强大的灵活性和可扩展能力性能，都可以通过这种设计来实现和分层。对。

11、于先前提出了两种AJAX原子操作：消息提示和本地内容的刷新，响应逻辑模块提供相应的功能来完成相应的操作。jobCode和操作之间的对应关系如表1所示。表1.JOBCODE与操作的对于关系jobCode操作1消息提示2本地整体刷新3本地局部刷新JOBCODE 为1时代表的操作是消息提示。返回值在一个JavaScript列表的数组中。其中的每个元素是一对按“键：值”方式存放的信息。操作l_func解析响应，格式化数据，并将它显示出来。开发人员只需完成FUNC 1的预操作和后操作功能来实现自定义验证提示功能和格式。JOBCODE 为2时代表的操作是本地整体刷新。返回一个按“键：值”方式存储的数组。键。

12、值对应jQuery选择字符串和值则对应html属性。FUNC 2搜索符合键值的jQuery对象，替换并加载HTML到内容区域完成本地的整体刷新。JOBCODE 为3时代表的操作是本地局部刷新。不同于本地整体刷新，在许多应用中，只有整个区域(如格)的一部分需要被刷新。这些应用程序通常对实时性具有严格的要求。如果仍然使用本地整体刷新，则势必会造成带宽严重浪费，加剧服务器的负担。在这种情况下，JAGA提出了本地局部刷新方法。为此，区域的每一部分都具有一个独一无二的标志。如jobCodel一样，该操作返回一个JavaScript列表且其中的每个元素是一个“键：值”数据，其中键值对应所述部分区域的属性标。

13、记。3_ FUNC会根据键值访问对应区域，然后加载相应的值到该地区。通过jobCode 1,2,3的有机结合， 可以轻松完成大部分的Ajax操作。对于特定需求，开发人员可以通过自定义jobCode和相应的处理方法来实现。D.测试及结果为了验证JAGA功能和性能，本文从一般AJAX实例中选择了最具代表性的一组AJAX应用，用一般的方式与使用JAGA进行了比较。结果如图4所示。对于相同的应用程序，使用JAGA可以大大减少代码量。对于一些特定的应用程序，你甚至不需要编写代码。为了实现这些应用程序，你唯一需要做的，就是填写下面的ASI协议。值得一提的是，代码量的减少意味着实现难度的降低。图4.测试结果五，结论本文根据对大量Ajax的应用实例的研究和总结提出了一种基于jQuery的Ajax通用互动架构-JAGA。灵活使用JAGA可以大大减少Ajax应用程序的工作负载。此外 ，由于该架构的作用，原本复杂的工作会变得层次化和结构化。