基于jQuery的Ajax通用互動架构.docVIP

基于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的