Ajax的典型设计模式研究

ajax应用的典型设计模式研究。

周杨（军事经济学院基础部计算机教研室湖北武汉 430035）

摘要： ajax是web领域的前沿技术，它提供了新的互联网交互模型，扩展了web应用的能力。文章对比分析了ajax工作模式与传统web工作模式的主要区别，提出了动态加载、预见式缓存、内容分块三个典型的ajax应用设计模式，并较为深入地分析了各个模式的设计原理，展示了相关的实例**。

关键词： ajax；设计模式；web；异步。

the research on the typical ajax design patterns

zhou yang

computer teaching and researching section，military economics academy，wuhan 430035，china）

abstract ajax is a front technology in the provides a new model of intemet interaction,which greatly expanded the capacity of web this *****,we analyze the main differences between the ajax design pattems and traditional web applications,then put forward four typical ajax design pattems which are dynamic loading,cache-predictable data and content described the various design patterns on the aspects of the problems,typical scene and its architecture.

keywords ajax；design pattern；web；asynchroni

ajax（asynchronous j**ascript and xml）作为web领域的前沿技术，是一种创建交互式网页应用的开发技术。作为一种新的web设计方式，ajax本身并不算新技术，它是建立在j**ascript、xhtml和css、dom、xmlhttprequest、xml等大量成熟技术基础之上的一项综合技术，并能够对各大浏览器和平台都支持的、具有公开标准的这些现有技术进行重新应用[1]。

在传统网页的工作模式下，数据采用同步交互方式。用户通过点击网页上的按钮或链接，向web服务器发送请求信息httprequest，web服务器收到用户的请求后，与数据库服务器交换数据，再向发出请求的用户返回一个html页面显示数据的改变。于是，服务器在处理请求时，用户多数时间处于等待状态，屏幕内容也是一片空白。

ajax工作模式与传统网页工作模式最大的不同是ajax采用数据异步传输与请求机制，使客户端与服务器之间的数据通信在后台运行。在浏览器与web服务器之间增加了一个ajax引擎，其实质就是一些复杂的j**ascript程序，这些程序通过调用xmlhttprequest对象的属性和方法与服务器进行数据交互，并通过dom解析处理xml文档和部分更新html页面的内容。因此，用户发出http请求后，不必再等待服务器的响应数据来刷新页面，而是继续通过页面和服务器进行其他交互，ajax引擎则会自动选择适当的时机向服务器请求数据并将返回的数据显示在客户端。

这样，服务器负担的部分工作被转交给客户端处理，节约了isp空间并减轻了服务器及带宽的负担，极大地提高了用户界面的友好程度[2]。图1描述了ajax工作模式与传统web工作模式的主要区别。

图1 传统web服务与应用ajax的web服务。

通常情况下，ajax只需使用xmlhttprequest、dom、xml、j**ascript以及css就可以完成异步交互。其中，利用xmlhttprequest对象与服务器交换数据是技术实现的关键。ajax采用request/server模式形成发送与接收xmlht-tprequest请求的程序框架，该框架的基本流程是：

对象初始化，发送请求，服务器接收，服务器返回，客户端接收，修改客户端页面内容。

首先，初始化对象并发出xmlhttprequest请求，即利用j**ascript向服务器发送http请求，需要注意的是应根据浏览器的不同初始化对象：

function makerequest (url) 抛出异常并进行自动处理。

接着，指定响应处理函数，即指定当服务器返回信息时客户端的处理方式。其中，function()是用j**ascript定义进行客户端处理的函数。然后，通过调用xmlhttprequest对象的open和send方法向服务器发出http请求，其中，true表示请求是异步，而url则代表请求的目标地址：

(“get”,url ,true);

( null);

最后，使用function()函数处理服务器返回的信息。通过判断信息是否已经返回，并执行相关操作。

function()

目前，ajax应用已经渗透到诸多业务领域，对于不同的应用目的，应当有不同的设计方案。而在ajax广泛的应用实践中，由于缺乏较为一致的设计思路和规范、清晰的体系结构，设计中不规范、不合理的状况相当严重。通过研究ajax的基本设计理论并综合目前大量的应用实践，这里抽象提炼出几种最具代表性的ajax应用设计模式，将其通称为ajax设计模式。

动态加载模式。

在传统的web应用中，不存在异步通信的概念，“提交页面——等待响应——全屏刷新”是其固有的交互方式，客户端与服务器之间的每一次数据交换，哪怕只是获取或提交少量的数据，都会促使整个页面的重载和全屏的刷新，用户的操作也会因为屏幕刷新而被频繁中断。对于较为复杂的web应用，由于页面上存在按钮、菜单等可视化元件，交互过程中这些元件一次次毫无意义地重载，不可避免地造成了冗余数据的批量加载，浪费了大量带宽。

ajax引入异步交互方式，可以实现交互过程中的动态加载，能够非常有效地避免加载与用户交互无关的冗余数据，从而加快了交互的速度，节省了带宽，使用户体验得到了有效改善。而且，由于异步交互在后台进行，通过对用户请求的异步提交和响应数据的动态加载，避免了提交整个页面和全屏刷新，整个交互过程中不会发生用户操作被阻断的现象。因此，可以将动态加载模式定义为：

在web程序中利用ajax技术，采取异步通信的方式，根据需要请求获取或提交所必需的数据，并将服务端响应数据或消息以动态方式加载到当前页面中的一种ajax web应用设计方案[3]。动态加载可视为最基本的ajax应用设计模式，该模式对于提高程序响应速度、改善应用体验、节省服务器资源有着重要的意义。

实现动态加载的前提是要实现异步通信，为此需要创建一个甚至多个xmlhttprequest对象承担请求任务。动态获取数据时应将请求类型设置为get，而动态提交数据时则应将请求类型设置为post。get请求通常需要初始化一些必要的参数，服务器依据请求参数返回相应的数据。

在实现异步通信的基础上，通过对用户事件的捕获以及对服务器响应数据的动态呈现，达到动态加载数据的目的。动态加载模式的程序体系结构遵循mvc模式，在客户端需要实现ajax引擎，这也是所有ajax应用的共同之处。客户端实体类用于描述相关的领域模型，业务类用于实现客户端的业务逻辑，而ajaxhttp类则负责完成与服务器的异步通信。

在。net中通常由。ashx类型的程序来处理异步请求，作为mvc模式中的控制器，通过它调用相应的业务和数据模型实施具体操作，并将结果返回至客户端。

客户端ajax引擎负责接收响应数据，对响应数据进行解析和组织后，呈现到视图。

客户端ajaxhttp类作为ajax引擎的核心程序之一，用来封装xmlhttprequest的功能。下面是实现一个ajaxhttp类的核心**：

ajaxhttp=new function()

//定义一个xmlhttprequest的对象数组。

创建一个兼容不同浏览器的xmlhttprequest对象。

//封装xhr对象向服务器发送请求的相关操作。

function清除所有xhr数组元素，释放资源。

function(url,data, callback,clear,callback 2) 进一步封装xhr并以post方式发送请求时的**。

Ajax的典型设计模式研究

软件企业典型的赢利模式研究

人间佛教的传播模式研究设计

FPGA按键模式的研究与设计

其他用户还读了