摘 要：Web 应用程序是Web2.0技术的重要组成部分，Ajax技术提供给用户一个快速相应的人机交互机制，是Javascript，XHTML和CSS,DOM,XML和XSTL,XMLHttpRequest多种技术的综合。文章对ajax技术的体系结构做了简单的分析，阐明了ajax技术在web应用程序处理中的优势。
关键词：AJAX 软件体系结构 Web异步通讯 Web2.0
一．概述
传统的Web应用采用同步交互的过程，这种请求/访问的交互方式会产生客户端的等待时间和重复内容的无效刷新，不仅浪费网络带宽资源而且易使用户在等待中感到疲劳。Jesse James Garrett最早提出Ajax（Asynchronous JavaScript and XML）概念，综合运用几项技术按照一定的方式在共同协作的中发挥各自的作用。包括以下的内容：使用XHTML和CSS标准化呈现;使用DOM实现动态显示和交互;使用XML和XSLT进行数据交换与处理;使用XMLHttpRequest进行异步数据读取;最后用JavaScript绑定和处理所有数据。Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。客户端分担部分处理任务，服务器只是专注于提供有价值的数据。
传统的Web应用从客户端提出请求到应用服务器进行响应，服务器按照预定的业务访问数据库，并由服务器将数据结果重新组这成HTML和CSS等能被浏览器识别的格式，然后服务器将结果发送到客户端。服务器处理这些事务的时候，客户端处于等待状态。
使用Ajax技术后，在客户端加入了一个Ajax引擎，客户端通过JavaScript调用AJAX引擎向服务器端发送HTTP请求，并不等待服务器的响应，当服务器数据以XML格式返回，AJAX引擎接受数据并指定JavaScript函数完成对响应的处理或者对页面的更新。图1是两种模式处理逻辑演示示意图，图2是两种模式处理的时序演示示意图，采用这种异步交互过程当服务器数据没有返回时，用户可以继续浏览或者交互，不必等待。AJAX技术将服务器端采用服务程序放在次要位置，更侧重返回的数据内容。
二．Ajax技术的框架实现
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。IE（IE5以上）最早允许开发人员从Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。Mozilla（Mozilla1.0以上及NetScape7以上）是创建它自己的继承XML代理类（XMLHttpRequest类）。Opera在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。
本文通过一个单词输入提示系统演示Ajax技术，共包含4个文件index.htm, ajaxserver.js, data.asp, xx.mdb 分别实现页面显示, XMLHttpRequest对象连接用户界面和发送接受数据,数据服务程序,以及数据库.涉及了HTML,JavaScript,VBScript,SQL等语言,通过一系列的构件协作,实现当用户输入字符串,由XMLHttpRequest对象自动发送查询命令,获取经由IIS解析后xx.mdb数据后的数据返回到用户界面实时显示出来.以下是对这一过程的详细分析.
编写XMLHttpRequest对象的初始化函数InitAjax():
function InitAjax()
{
var ajax=false;
try
{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest!='undefined')
{
ajax = new XMLHttpRequest();
}
return ajax;
}
以下表格列出XMLHttpRequest对象的方法和属性:
XMLHttpRequest 对象方法
方法 描述
abort() 停止当前请求
getAllResponseHeaders() 作为字符串返问完整的headers
getResponseHeader("headerLabel") 作为字符串返问单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数
send(content) 发送请求
setRequestHeader("label", "value") 设置header并和请求一起发送
XMLHttpRequest 对象属性
属性 描述
onreadystatechange 状态改变的事件触发器
readyState 对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
status 服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功"
statusText 服务器返回的状态文本信息
以下代码显示了一个XMLHttpRequest对象应用的基本程序结构
function SearchDic()//可在键盘响应时执行此函数,使用户感到立即被执行.
{
if (postForm!=null&&postForm!=undefined)// postForm是用户输入对话框对象,需要预先定义
{
var ReturnText=null;
var url = "data.asp";
var postStr = postForm.value;//获取用户输入的字符串
if (postStr)
{
var ajax = InitAjax();//用XMLHttpRequest对象初始化
ajax.open("POST", url, true); //设置open方法,在此并未执行,send是执行语句.
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置发送的head信息
ajax.send(postStr);//将需要发送的数据用send方法传送到url指定的地址
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4 && ajax.status == 200) //接受数据完毕且正确
{
ReturnText = ajax.responseText;
msg.innerHTML=ReturnText;//获取接受到的数据,用页面元素msg显示出来.
}
}
}
else
{
msg.innerHTML = "请输入单词";
}
}
else
{
msg.innerHTML = "窗体载入中...";
}
}
data.asp接受ajax.send(postStr)语句发送的数据,在IIS(Internet Information Servive)的支持下执行一定的运算(如查询数据库)的运算返回数据结果. ajax.responseText属性存储了这些集成了数据的HTML代码片段,然后存储到ReturnText变量中,被立即显示到页面上.这个过程在JavaScript的支持下由浏览器在后台完成,因此客户界面看不到内在的过程.
data.asp获取用户输入字符串,并在ACCESS数据库中查找中文解释,同时返回最多8个相关的提示单词.代码如下:
"
do while not rs.eof
response.write "" & rs(1) & "" & rs(2) & ""
rs.movenext
loop
response.write ""
rs.close
conn.close
%>
就IIS而言,VBScript的应用比JavaScript广泛.Request.BinaryRead(Request.TotalBytes)函数获取ajax.send(postStr)发送来的数据存储到wd1中,vb脚本利用ADODB接口和SQL语言从ACCESS数据库xx.mdb中检索与wd1相关单词,将检索结果用response.write方法返回到ajax引擎,被ajax.responseText获取.返回的数据是等格式化了的HTML语言片段. 这些语言片段最终将通过JavaScript语句被实时显示到客户浏览器上.
web页面中的定义:
下列JavaScrip脚本代码显示了如何获取用户输入的字符串及如何将检索结果显示
var postForm = null;
var msg = null;
postForm = document.FormArea.TextArea;
msg = document.getElementById("msg");
……
msg.innerHTML=ReturnText;
运行后的效果图如下:
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），而在以前两者是没有清晰的界限的，数据与呈现分离的分离，有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理。
三．Ajax基于事件的隐式调用风格
基于事件的隐式调用风格的思想是构件不直接调用一个过程，而是触发一个或多个事件。系统中的其它构件中的过程在一个或多个事件中注册，当一个事件被触发，系统自动调用在这个事件中注册的所有过程，这样，一个事件的触发就导致了另一模块中的过程的调用。
Ajax技术即是在用户在当前窗口动作的过程中触发一个或者多个脚本服务程序,通过一系列的构件的协同调用和客户窗口、客户脚本、Web服务器、数据库服务器之间的数据传递,最终返回到窗口中需要的数据.用户不用主动请求与服务器的连接响应,不用等待与服务器通讯的时间,得到更好的使用体验.
四．结论
基于Ajax的web应用具有传统web应用无法比拟的优势：减轻服务器负担；减少用户实际和心理等待时间；更好的用户体验；减轻带宽的负担；节约空间和带宽租用成本；基于标准化的和被广泛支持和应用；不需要插件和下载小程序支持等。
Ajax技术对软件结构体系的一个有益补充，完善了三层网络访问模式，为软件体系结构增添了色彩。
Ajax理念的出现，揭开了无刷新时代的序幕，为web应用程序的出现奠定了一定的基础。从google message，google maps，google文档等的成功应用看出Ajax技术势必会成为影响web发展的中坚力量，并对人们的网络生活方式产生深远的影响，称得上是web技术发展上的一个里程碑。
参考文献:
[1] 连黎明.欧阳钟辉《AJAX技术及其框架实现》软件导刊2006.9
[2] 史胜辉 《ajax技术在web客户端开发中的应用》中国管理信息化 2006.1
[3] 连黎明等《ajax异步通讯机制在web开发中的应用》泉州师范学院学报 2006.10
[4] 朱德利《web2.0的技术特点和信息传播思想》现代情报 2005.12
[5] Jesse James Garrett.Ajax:A New Approach to Web Application http://adaptivepath.com/publication/essays/achives/00385.php,2005
关键词：AJAX 软件体系结构 Web异步通讯 Web2.0
一．概述
传统的Web应用采用同步交互的过程，这种请求/访问的交互方式会产生客户端的等待时间和重复内容的无效刷新，不仅浪费网络带宽资源而且易使用户在等待中感到疲劳。Jesse James Garrett最早提出Ajax（Asynchronous JavaScript and XML）概念，综合运用几项技术按照一定的方式在共同协作的中发挥各自的作用。包括以下的内容：使用XHTML和CSS标准化呈现;使用DOM实现动态显示和交互;使用XML和XSLT进行数据交换与处理;使用XMLHttpRequest进行异步数据读取;最后用JavaScript绑定和处理所有数据。Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。客户端分担部分处理任务，服务器只是专注于提供有价值的数据。
传统的Web应用从客户端提出请求到应用服务器进行响应，服务器按照预定的业务访问数据库，并由服务器将数据结果重新组这成HTML和CSS等能被浏览器识别的格式，然后服务器将结果发送到客户端。服务器处理这些事务的时候，客户端处于等待状态。
使用Ajax技术后，在客户端加入了一个Ajax引擎，客户端通过JavaScript调用AJAX引擎向服务器端发送HTTP请求，并不等待服务器的响应，当服务器数据以XML格式返回，AJAX引擎接受数据并指定JavaScript函数完成对响应的处理或者对页面的更新。图1是两种模式处理逻辑演示示意图，图2是两种模式处理的时序演示示意图，采用这种异步交互过程当服务器数据没有返回时，用户可以继续浏览或者交互，不必等待。AJAX技术将服务器端采用服务程序放在次要位置，更侧重返回的数据内容。
二．Ajax技术的框架实现
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。IE（IE5以上）最早允许开发人员从Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。Mozilla（Mozilla1.0以上及NetScape7以上）是创建它自己的继承XML代理类（XMLHttpRequest类）。Opera在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。
本文通过一个单词输入提示系统演示Ajax技术，共包含4个文件index.htm, ajaxserver.js, data.asp, xx.mdb 分别实现页面显示, XMLHttpRequest对象连接用户界面和发送接受数据,数据服务程序,以及数据库.涉及了HTML,JavaScript,VBScript,SQL等语言,通过一系列的构件协作,实现当用户输入字符串,由XMLHttpRequest对象自动发送查询命令,获取经由IIS解析后xx.mdb数据后的数据返回到用户界面实时显示出来.以下是对这一过程的详细分析.
编写XMLHttpRequest对象的初始化函数InitAjax():
function InitAjax()
{
var ajax=false;
try
{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest!='undefined')
{
ajax = new XMLHttpRequest();
}
return ajax;
}
以下表格列出XMLHttpRequest对象的方法和属性:
XMLHttpRequest 对象方法
方法 描述
abort() 停止当前请求
getAllResponseHeaders() 作为字符串返问完整的headers
getResponseHeader("headerLabel") 作为字符串返问单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数
send(content) 发送请求
setRequestHeader("label", "value") 设置header并和请求一起发送
XMLHttpRequest 对象属性
属性 描述
onreadystatechange 状态改变的事件触发器
readyState 对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
status 服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功"
statusText 服务器返回的状态文本信息
以下代码显示了一个XMLHttpRequest对象应用的基本程序结构
function SearchDic()//可在键盘响应时执行此函数,使用户感到立即被执行.
{
if (postForm!=null&&postForm!=undefined)// postForm是用户输入对话框对象,需要预先定义
{
var ReturnText=null;
var url = "data.asp";
var postStr = postForm.value;//获取用户输入的字符串
if (postStr)
{
var ajax = InitAjax();//用XMLHttpRequest对象初始化
ajax.open("POST", url, true); //设置open方法,在此并未执行,send是执行语句.
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置发送的head信息
ajax.send(postStr);//将需要发送的数据用send方法传送到url指定的地址
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4 && ajax.status == 200) //接受数据完毕且正确
{
ReturnText = ajax.responseText;
msg.innerHTML=ReturnText;//获取接受到的数据,用页面元素msg显示出来.
}
}
}
else
{
msg.innerHTML = "请输入单词";
}
}
else
{
msg.innerHTML = "窗体载入中...";
}
}
data.asp接受ajax.send(postStr)语句发送的数据,在IIS(Internet Information Servive)的支持下执行一定的运算(如查询数据库)的运算返回数据结果. ajax.responseText属性存储了这些集成了数据的HTML代码片段,然后存储到ReturnText变量中,被立即显示到页面上.这个过程在JavaScript的支持下由浏览器在后台完成,因此客户界面看不到内在的过程.
data.asp获取用户输入字符串,并在ACCESS数据库中查找中文解释,同时返回最多8个相关的提示单词.代码如下:
"
do while not rs.eof
response.write "" & rs(1) & "" & rs(2) & ""
rs.movenext
loop
response.write ""
rs.close
conn.close
%>
就IIS而言,VBScript的应用比JavaScript广泛.Request.BinaryRead(Request.TotalBytes)函数获取ajax.send(postStr)发送来的数据存储到wd1中,vb脚本利用ADODB接口和SQL语言从ACCESS数据库xx.mdb中检索与wd1相关单词,将检索结果用response.write方法返回到ajax引擎,被ajax.responseText获取.返回的数据是等格式化了的HTML语言片段. 这些语言片段最终将通过JavaScript语句被实时显示到客户浏览器上.
web页面中的定义:
下列JavaScrip脚本代码显示了如何获取用户输入的字符串及如何将检索结果显示
var postForm = null;
var msg = null;
postForm = document.FormArea.TextArea;
msg = document.getElementById("msg");
……
msg.innerHTML=ReturnText;
运行后的效果图如下:
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），而在以前两者是没有清晰的界限的，数据与呈现分离的分离，有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理。
三．Ajax基于事件的隐式调用风格
基于事件的隐式调用风格的思想是构件不直接调用一个过程，而是触发一个或多个事件。系统中的其它构件中的过程在一个或多个事件中注册，当一个事件被触发，系统自动调用在这个事件中注册的所有过程，这样，一个事件的触发就导致了另一模块中的过程的调用。
Ajax技术即是在用户在当前窗口动作的过程中触发一个或者多个脚本服务程序,通过一系列的构件的协同调用和客户窗口、客户脚本、Web服务器、数据库服务器之间的数据传递,最终返回到窗口中需要的数据.用户不用主动请求与服务器的连接响应,不用等待与服务器通讯的时间,得到更好的使用体验.
四．结论
基于Ajax的web应用具有传统web应用无法比拟的优势：减轻服务器负担；减少用户实际和心理等待时间；更好的用户体验；减轻带宽的负担；节约空间和带宽租用成本；基于标准化的和被广泛支持和应用；不需要插件和下载小程序支持等。
Ajax技术对软件结构体系的一个有益补充，完善了三层网络访问模式，为软件体系结构增添了色彩。
Ajax理念的出现，揭开了无刷新时代的序幕，为web应用程序的出现奠定了一定的基础。从google message，google maps，google文档等的成功应用看出Ajax技术势必会成为影响web发展的中坚力量，并对人们的网络生活方式产生深远的影响，称得上是web技术发展上的一个里程碑。
参考文献:
[1] 连黎明.欧阳钟辉《AJAX技术及其框架实现》软件导刊2006.9
[2] 史胜辉 《ajax技术在web客户端开发中的应用》中国管理信息化 2006.1
[3] 连黎明等《ajax异步通讯机制在web开发中的应用》泉州师范学院学报 2006.10
[4] 朱德利《web2.0的技术特点和信息传播思想》现代情报 2005.12
[5] Jesse James Garrett.Ajax:A New Approach to Web Application http://adaptivepath.com/publication/essays/achives/00385.php,2005
扫一扫
2476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
