基于AJAX的网页无刷新技术

来源:用户上传      作者:

　　【摘要】人们在上网浏览网页切换页面时经常出现这种情况，即页面中大部分内容是不变的，只有一少部分需要更新。从技术上来说，如果重新载入这些不变的数据，就会浪费网络和服务器的资源，同时也会延长用户的等待时间。因此近年来，网页的无刷新技术得到了比较广泛的应用。本文分析了基于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 <=10;j++)
　　{
　　online.deleteRow();
　　}
　　(刷新在线列表)
　　 for(var i=0;i<=10;i++)
　　{
　　var b=online.insertRow();
　　 var c=b.insertCell();
　　c.innerHTML=""+obj[i].getAttribute("Value")+"";
　　}
　　(刷新离线列表)
　　obj=root.selectNodes("UserName[@On=’false’]");
　　offlinecount.innerHTML=obj.length;
　　var nRow=offline.rows.length;
　　 for(j=0;j<=10;j++)
　　{
　　offline.deleteRow();
　　 }
　　for(i=0;i <=10;i++)
　　{
　　var b=offline.insertRow();
　　 var c=b.insertCell();
　　c.innerHTML=""+obj[i].getAttribute("Value")+"";
　　}
　　getOnlineUser();
　　getonlineuser.asp文件内容：

　　Dim rv
　　Dim rs，strSql
　　（更新当前用户的在线状态）
　　strSql="Update onlineuser Set lastdate=’" & now & "’ Where userid=’" & username & "’" conn.execute(strSql)
　　（删除无活动用户）
　　strSql="delete from OnlineUser where datediff(’n’，lastdate，now())>2"
　　conn.execute(strSql)
　　（获取在线用户）
　　strSql="Select * From OnlineUser Order By userid"
　　Set rs=conn.execute(strSql)
　　rv="" & vbCrlf
　　rv=rv & "" & vbCrlf
　　rv=rv & "" & vbCrlf
　　While Not rs.Eof
　　rv=rv & "" & trim(rs(1)) & "" & vbCrlf
　　 rs.movenext
　　Wend
　　rv=rv & "" & vbCrlf
　　rs.close：Set rs=Nothing
　　 rv=rv & "" & vbCrlf
　　（返回xml文件至客户端给online.asp文件中的getOnlineUser()函数） Response.ContentType = "text/xml"
　　 Response.CharSet = "GB2312"
　　response.write rv
　　
　　四、结论
　　
　　通过以上的分析及实际应用，对于开发人员、终端用户、ISP来说，AJAX是大有益处的。
　　第一，减轻服务器的负担。“按需取数据”是AJAX的原则，这不仅可以将冗余请求减到最少，而且也能最大程度地减少服务器的负担。
　　第二，可以使用户的等待时间减少。尤其是不会像Reload事件那样，当要读取大量数据的时候，就会出项白屏的现象。AJAX使用XMLHTTP对象发送请求并得到服务器响应，在不重新载入整个页面的情况下更新页面。因此在读取数据的过程中，用户所面对的不再是白屏，而是原来的页面内容。当数据接收完毕之后才更新相应部分的内容。这种更新的速度非常快，几乎就是一瞬间，用户几乎感觉不到。
　　第三，使效率大大提高。可以利用客户端闲置的能力来处理以前一些服务器负担的工作，从而减轻服务器和带宽的负担。
　　第四，可以调用外部数据。AJAX技术也不是完美的，也存在着一些突出的缺陷。AJAX大量地使用了取决于浏览器支持的AJAX和JS（Javascript）引擎。因此，使用 AJAX就必须要测试针对各个浏览器的兼容性。AJAX在更新页面内容的时候，并没有对整个页面进行刷新，因此后退功能在网页中是无效的，还有一些用户经常弄不清楚数据是否已经被更新过，这就需要在明显位置具有“数据已更新”的提醒字样，起到提醒用户的作用。在对流媒体的支持方面，相比JavaApplet和FLASH来说，AJAX也是较差的。
　　
　　【参考文献】
　　[1]Nicholas C.Zakas，Jeremy McPeak，Joe Fawcett著，徐锋，吴兰陟译. Ajax高级程序设计[M]. 北京：人民邮电出版社，2006.
　　[2]顾兵.XML实用技术教程[M].北京：清华大学出版社，2007.
　　[3]刘好增，张坤.ASP动态网站开发实践教程[M].北京：清华大学出版社，2007.
　　【收稿日期】2010年9月5日
　　【作者简介】李凤祥（1972― ）：男，辽宁凌源人，沈阳铁路机械学校信息部讲师，研究方向：计算机教学。

转载注明来源:https://www.xzbu.com/1/view-196982.htm