2010年第10期目录 本期共收录文章20篇
【摘要】人们在上网浏览网页切换页面时经常出现这种情况,即页面中大部分内容是不变的,只有一少部分需要更新。从技术上来说,如果重新载入这些不变的数据,就会浪费网络和服务器的资源,同时也会延长用户的等待时间。因此近年来,网页的无刷新技术得到了比较广泛的应用。本文分析了基于AJAX的网页无刷新技术,然后给出了应用该技术的主要代码。
中国论文网
【关键词】AJAX;ASP;JS
【中图分类号】TP393【文献标识码】A
【文章编号】1007―4309(2010)10―0084―2
一、 总述
伴随着计算机网络等信息技术的发展,通过互联网获取信息是现在人们认识世界、了解世界的主要方法之一。人们无论在单位还是在家里都可以通过上网得到及时准确的信息。人们在浏览网页时总是希望打开的速度能够像访问本机的硬盘数据一样快。但是目前,由于用户数量多、网络的带宽有限等原因,用户打开网页的时间还是比较长的。于是人们通过各种技术手段来缩短打开网页的时间。本文将要分析的就是一种基于AJAX技术的网页无刷新技术,这种技术可以使用户在一些情况下切换页面时极大地提高访问速度。
网页无刷新技术是指在进行页面的切换时,只从网站的服务器载入发生变化的数据(这在浏览网页时是经常遇到的情况),而不变的内容无须重新载入。对于传统方法,在切换页面时,所有内容都需要从服务器端重新载入到本地的计算机,这样浪费了大量的网络带宽,加重了服务器的负担,用户也需要花费更多的等待时间。AJAX(Asynchronous JavaScript and XML)包括了XHTML和CSS、XML和 XSTL、Javascript、DOM(Document Object Model)、XMLHttpRequest等技术,实际上是多种技术的综合。XHTML和CSS能够实现标准化呈现;XML和XSTL能够进行数据交换与处理;Javascript能够绑定和处理所有数据;DOM能够实现动态显示和交互;XMLHttpRequest能够对对象进行异步数据读取。事实上,在没有提出AJAX之前,业界只是单独地使用上述技术,而没有对其进行综合使用。随着网页无刷新技术的应用及其广泛发展,人们也开始逐渐使用AJAX了。
二、相关技术介绍
传统的Web应用采用同步交互过程,在这种情形下,用户首先向HTTP服务器触发一个行为或请求的呼求。反过来,服务器执行某些任务,再向发出请求的用户返回一个HTML页面。这种用户体验是不连贯的,服务器在处理请求的时候,用户多数时间处于等待的状态,屏幕内容也是一片空白。
AJAX与传统Web的应用是不同的,它采用了异步交互过程。AJAX能够消除网络交互过程中的处理―等待―处理―等待的缺点。这是因为,它在用户与服务器之间引入了一个中间媒介。用户的浏览器在执行任务时即装载AJAX 引擎。AJAX引擎用JavaScript语言编写,通常藏在一个隐藏的框架中,它负责编译用户界面及与服务器之间的交互。AJAX引擎是独立于用户与网络服务器间的交流的,它允许用户与应用软件之间的交互过程异步进行。现在,可以用Javascript调用AJAX引擎来代替产生一个 HTTP的用户动作,可以将不需要重新载入整个页面的需求,如页面导航、数据校验、内存中的数据编辑交给AJAX来执行。
通过XML可以规范地定义结构化数据,使网上传输的数据和文档符合统一的标准。用XML表述的数据和文档,可以很容易地让所有程序共享。
DOM是一组API,是提供给HTML和XML使用的,它提供了文件的表述结构,使用它也可以改变其中的内容和可见物。脚本语言要想同页面进行交互,需要通过DOM才能实现。
三、无刷新网页的实现
下面就以为某公司建立的内部网站中的一个无刷新网页为例说明一下AJAX的应用。公司OA中的即时通讯原来采用窗口的定时刷新自动获取消息等信息,但采用这种技术的缺点很明显,不仅性能低下,而且由于需要频繁刷新页面,用户也不太满意。采用AJAX技术后得到了很好的改善。实现此功能的所有文件包括:login.asp、online.asp、 getonlineuser.asp。
login.asp程序执行一般的登陆操作,并将自身添加进在线用户表(onlineuser)中。用online.asp页来显示用户在线情况,主要显示在线人数、在线人员列表、离线人数、离线人员列表。主要代码如下:
Dim rv
(以下代码是在页面加载时,生成所有用户列表的xml片段。)rv=rv & ""
strSql="Select * From Userinf Order By username"
Set rs=conn.execute(strSql)
While Not rs.Eof
rv=rv & ""
rs.movenext
Wend
rv=rv & ""
rs.close:Set rs=Nothing
var xmlDom
var xmlDom = new ActiveXObject("Microsoft.XMLDOM")
(函数initList(),加载刚才生成的所有用户列表)
function initList()
{
xmlDom.async=false;
xmlDom.loadXML("");
}
(函数updateList(),刷新在线情况显示)
function updateList()
{
var root = xmlDom.documentElement;
var obj=root.selectNodes("UserName[@On=’true’]");
onlinecount.innerHTML=obj.length;
var nRow=online.rows.length;
(清除当前所有列表)
for(j=0;j