论文部分内容阅读
摘要：Web应用在界面易操作性方面的弱点是制约其广泛应用的重要因素，AJAX技术正是为了克服这些缺点而被提出的。它是web应用的一种新的方式，AJAX为浏览器与服务器交互较多，频繁读取数据的Web应用提供了一个很好的解决方案。本文论述了AJAX模型的架构及其关键技术，并分析了AJAX技术在实现过程中的优缺点及其安全性。
关键词：AJAX；XMLHTTPRequest；XML；Web应用
中图分类号：TP311文献标识码：A文章编号：1009-3044(2007)15-30744-03
Web Application Framework Analysis Based on the AJAX Technology
ZHANG Huan-yu,ZHANG Jian-wen
(Tongji University,Department of Computer Science and Technology,Shanghai 201804,China)
Abstract:The weakness of Web application interface that can not be operated easily is constraining their wider application. AJAX technology was proposed in order to overcome these shortcomings. It is a new method of web applications.Application that is between browsers and servers more interactive, frequently read data from servers, provides an excellent solution. This paper discusses the AJAX model for the structure and key technologies, analysis the advantages and disadvantages in the process of achieving security.
Key words:AJAX;XMLHTTPRequest;XML;Web application
1 引言
Web服务器每时每刻要处理海量的数据请求。同时我们在浏览Web站点的时候，不时的从一个页面跳转到另一个页面。我们会发现同一个站点的许多页面上的内容都是重复的，这样一来造成了数据的重复请求，加大了服务器的负担，造成网络拥塞，而且使用户界面产生闪烁或白屏，考验着用户的忍耐力。
针对上述问题，Jesse James Garrett提出了AJAX这个概念。它能实现浏览器与服务器的异步通信，使B/S结构的应用程序根据用户输入实现页面实时、局部、快速刷新，模拟桌面应用程序的效果，从而显著提高用户体验。而对于Web开发人员来说，AJAX所运用的是更加先进的，更加标准化的，更加和谐高效的，完整的Web开发技术体系，这样也使他们获得更好的开发体验。[1]
2 现状与存在的问题
传统的Web应用采用同步交互过程，这种情况下，客户端首先通过浏览器向Web服务器发出一个请求。反过来，服务器执行某些任务，再向发出请求的浏览器返回一个HTML页面。我们注意到，某些时候，客户端只是想改变页面的一小部分的数据，而服务器端还是发送了整个页面的信数据，这样就包含了大量的冗余信息。服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是一片空白，这造成一种不连贯的用户体验。如图1所示。
图1 传统的web应用交互过程
自从采用HTML作为Web传输和呈现之后，我们都是采用这样的一套传输方式。当负载比较小的时候，这并不会体现出有什么不妥。可是当负载比较大，响应时间要很长，这种等待就不可忍受了。严重的，超过响应时间，服务器索性返回页面不可用信息。当软件设计越来越讲究人性化的时候，这么糟糕的用户体验简直与这种原则背道而驰。现在，为了解决这个问题，除了程序设计、编码优化和服务器加速之外，还可以采用AJAX。
3 基于AJAX技术的Web应用架构
3.1 AJAX相关技术
AJAX是Asynchronous JavaScript And XML的缩写。这个概念最早是由Jesse James Garrett在他的论文《AJAX: A New Approach to Web Applications》中提出的。它并不是一种新的技术或语言，它只是包括了开发Web应用程序的一系列技术而已，构成AJAX模型的这些核心技术已经很成熟，并且广泛的应用于Web应用开发领域。
涉及到的技术有JavaScript、HTML、层叠样式表(CSS)、文档对象模型(DOM)、XML和XSLT，以及通过XMLHTTPRequest来进行通信协议的消息发送。将它们按照某种特定的方式组合在一起，在共同的协作中发挥各自的作用，表现在：
(1)使用XHTML和CSS标准化呈现页面
(2)使用DOM实现动态显示和交互
(3)使用XML和XSLT进行数据交换和处理
(4)使用XMLHTTPRequest进行异步数据读取
(5)使用JavaScript绑定和处理所有数据
图2表明了他们之间的关系。
图2 AJAX 关键技术
3.2基于AJAX技术的Web应用架构
与传统的Web应用不同，基于AJAX技术的Web应用架构采用异步交互过程。在用户与服务器之间引入一个中间媒介――AJAX引擎（如图3所示），从而消除了网络交互过程中的“处理…等待…处理”的缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互，独立于用户与网络服务器间的交流。它可以像在桌面应用程序只同服务器进行有效数据的交换，而不用每次将一些冗余信息（如页面中的其他部分的信息）一起提交给服务器，并且可以在客户端做一些相应的处理，这样就减少网络信息流量，减轻服务器的负担，并且加快浏览器的响应速度、缩短用户等待时间。如图4所示，浏览器呈现给用户的是连续的响应。
图3 基于AJAX技术的Web架构
当客户端向服务器发出一个HTTP请求时，先将所需要的参数整合成一个XML文件，再将这个XML文件发送到服务器端，服务器对该XML文件进行解析，取出所需的参数，将参数传递给后台页面处理程序，运行业务逻辑，读取数据库等，然后将执行结果也以XML数据格式返回到客户端，同时，还可以返回一份XSL排版样式文档，转换显示工作由客户端浏览器 的JavaScript和DOM控制来完成。[2]
以上是AJAX应用模型的典型情况，在实际运用过程中，可以相对灵活。如果客户端与浏览器交换的数据结构简单，且数量不大，完全可以不采用XML格式，而直接采用字符串格式。例如，客户端发生某一事件，发出一个HTTP请求，然后将相关参数直接附在该请求中，而不必以XML格式封装该参数。服务器端直接取出该参数，运行业务逻辑，可以生成相应的一段HTML代码直接返回之，而不必以XML+XSL的方式返回客户端。在客户端，接收HTML字符串，JavaScript控制刷新页面的相应部分。之所以AJAX中要用到XML格式，是考虑到某些应用中的数据格式的复杂性。
图4 使用 AJAX 技术的web应用交互过程
3.3AJAX引擎
AJAX引擎实际上是一个比较复杂的JavaScript应用程序，用来处理用户请求，然后根据需要动态读写服务器和更改DOM内容。以前为了使网页能无缝化重构，也就是在页面已经下载完毕后改变页面内容。开发人员一直通过JavaScript和DOM来实现。但是要使网页真正动态起来，不仅要网页自身内部的互动，还需要从外部获取数据，在XMLHTTPRequest对象出现以前。我们是让用户来输入数据并通过DOM来改变网页内容的，但现在XMLHTTPRequest对象可以让我们在不重载页面的情况下读写服务器的数据，使用户的输入达到最少。下面讨论构成Ajax引擎的几个关键技术及其在Ajax引擎中所起的作用。
3.3.1 DOM(Document Object Model)
DOM是给HTML和XML文件使用的一组API。它提供了文件的结构表述，让你可以改变其中的内容及可视化的组件。其本质是建立网页与脚本语言沟通的桥梁。所有Web开发人员可操作及建立文件的属性、方法及事件都以对象来展现(例如，Window就代表“当前窗口”这个对象，table对象则代表HTML的表格对象等等)。这些对象可以由浏览器用脚本语言来控制。一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM(Document Object Mode1)中。DOM提供了网页中各个对象的读写的支持。
3.3.2 JavaScript
JavaScript是一种在浏览器中大量使用的跨平台脚本语言．常被用来做一些网页特效或表单验证。在AJAX中JavaScript则是联系XMLHTTPRequest和DOM交互的桥梁与AJAX引擎工作的主要推动力。JavaScript通过调用XMLHTTPRequest的属性和方法来获取服务端数据，然后调用DOM的API来更新Web页面的内容，实现整个页面的无刷新更新（局部更新）。
3.3.3 XML（Extensible Markup Language）
通过XML（Extensible Markup Language），可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。用XML表述的数据和文档，可以很容易的让所有程序共享。
3.3.4XMLHTTPRequest
在AJAX引擎中的几项技术中XMLHTTPRequest对象是最核心的技术，是AJAX引擎解决无需刷新整个页面就可以从服务器获取新数据这项技术的关键所在。在微软IE平台下XMLHTTPRequest是XMLHTTP组件一个对象，它通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能，开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的，因为它可以排除下载冗余Web数据的需要，从而提高客户端的响应速度。当然在其它Web浏览器平台下，例如Mozilla(Mozilla1．0以上)，Konqueror和Opera(v7．6x+)，它们都创建了它们自己的继承XML代理类——XMLHTTPRequest类。对于大多数情况，XMLHTTPRequest对象和XMLHTTP组件很相似．方法和属性也类似，只是有一小部分属性不支持。表 1 列出了常用的属性和方法。
在使用XMLHTTPRequest对象发送请求和处理响应之前，必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHTTPRequest不是一个W3C标准，所以可以采用多种方法来创建XMLHTTPRequest的实例。Internet Explorer把XMLHTTPRequest实现为一个ActiveX对象，其他浏览器（如Firefox、Safari和Opera）把它实现为一个本地JavaScript对象。由于存在这些差别，JavaScript代码中必须包含有关的逻辑，从而使用ActiveX技术或者使用本地JavaScript对象技术来创建XMLHTTPRequest的一个实例。
以下代码展示了编写跨浏览器的JavaScript代码来创建XMLHTTPRequest对象实例的方法。[3]
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); } }
4 实例应用
表1 XMLHttp组件的方法与属性
基于AJAX技术实现两级联动下拉框，这种应用在网站应用程序中是常见的。比如，每个大学都有多个学院，大学不同，学院设置也不同。选择某个大学后，学院下拉框的内容应该发生相应变化。通常如果不采用AJAX实现，选择完某个大学后将刷新整个页面，然后学院下拉框的内容发生相应变化。下面采用AJAX实现，选择完大学后，学院下拉框的内容发生变化而无须刷新整个页面。
客户端相应的HTML代码中大学下拉框的选择变化事件响应方法OnUniversityChange，它生成XMLHTTPRequest实例。然后将用户所选大学的相应ID,传给服务器的处理页面。因为这里数据比较简单，所以没有采用XML格式，直接将大学的Id参数传给服务器。注意，XMLHttpRequest的属性onreadystatechange说明当服务器回送数据到来时，相应的处理方法,这里是UpdateCollege方法。[4]
function OnUniversityChange(obj)
{ xmlrequest=newXMLHttpRequest();
xmlrequest.open("Get","Handler.ashx?UniversityId="+obj.selectedIndex,true);xmlrequest.onreadystatechange=UpdateCollege;
xmlrequest.send(null); }
服务器端相应的处理方法：
public void ProcessRequest (HttpContext context)
{ string UniversityId = context.Request.QueryString["UniversityId"];
string RetXml=CreateXMLStr(UniversityId);
context.Response.ContentType = "text/xml";context.Response.Write(RetXml); }
取出大学Id参数，然后CreateXMLStr方法由传入的UniversityId读取数据库生成相应的XML文件。该XML文件格式如下：
1 NanJing
服务器发送完数据后，客户端做出处理，根据发送回来的XML文件，进行解析，相应更新学院下拉框的内容。
function UpdateCollege()
{ if(xmlrequest.readyState==4)
{ //”4”说明客户端发送请求完成
if(xmlrequest.status==200)
{ //“200”说明接收服务器回送消息成功
var root= xmlrequest.responseXML.
getElementsByTagName('cities')[0];
var items = root.
getElementsByTagName('College');
var College=document.
getElementById('College');
College.length=0;
College.add(new Option("Select College","0"));
for(var i=0;i { var CollegeId= items[i].
getElementsByTagName("CollegeId")[0].firstChild.nodeValue;
var CollegeName= items[i].
getElementsByTagName("CollegeName")[0].firstChild.nodeValue;
College.options.add(new Option(CollegeName,CollegeId)); }}}}
5 AJAX的缺陷
任何一种技术都是一把双刃剑，当然AJAX也不例外,它不是完美的技术。使用AJAX，它的一些缺陷不得不权衡一下：
AJAX大量使用了JavaScript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHTTPRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
对流媒体的支持没有FLASH、Java Applet好。一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。
存在安全漏洞。基于HTTP (超文本传输协议)协议传输数据的AJAX技术，可以穿透几乎所有的防火墙，从服务器将任何类型的数据和文件传输到客户端。目前的防火墙是基于状态检测，其设计原理是基于网络层TCP和IP地址，来设置与加强状态访问控制列表(ACL，Access Control Lists)。而Ajax技术传输数据采用的HTTP协议是应用层协议，这使得防火墙无法全面控制网络、应用程序和数据流，也无法截获应用层的攻击。
6 结束语
AJAX技术能够实现局部刷新页面内容，显著提高Web应用的用户体验。一般说来，AJAX技术主要应用在交互较多、频繁读数据和数据分类良好的Web应用中。AJAX技术在具体运用过程中，具体情况具体分析，才能达到较好的效果。AJAX是web应用方面的一个重要的概念，其应用也会越来越广。
参考文献：
[1][美]Jesse James Garrett.A New Approach to Web Applications[EB/0L]．
[2]Dave Crane,Eric Pascarello,Darren James. AJAX实战[M].人民邮电出版社.
[3]张桂元,贾燕枫.姜波.征服Ajax-Web 2.0 快速入门与项目实践[M].人民邮电出版社.
[4]Nicholas C.Zakas.曹力,张欣.译.JAVASCRIPT高级程序设计[M].人民邮电出版社.
注：本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文。
关键词：AJAX；XMLHTTPRequest；XML；Web应用
中图分类号：TP311文献标识码：A文章编号：1009-3044(2007)15-30744-03
Web Application Framework Analysis Based on the AJAX Technology
ZHANG Huan-yu,ZHANG Jian-wen
(Tongji University,Department of Computer Science and Technology,Shanghai 201804,China)
Abstract:The weakness of Web application interface that can not be operated easily is constraining their wider application. AJAX technology was proposed in order to overcome these shortcomings. It is a new method of web applications.Application that is between browsers and servers more interactive, frequently read data from servers, provides an excellent solution. This paper discusses the AJAX model for the structure and key technologies, analysis the advantages and disadvantages in the process of achieving security.
Key words:AJAX;XMLHTTPRequest;XML;Web application
1 引言
Web服务器每时每刻要处理海量的数据请求。同时我们在浏览Web站点的时候，不时的从一个页面跳转到另一个页面。我们会发现同一个站点的许多页面上的内容都是重复的，这样一来造成了数据的重复请求，加大了服务器的负担，造成网络拥塞，而且使用户界面产生闪烁或白屏，考验着用户的忍耐力。
针对上述问题，Jesse James Garrett提出了AJAX这个概念。它能实现浏览器与服务器的异步通信，使B/S结构的应用程序根据用户输入实现页面实时、局部、快速刷新，模拟桌面应用程序的效果，从而显著提高用户体验。而对于Web开发人员来说，AJAX所运用的是更加先进的，更加标准化的，更加和谐高效的，完整的Web开发技术体系，这样也使他们获得更好的开发体验。[1]
2 现状与存在的问题
传统的Web应用采用同步交互过程，这种情况下，客户端首先通过浏览器向Web服务器发出一个请求。反过来，服务器执行某些任务，再向发出请求的浏览器返回一个HTML页面。我们注意到，某些时候，客户端只是想改变页面的一小部分的数据，而服务器端还是发送了整个页面的信数据，这样就包含了大量的冗余信息。服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是一片空白，这造成一种不连贯的用户体验。如图1所示。
图1 传统的web应用交互过程
自从采用HTML作为Web传输和呈现之后，我们都是采用这样的一套传输方式。当负载比较小的时候，这并不会体现出有什么不妥。可是当负载比较大，响应时间要很长，这种等待就不可忍受了。严重的，超过响应时间，服务器索性返回页面不可用信息。当软件设计越来越讲究人性化的时候，这么糟糕的用户体验简直与这种原则背道而驰。现在，为了解决这个问题，除了程序设计、编码优化和服务器加速之外，还可以采用AJAX。
3 基于AJAX技术的Web应用架构
3.1 AJAX相关技术
AJAX是Asynchronous JavaScript And XML的缩写。这个概念最早是由Jesse James Garrett在他的论文《AJAX: A New Approach to Web Applications》中提出的。它并不是一种新的技术或语言，它只是包括了开发Web应用程序的一系列技术而已，构成AJAX模型的这些核心技术已经很成熟，并且广泛的应用于Web应用开发领域。
涉及到的技术有JavaScript、HTML、层叠样式表(CSS)、文档对象模型(DOM)、XML和XSLT，以及通过XMLHTTPRequest来进行通信协议的消息发送。将它们按照某种特定的方式组合在一起，在共同的协作中发挥各自的作用，表现在：
(1)使用XHTML和CSS标准化呈现页面
(2)使用DOM实现动态显示和交互
(3)使用XML和XSLT进行数据交换和处理
(4)使用XMLHTTPRequest进行异步数据读取
(5)使用JavaScript绑定和处理所有数据
图2表明了他们之间的关系。
图2 AJAX 关键技术
3.2基于AJAX技术的Web应用架构
与传统的Web应用不同，基于AJAX技术的Web应用架构采用异步交互过程。在用户与服务器之间引入一个中间媒介――AJAX引擎（如图3所示），从而消除了网络交互过程中的“处理…等待…处理”的缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互，独立于用户与网络服务器间的交流。它可以像在桌面应用程序只同服务器进行有效数据的交换，而不用每次将一些冗余信息（如页面中的其他部分的信息）一起提交给服务器，并且可以在客户端做一些相应的处理，这样就减少网络信息流量，减轻服务器的负担，并且加快浏览器的响应速度、缩短用户等待时间。如图4所示，浏览器呈现给用户的是连续的响应。
图3 基于AJAX技术的Web架构
当客户端向服务器发出一个HTTP请求时，先将所需要的参数整合成一个XML文件，再将这个XML文件发送到服务器端，服务器对该XML文件进行解析，取出所需的参数，将参数传递给后台页面处理程序，运行业务逻辑，读取数据库等，然后将执行结果也以XML数据格式返回到客户端，同时，还可以返回一份XSL排版样式文档，转换显示工作由客户端浏览器 的JavaScript和DOM控制来完成。[2]
以上是AJAX应用模型的典型情况，在实际运用过程中，可以相对灵活。如果客户端与浏览器交换的数据结构简单，且数量不大，完全可以不采用XML格式，而直接采用字符串格式。例如，客户端发生某一事件，发出一个HTTP请求，然后将相关参数直接附在该请求中，而不必以XML格式封装该参数。服务器端直接取出该参数，运行业务逻辑，可以生成相应的一段HTML代码直接返回之，而不必以XML+XSL的方式返回客户端。在客户端，接收HTML字符串，JavaScript控制刷新页面的相应部分。之所以AJAX中要用到XML格式，是考虑到某些应用中的数据格式的复杂性。
图4 使用 AJAX 技术的web应用交互过程
3.3AJAX引擎
AJAX引擎实际上是一个比较复杂的JavaScript应用程序，用来处理用户请求，然后根据需要动态读写服务器和更改DOM内容。以前为了使网页能无缝化重构，也就是在页面已经下载完毕后改变页面内容。开发人员一直通过JavaScript和DOM来实现。但是要使网页真正动态起来，不仅要网页自身内部的互动，还需要从外部获取数据，在XMLHTTPRequest对象出现以前。我们是让用户来输入数据并通过DOM来改变网页内容的，但现在XMLHTTPRequest对象可以让我们在不重载页面的情况下读写服务器的数据，使用户的输入达到最少。下面讨论构成Ajax引擎的几个关键技术及其在Ajax引擎中所起的作用。
3.3.1 DOM(Document Object Model)
DOM是给HTML和XML文件使用的一组API。它提供了文件的结构表述，让你可以改变其中的内容及可视化的组件。其本质是建立网页与脚本语言沟通的桥梁。所有Web开发人员可操作及建立文件的属性、方法及事件都以对象来展现(例如，Window就代表“当前窗口”这个对象，table对象则代表HTML的表格对象等等)。这些对象可以由浏览器用脚本语言来控制。一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM(Document Object Mode1)中。DOM提供了网页中各个对象的读写的支持。
3.3.2 JavaScript
JavaScript是一种在浏览器中大量使用的跨平台脚本语言．常被用来做一些网页特效或表单验证。在AJAX中JavaScript则是联系XMLHTTPRequest和DOM交互的桥梁与AJAX引擎工作的主要推动力。JavaScript通过调用XMLHTTPRequest的属性和方法来获取服务端数据，然后调用DOM的API来更新Web页面的内容，实现整个页面的无刷新更新（局部更新）。
3.3.3 XML（Extensible Markup Language）
通过XML（Extensible Markup Language），可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。用XML表述的数据和文档，可以很容易的让所有程序共享。
3.3.4XMLHTTPRequest
在AJAX引擎中的几项技术中XMLHTTPRequest对象是最核心的技术，是AJAX引擎解决无需刷新整个页面就可以从服务器获取新数据这项技术的关键所在。在微软IE平台下XMLHTTPRequest是XMLHTTP组件一个对象，它通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能，开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的，因为它可以排除下载冗余Web数据的需要，从而提高客户端的响应速度。当然在其它Web浏览器平台下，例如Mozilla(Mozilla1．0以上)，Konqueror和Opera(v7．6x+)，它们都创建了它们自己的继承XML代理类——XMLHTTPRequest类。对于大多数情况，XMLHTTPRequest对象和XMLHTTP组件很相似．方法和属性也类似，只是有一小部分属性不支持。表 1 列出了常用的属性和方法。
在使用XMLHTTPRequest对象发送请求和处理响应之前，必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHTTPRequest不是一个W3C标准，所以可以采用多种方法来创建XMLHTTPRequest的实例。Internet Explorer把XMLHTTPRequest实现为一个ActiveX对象，其他浏览器（如Firefox、Safari和Opera）把它实现为一个本地JavaScript对象。由于存在这些差别，JavaScript代码中必须包含有关的逻辑，从而使用ActiveX技术或者使用本地JavaScript对象技术来创建XMLHTTPRequest的一个实例。
以下代码展示了编写跨浏览器的JavaScript代码来创建XMLHTTPRequest对象实例的方法。[3]
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); } }
4 实例应用
表1 XMLHttp组件的方法与属性
基于AJAX技术实现两级联动下拉框，这种应用在网站应用程序中是常见的。比如，每个大学都有多个学院，大学不同，学院设置也不同。选择某个大学后，学院下拉框的内容应该发生相应变化。通常如果不采用AJAX实现，选择完某个大学后将刷新整个页面，然后学院下拉框的内容发生相应变化。下面采用AJAX实现，选择完大学后，学院下拉框的内容发生变化而无须刷新整个页面。
客户端相应的HTML代码中大学下拉框的选择变化事件响应方法OnUniversityChange，它生成XMLHTTPRequest实例。然后将用户所选大学的相应ID,传给服务器的处理页面。因为这里数据比较简单，所以没有采用XML格式，直接将大学的Id参数传给服务器。注意，XMLHttpRequest的属性onreadystatechange说明当服务器回送数据到来时，相应的处理方法,这里是UpdateCollege方法。[4]
function OnUniversityChange(obj)
{ xmlrequest=newXMLHttpRequest();
xmlrequest.open("Get","Handler.ashx?UniversityId="+obj.selectedIndex,true);xmlrequest.onreadystatechange=UpdateCollege;
xmlrequest.send(null); }
服务器端相应的处理方法：
public void ProcessRequest (HttpContext context)
{ string UniversityId = context.Request.QueryString["UniversityId"];
string RetXml=CreateXMLStr(UniversityId);
context.Response.ContentType = "text/xml";context.Response.Write(RetXml); }
取出大学Id参数，然后CreateXMLStr方法由传入的UniversityId读取数据库生成相应的XML文件。该XML文件格式如下：
服务器发送完数据后，客户端做出处理，根据发送回来的XML文件，进行解析，相应更新学院下拉框的内容。
function UpdateCollege()
{ if(xmlrequest.readyState==4)
{ //”4”说明客户端发送请求完成
if(xmlrequest.status==200)
{ //“200”说明接收服务器回送消息成功
var root= xmlrequest.responseXML.
getElementsByTagName('cities')[0];
var items = root.
getElementsByTagName('College');
var College=document.
getElementById('College');
College.length=0;
College.add(new Option("Select College","0"));
for(var i=0;i
getElementsByTagName("CollegeId")[0].firstChild.nodeValue;
var CollegeName= items[i].
getElementsByTagName("CollegeName")[0].firstChild.nodeValue;
College.options.add(new Option(CollegeName,CollegeId)); }}}}
5 AJAX的缺陷
任何一种技术都是一把双刃剑，当然AJAX也不例外,它不是完美的技术。使用AJAX，它的一些缺陷不得不权衡一下：
AJAX大量使用了JavaScript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHTTPRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
对流媒体的支持没有FLASH、Java Applet好。一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。
存在安全漏洞。基于HTTP (超文本传输协议)协议传输数据的AJAX技术，可以穿透几乎所有的防火墙，从服务器将任何类型的数据和文件传输到客户端。目前的防火墙是基于状态检测，其设计原理是基于网络层TCP和IP地址，来设置与加强状态访问控制列表(ACL，Access Control Lists)。而Ajax技术传输数据采用的HTTP协议是应用层协议，这使得防火墙无法全面控制网络、应用程序和数据流，也无法截获应用层的攻击。
6 结束语
AJAX技术能够实现局部刷新页面内容，显著提高Web应用的用户体验。一般说来，AJAX技术主要应用在交互较多、频繁读数据和数据分类良好的Web应用中。AJAX技术在具体运用过程中，具体情况具体分析，才能达到较好的效果。AJAX是web应用方面的一个重要的概念，其应用也会越来越广。
参考文献：
[1][美]Jesse James Garrett.A New Approach to Web Applications[EB/0L]．
[2]Dave Crane,Eric Pascarello,Darren James. AJAX实战[M].人民邮电出版社.
[3]张桂元,贾燕枫.姜波.征服Ajax-Web 2.0 快速入门与项目实践[M].人民邮电出版社.
[4]Nicholas C.Zakas.曹力,张欣.译.JAVASCRIPT高级程序设计[M].人民邮电出版社.
注：本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文。