| 基于AJAX的WEB开发研究 |
相关标签：摘要：该文介绍了使用AJAX 开发WEB应用系统的基本原理，并与传统的WEB开发方式进行了对比，结合实际项目提出使用AJAX解决WEB开发中几个典型问题的方法。
关键词: AJAX；XMLHttpRequest；XML；WEB开发
Research on Web Development Based on AJAX
JIN Ying1, Li-Chao2
(1.Department of Management of Hefei University, Hefei 230601, China; 2.School of Computer & Information of Hefei University of Technology, Hefei 230009, China)
Abstract: This paper introduces a principle of develop web application system using AJAX and compares with traditional web development method, gives a solution to solve some typical problems using AJAX under actual project.
Key words: AJAX; XMLHttpRequest; XML; WEB development
1 引言
随着计算机网络的不断发展，越来越多的应用系统采用Browse/Server (B/S)架构。由于WEB应用系统和桌面应用系统对数据显示不同的处理方式，使得WEB应用系统无法像桌面应用系统一样使用丰富的界面组件,增大了WEB开发的复杂性，也为构造复杂界面的应用系统带来了很大的困难。AJAX(Asynchronous JavaScript and XML)由Jesse James Garrett首先提出。AJAX作为一种新的WEB开发方法已在Google Gmail，Google Maps等应用系统中使用，并且Sun已开始计划把AJAX加入到J2EE[1]中。
2 AJAX原理
AJAX综合运用已有的技术实现WEB的开发。AJAX主要包括以下的技术[2]：
1) HTML和CSS：用于描述WEB界面。
2) Document Object Model(DOM): 文档对象模型。WEB页面使用DOM树来描述，通过脚本可以对DOM进行操作，实现动态页面。
3) XML和XSLT: XML是AJAX操作的数据格式，AJAX与服务器交互的数据都是通过XML来描述的。XSLT用于XML数据的格式化。
4) XMLHttpRequest：WEB页面通过XMLHttpRequest对象和服务器进行交互。XMLHttpRequest对象虽然还没有在W3C规范中定义，但大多数的浏览器都已支持此对象，如Microsoft Internet Explorer中有与之对应的XMLHTTP对象，在以Mozilla为核心的浏览器中已定义了XMLHttpRequest对象,Netscape最新版本中也加入了对XMLHttpRequest的支持。
5) JavaScript: 通过JavaScript脚本可以对DOM，XML和XMLHttpRequest对象和数据进行处理，构造出WEB界面。
图1给出了AJAX的WEB模型图。AJAX的模型比传统的WEB模型多了AJAX一层。
AJAX层处于用户界面和WEB服务器之间，用户界面中的数据由AJAX引擎进行封装并提交给WEB服务器，WEB服务器的数据也是通过AJAX的解析反映到用户界面中的。
AJAX引擎与WEB服务器的交互过程如下：
1) AJAX引擎通过JavaScript脚本访问用户界面对应的DOM树，从DOM中获取用户准备提交的数据，并以一定的格式组织这些数据。
2) AJAX引擎获得XMLHttpRequest对象，并指定发送的数据，WEB服务器的地址以及回调函数。回调函数是实现异步发送和接收数据的关键部分，在发送和接收数据过程中，XMLHttpRequest对象会调用回调函数，从而可以获得与服务器交互的情况。
3) AJAX引擎调用XMLHttpRequest对象的send方法发送数据。
4) WEB服务器在接收到HTTP请求后对AJAX封装的数据进行解析，完成相应的业务处理，按照XML数据格式返回结果给AJAX引擎。
5) 回调函数在检测到与WEB服务器的交互完成以后，从AJAX引擎中获得WEB服务器返回的数据，通过JavaScript[3]对数据进行处理，以HTML的形式在用户界面中显示。
3 AJAX 与传统WEB开发方式的比较
这里所说的传统WEB开发方式指的是在客户端通过表单提交数据，在服务器上同时处理业务数据和样式的一种设计方法。
1) 对界面开发人员的要求不同
传统开发方式要求界面开发人员不但熟悉页面的设计，还要能够熟悉各种业务对象，并将业务数据嵌入到页面中，这对于专业的界面设计人员来说难度较大，而充当这一角色的往往是业务层开发人员，这样既降低了界面的质量又使业务层开发人员不能集中精力开发业务逻辑。
基于AJAX的开发完全将页面设计和业务数据分割开来。业务层开发人员可以完全关注于业务流程，只需要提供用户界面中使用到的业务数据。用户界面开发人员无须关心业务对象，只需要对业务数据进行处理，所需的技术就是如何操作XML格式的数据。这种方式不但有利于分工，还可以提高软件并行开发的效率，降低冲突的可能性。
2) 与服务器的交互方式不同
传统开发方式使用表单与服务器进行数据交互，往往需要刷新整个页面来完成一个操作，这种方式带来的问题就是在客户端和服务端之间传输重复的数据，并且造成视觉上的不连续性。
AJAX使用XMLHttpRequest对象在后台与服务器进行交互，交互的是与业务紧密相关的数据，并在同一个界面中给出操作的结果，从而保持视觉上的连续性。
3) 界面组件的使用方式不同
传统开发方式使用的界面组件包括服务端和客户端两种类型的组件。服务端组件使用表单与服务器通讯，所以每次组件的更新操作都是组件的重新构造过程，这样使得组件的使用效率较低。客户端组件由于无法和业务数据绑定，所以只起到页面显示的作用。
AJAX主要使用客户端组件。由于AJAX可以与服务器进行数据的交互，从而使的客户端组件拥有了丰富的数据表现能力，组件的更新只对数据进行变更，而无需重新构造整个组件。
4) 实现复杂界面的难易程度不同
复杂界面的构造往往需要大量的脚本，需要在一个界面中完成各种各样的操作。基于表单的传统开发方式不太适合在一个界面中完成一系列连续的操作，AJAX通过后台的数据交换可以很好的保证在一个界面中完成各种操作。
5) 调试方式不同
传统开发方式所进行的页面调试主要是服务端调试，由于页面中既包含了样式，又包含了业务对象，这给调试带来了一定的困难。
AJAX设及到大量的脚本，调试的重点是客户端脚本。随着开发工具的不断更新，脚本的调试也变得非常便利。Microsoft Visual Studio .net提供了非常好的脚本调试环境。
6) 应用范围不同
传统开发方式可以应用在各种类型的应用系统中，而AJAX开发方式适合数据处理，管理类的应用系统，而不适合以内容发布为主的应用系统，如新闻系统。
AJAX开发方式与传统开发方式的不同就在于AJAX开发方式吸取了桌面应用系统开发的特点，同时又结合WEB开发固有的特点，从而可以更好的用来开发WEB应用系统。
4 AJAX应用实例
在基于Web的网络平台实验系统中，我们采用AJAX技术进行了WEB开发，下面说明使用AJAX解决的几个典型问题。
1) 树型目录的构造
网络平台实验系统管理的对象之一是部门结构。系统中包括多个部门（如:院），每个部门包含多个基层单位(如:系)，如信息管理系，工商管理系等，每个基层单位又包括多门基础实验课程，如数据结构002，高级语言001等。这样就构成了三级结构，第一级为部门（如：院），第二级为基层单位（如:系)，第三级为实验课程。树型目录可以清晰的表示这种层次结构。
对于树型目录的构造有多种方式。
一种方式是一次性获取所有结点的信息，构造出一完整的树型目录，当树型目录的内容发生变更时，就重新构造。当结点数量较大时这种方式将会严重影响性能，同时要维护树型目录更新前和更新后状态的连续性也会非常困难。
另一种方式就是使用AJAX，动态填充数据，动态变更数据。通过AJAX在后台与服务器的通讯，可以根据需要每次获得一层的数据。首先生成所有部门结点，当用户选择了某个部门结点后，AJAX与服务器交互一次获取此部门包含的所有基层单位信息，当选中基层单位后再获取其包含的基础实验课程信息，这样就实现了数据的按需获取。当结点内容发生时，AJAX只要提交数据变更，并通过脚本改变结点的显示内容就可以完成整个操作。