论文部分内容阅读
摘要：Web应用所提供的体验和用户从桌面应用程序所得到的体验在响应速度、易用性等方面存在着巨大的差距，为了改善Web应用程序给用户带来的体验，IT界引出了Ajax这个新名词。文章简要介绍了Web 2．0的Ajax技术的基础理论，就其关键技术中的XMLHttpRequest对象作了重点分析，并对Ajax技术的优缺点及其应用作了探讨，展示了Ajax所以能给用户带来更为强大的Web体验的实质。
关键词：Ajax；XMLHttpRequest；无刷新；异步
0引言
桌面应用程序有着丰富的界面以及对于Web程序来说无法比拟的响应能力,Web应用所提供的体验和用户从桌面应用程序所得到的体验在响应速度、易用性等方面存在着巨大的差距。
Jesse James Garrett的一篇A New Approach to WebApplications引出了Ajax这个Web世界的新名词。Ajax是在成熟的互联网技术下诞生的一个新标准，是Web 2．0中的一项重要技术，旨在给用户带来更为强大的Web体验。随着Gmail、Google Maps、Google Suggest、Flickr、Netflix和A9等Ajax应用的不断涌现，Ajax越发地受到了人们的关注。
1 Aiax的概念
Ajax是Asynchronous JavaScript and XML的缩写，意思是异步的JavaScript与XML。Ajax使用了若干项技术来构建丰富的基于Web的应用，使得在线的Web应用与桌面程序有同样的观感，这些技术包括CSS、JavaScript、XHTML、XML、XMLHttpRequest、DOM以及XSLT等Ⅲ。
要准确描述什么是Ajax，最容易的方法是让其与相反的情况进行对比。
对于大部分的Web站点，与Web服务器进行交互的通信方式是：当在线用户填写完表单单击提交按钮后，整个页面就会发送至Web服务器，用户必须等待服务器接受请求。当服务器完成处理请求时，就会将响应内容发送过来，这时，才得以最终刷新用户页面。Ajax是一种减少这一系列等待事件的技术。
2 Ajax的思想
Ajax实际上是几项技术的综合，每个都基于本身的能力而有所发展，组合在一起形成了一个更强的新技术。Ajax组合了以下七种技术：
(1)使用XHTML和CSS标准化呈现；
(2)使用DOM来动态显示和进行交互；
(3)使用XML和XSLT来进行数据交换和显示；
(4)使用XMLHttpRequest来获取异步信息；
(5)使用JavaScript将上述六项技术整合起来。
虽然Jesse列出了上面七项AjaX的构成技术，但通常认为，所谓的Ajax其核心只有XMLHttpRequest,JavaScript和DOM，倘若所用数据格式为XML的话，还可以再加上XML这一项。
然而，Ajax最核心的理念是，在传统应用中的浏览器直接和服务器交互的模式的中间夹了一层Script。也就是说，原来是Browser-Server架构，现在是Browser-Scripc-Server，如图l所示。
对于纯粹的Ajax应用，浏览器只向JavaScript发送消息，JavaScript使用XmlHttp向服务器发送请求，然后服务器在XmlHttp的回复中带上相关消息，最后JavaScript分析这些消息，用HTML DOM模型处理界面。如此，理论上可以完全消除刷新的需要。
3 Ajax的核心技术
Ajax的最大特点是无刷新更新页面，这一特点主要得益于XMLHTTP组件的XMLHttpRequest对象。
在使用XMLHttpRequest对象发送请求和处理响应之前，必须先使用JavaScript创建一个XMLHttpRequest对象。代码清单l给出了编写跨浏览器的JavaScript代码来创建XMLHttpRequest对象的示例。
代码清单l：创建XMLHttpRequest对象。var xmlHttp；function createXMLHttpRequest(){if(window．ActiveXObject)／／判断浏览器是否为IE浏览器{xmlHttp=new ActiveXObject(”Microsoft．XMLHTTP"，)；}
else if(window．XMLHttpRequest)／／Mozilla,Safari,．…
{xmlHttp=new XMLHRpRequest()：}
}
不同于标准的Web程序中所用的请求／响应方法，Ajax应用XMLHttpRequest对象的过程如下：
(1)一个客户端事件触发一个Ajax事件。其代码如下： onblur=“validateEmail”>
(2)创建XMLHttpRequest对象，使用open方法建立调用，并设置URL以及所希望的HTrP方法(通常是GET或POST)，请求通过一个send方法调用触发。代码如下所示(有关的方法见表1)：
function validateEmail0{
var email=document．getElementByld(“email")：
var urf=“validate?email=”+escape(email．value)；
createXMLHttpRequest0；／／见代码清单1
xmlHttp．open("GET",URL)；
xmlHttp．onreadystatechange=callback；
xmlHttp．send(null)；
｝
(3)向服务器发出请求。可以调用Servlet、CGI脚本或者任何服务器端技术。
(4)服务器处理有关请求，包括访问数据库，甚至访问另一个系统。
(5)响应返回到浏览器。Content-Type设置为text／xml-——XMLHttpRequest对象只能处理text／xml类型的数据。要使浏览器不在本地缓存结果，可以使用下面的代码：
Response．setHeader("Cache-Contml","no-cache")；
Response．setHeader("Pragma","no-cache")；
(6)在前述代码中，XMLHttpRequest对象配置为处理返回时要调用callback函数。这个函数会检查XMLHttpRequest对象的readyState属性，然后查看服务器返回的状态码(有关XMLHttpRequest的状态码如表2所示)。如果一切正常，callback 函数就会在客户端上进行相关处理工作。
以下就是一个典型的回调方法：function callback(){
If(xmlHttp．readyState==4)
{If(xmIHttp．status==200)
{／／do something interesting here)
}
}
XMLHttpRequest对象与服务器之间相互通信的方法有多种。XMLHttpRequest对象可以使用HTTP GET、POST或者HEAD方法发送请求，请求数据可以作为查询串、XML或JSON数据发送。处理请求之后，服务器一般会发送简单文本、XML数据甚至JSON数据作为响应。
4 Ajax的优点及其应用
Ajax的出现有代替传统Web开发中采用Form(表单)递交方式更新Web页面的趋势，可以算是一个里程碑。虽然Ajax并不是适用于所有场合，这是由它的特性所决定的，但恰当地使用Ajax可以带来更好的用户体验。
使用Ajax的优点包括：减轻服务器的负担；无刷新更新页面，减少用户实际和心理等待时间；可以把以前的一些服务器负担的工作转嫁到客户端；使Web中的数据与呈现分离等等。
下面的例子是一个关于级联菜单方面的Ajax应用。
对级联菜单的传统处理是：
为了避免每次对菜单的操作都要重载页面，一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用JavaScnpt来控制它的子集项目的呈现。这虽然解决了操作响应速度慢、重载页面以及向服务器频繁发送请求的问题，但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的话，那么读取的数据中的一部分就会成为冗余数据源，特别是在菜单结构复杂、数据量大的情况下(比如菜单有很多级、每一级菜单又有上百个项目)，这种弊端就更为突出。
在此案例中应用Ajax后，情况将不同：
在初始化页面时只读出它的第一级的所有数据并显示，在用户操作一级菜单的其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据，如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，依此类推……，这样，用什么就取什么、用多少取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了用户的等待时间，也把对资源的浪费降到最低。
此外，Ajax可以调用外部数据，可以实现数据聚合的功能(当然要有相应授权)，比如微软的在线RSS阅读器；还可以利用一些开放的数据，开发自己的一些应用程序，比如用Amazon的数据作一些新颖的图书搜索应用。
可见，Ajax适用于交互较多，频繁读数据，数据分类良好的Web应用。
5结束语
Ajax的成功之处在于使用验证过的现有技术使得Web应用更像是一个桌面应用程序，减少了用户的等待时间，提升了用户的浏览体验。Ajax在任何标准浏览器(可以处理JavaScfipt和DOM的浏览器)中都可以正常工作，不需要单独安装其他插件。
(注：本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文。)
关键词：Ajax；XMLHttpRequest；无刷新；异步
0引言
桌面应用程序有着丰富的界面以及对于Web程序来说无法比拟的响应能力,Web应用所提供的体验和用户从桌面应用程序所得到的体验在响应速度、易用性等方面存在着巨大的差距。
Jesse James Garrett的一篇A New Approach to WebApplications引出了Ajax这个Web世界的新名词。Ajax是在成熟的互联网技术下诞生的一个新标准，是Web 2．0中的一项重要技术，旨在给用户带来更为强大的Web体验。随着Gmail、Google Maps、Google Suggest、Flickr、Netflix和A9等Ajax应用的不断涌现，Ajax越发地受到了人们的关注。
1 Aiax的概念
Ajax是Asynchronous JavaScript and XML的缩写，意思是异步的JavaScript与XML。Ajax使用了若干项技术来构建丰富的基于Web的应用，使得在线的Web应用与桌面程序有同样的观感，这些技术包括CSS、JavaScript、XHTML、XML、XMLHttpRequest、DOM以及XSLT等Ⅲ。
要准确描述什么是Ajax，最容易的方法是让其与相反的情况进行对比。
对于大部分的Web站点，与Web服务器进行交互的通信方式是：当在线用户填写完表单单击提交按钮后，整个页面就会发送至Web服务器，用户必须等待服务器接受请求。当服务器完成处理请求时，就会将响应内容发送过来，这时，才得以最终刷新用户页面。Ajax是一种减少这一系列等待事件的技术。
2 Ajax的思想
Ajax实际上是几项技术的综合，每个都基于本身的能力而有所发展，组合在一起形成了一个更强的新技术。Ajax组合了以下七种技术：
(1)使用XHTML和CSS标准化呈现；
(2)使用DOM来动态显示和进行交互；
(3)使用XML和XSLT来进行数据交换和显示；
(4)使用XMLHttpRequest来获取异步信息；
(5)使用JavaScript将上述六项技术整合起来。
虽然Jesse列出了上面七项AjaX的构成技术，但通常认为，所谓的Ajax其核心只有XMLHttpRequest,JavaScript和DOM，倘若所用数据格式为XML的话，还可以再加上XML这一项。
然而，Ajax最核心的理念是，在传统应用中的浏览器直接和服务器交互的模式的中间夹了一层Script。也就是说，原来是Browser-Server架构，现在是Browser-Scripc-Server，如图l所示。
对于纯粹的Ajax应用，浏览器只向JavaScript发送消息，JavaScript使用XmlHttp向服务器发送请求，然后服务器在XmlHttp的回复中带上相关消息，最后JavaScript分析这些消息，用HTML DOM模型处理界面。如此，理论上可以完全消除刷新的需要。
3 Ajax的核心技术
Ajax的最大特点是无刷新更新页面，这一特点主要得益于XMLHTTP组件的XMLHttpRequest对象。
在使用XMLHttpRequest对象发送请求和处理响应之前，必须先使用JavaScript创建一个XMLHttpRequest对象。代码清单l给出了编写跨浏览器的JavaScript代码来创建XMLHttpRequest对象的示例。
代码清单l：创建XMLHttpRequest对象。var xmlHttp；function createXMLHttpRequest(){if(window．ActiveXObject)／／判断浏览器是否为IE浏览器{xmlHttp=new ActiveXObject(”Microsoft．XMLHTTP"，)；}
else if(window．XMLHttpRequest)／／Mozilla,Safari,．…
{xmlHttp=new XMLHRpRequest()：}
}
不同于标准的Web程序中所用的请求／响应方法，Ajax应用XMLHttpRequest对象的过程如下：
(1)一个客户端事件触发一个Ajax事件。其代码如下：
(2)创建XMLHttpRequest对象，使用open方法建立调用，并设置URL以及所希望的HTrP方法(通常是GET或POST)，请求通过一个send方法调用触发。代码如下所示(有关的方法见表1)：
function validateEmail0{
var email=document．getElementByld(“email")：
var urf=“validate?email=”+escape(email．value)；
createXMLHttpRequest0；／／见代码清单1
xmlHttp．open("GET",URL)；
xmlHttp．onreadystatechange=callback；
xmlHttp．send(null)；
｝
(3)向服务器发出请求。可以调用Servlet、CGI脚本或者任何服务器端技术。
(4)服务器处理有关请求，包括访问数据库，甚至访问另一个系统。
(5)响应返回到浏览器。Content-Type设置为text／xml-——XMLHttpRequest对象只能处理text／xml类型的数据。要使浏览器不在本地缓存结果，可以使用下面的代码：
Response．setHeader("Cache-Contml","no-cache")；
Response．setHeader("Pragma","no-cache")；
(6)在前述代码中，XMLHttpRequest对象配置为处理返回时要调用callback函数。这个函数会检查XMLHttpRequest对象的readyState属性，然后查看服务器返回的状态码(有关XMLHttpRequest的状态码如表2所示)。如果一切正常，callback 函数就会在客户端上进行相关处理工作。
以下就是一个典型的回调方法：function callback(){
If(xmlHttp．readyState==4)
{If(xmIHttp．status==200)
{／／do something interesting here)
}
}
XMLHttpRequest对象与服务器之间相互通信的方法有多种。XMLHttpRequest对象可以使用HTTP GET、POST或者HEAD方法发送请求，请求数据可以作为查询串、XML或JSON数据发送。处理请求之后，服务器一般会发送简单文本、XML数据甚至JSON数据作为响应。
4 Ajax的优点及其应用
Ajax的出现有代替传统Web开发中采用Form(表单)递交方式更新Web页面的趋势，可以算是一个里程碑。虽然Ajax并不是适用于所有场合，这是由它的特性所决定的，但恰当地使用Ajax可以带来更好的用户体验。
使用Ajax的优点包括：减轻服务器的负担；无刷新更新页面，减少用户实际和心理等待时间；可以把以前的一些服务器负担的工作转嫁到客户端；使Web中的数据与呈现分离等等。
下面的例子是一个关于级联菜单方面的Ajax应用。
对级联菜单的传统处理是：
为了避免每次对菜单的操作都要重载页面，一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用JavaScnpt来控制它的子集项目的呈现。这虽然解决了操作响应速度慢、重载页面以及向服务器频繁发送请求的问题，但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的话，那么读取的数据中的一部分就会成为冗余数据源，特别是在菜单结构复杂、数据量大的情况下(比如菜单有很多级、每一级菜单又有上百个项目)，这种弊端就更为突出。
在此案例中应用Ajax后，情况将不同：
在初始化页面时只读出它的第一级的所有数据并显示，在用户操作一级菜单的其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据，如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，依此类推……，这样，用什么就取什么、用多少取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了用户的等待时间，也把对资源的浪费降到最低。
此外，Ajax可以调用外部数据，可以实现数据聚合的功能(当然要有相应授权)，比如微软的在线RSS阅读器；还可以利用一些开放的数据，开发自己的一些应用程序，比如用Amazon的数据作一些新颖的图书搜索应用。
可见，Ajax适用于交互较多，频繁读数据，数据分类良好的Web应用。
5结束语
Ajax的成功之处在于使用验证过的现有技术使得Web应用更像是一个桌面应用程序，减少了用户的等待时间，提升了用户的浏览体验。Ajax在任何标准浏览器(可以处理JavaScfipt和DOM的浏览器)中都可以正常工作，不需要单独安装其他插件。
(注：本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文。)