【摘要】人們?cè)谏暇W(wǎng)瀏覽網(wǎng)頁(yè)切換頁(yè)面時(shí)經(jīng)常出現(xiàn)這種情況，即頁(yè)面中大部分內(nèi)容是不變的，只有一少部分需要更新。從技術(shù)上來(lái)說(shuō)，如果重新載入這些不變的數(shù)據(jù)，就會(huì)浪費(fèi)網(wǎng)絡(luò)和服務(wù)器的資源，同時(shí)也會(huì)延長(zhǎng)用戶的等待時(shí)間。因此近年來(lái)，網(wǎng)頁(yè)的無(wú)刷新技術(shù)得到了比較廣泛的應(yīng)用。本文分析了基于AJAX的網(wǎng)頁(yè)無(wú)刷新技術(shù)，然后給出了應(yīng)用該技術(shù)的主要代碼。
　　【關(guān)鍵詞】AJAX；ASP；JS
　　【中圖分類號(hào)】TP393【文獻(xiàn)標(biāo)識(shí)碼】A
　　【文章編號(hào)】1007―4309（2010）10―0084―2
　　
　　一、 總述
　　
　　伴隨著計(jì)算機(jī)網(wǎng)絡(luò)等信息技術(shù)的發(fā)展，通過(guò)互聯(lián)網(wǎng)獲取信息是現(xiàn)在人們認(rèn)識(shí)世界、了解世界的主要方法之一。人們無(wú)論在單位還是在家里都可以通過(guò)上網(wǎng)得到及時(shí)準(zhǔn)確的信息。人們?cè)跒g覽網(wǎng)頁(yè)時(shí)總是希望打開(kāi)的速度能夠像訪問(wèn)本機(jī)的硬盤(pán)數(shù)據(jù)一樣快。但是目前，由于用戶數(shù)量多、網(wǎng)絡(luò)的帶寬有限等原因，用戶打開(kāi)網(wǎng)頁(yè)的時(shí)間還是比較長(zhǎng)的。于是人們通過(guò)各種技術(shù)手段來(lái)縮短打開(kāi)網(wǎng)頁(yè)的時(shí)間。本文將要分析的就是一種基于AJAX技術(shù)的網(wǎng)頁(yè)無(wú)刷新技術(shù)，這種技術(shù)可以使用戶在一些情況下切換頁(yè)面時(shí)極大地提高訪問(wèn)速度。
　　網(wǎng)頁(yè)無(wú)刷新技術(shù)是指在進(jìn)行頁(yè)面的切換時(shí)，只從網(wǎng)站的服務(wù)器載入發(fā)生變化的數(shù)據(jù)（這在瀏覽網(wǎng)頁(yè)時(shí)是經(jīng)常遇到的情況），而不變的內(nèi)容無(wú)須重新載入。對(duì)于傳統(tǒng)方法，在切換頁(yè)面時(shí)，所有內(nèi)容都需要從服務(wù)器端重新載入到本地的計(jì)算機(jī)，這樣浪費(fèi)了大量的網(wǎng)絡(luò)帶寬，加重了服務(wù)器的負(fù)擔(dān)，用戶也需要花費(fèi)更多的等待時(shí)間。AJAX（Asynchronous JavaScript and XML）包括了XHTML和CSS、XML和 XSTL、Javascript、DOM（Document Object Model）、XMLHttpRequest等技術(shù)，實(shí)際上是多種技術(shù)的綜合。XHTML和CSS能夠?qū)崿F(xiàn)標(biāo)準(zhǔn)化呈現(xiàn)；XML和XSTL能夠進(jìn)行數(shù)據(jù)交換與處理；Javascript能夠綁定和處理所有數(shù)據(jù)；DOM能夠?qū)崿F(xiàn)動(dòng)態(tài)顯示和交互；XMLHttpRequest能夠?qū)��?duì)象進(jìn)行異步數(shù)據(jù)讀取。事實(shí)上，在沒(méi)有提出AJAX之前，業(yè)界只是單獨(dú)地使用上述技術(shù)，而沒(méi)有對(duì)其進(jìn)行綜合使用。隨著網(wǎng)頁(yè)無(wú)刷新技術(shù)的應(yīng)用及其廣泛發(fā)展，人們也開(kāi)始逐漸使用AJAX了。
　　
　　二、相關(guān)技術(shù)介紹
　　
　　傳統(tǒng)的Web應(yīng)用采用同步交互過(guò)程，在這種情形下，用戶首先向HTTP服務(wù)器觸發(fā)一個(gè)行為或請(qǐng)求的呼求。反過(guò)來(lái)，服務(wù)器執(zhí)行某些任務(wù)，再向發(fā)出請(qǐng)求的用戶返回一個(gè)HTML頁(yè)面。這種用戶體驗(yàn)是不連貫的，服務(wù)器在處理請(qǐng)求的時(shí)候，用戶多數(shù)時(shí)間處于等待的狀態(tài)，屏幕內(nèi)容也是一片空白。
　　AJAX與傳統(tǒng)Web的應(yīng)用是不同的，它采用了異步交互過(guò)程。AJAX能夠消除網(wǎng)絡(luò)交互過(guò)程中的處理―等待―處理―等待的缺點(diǎn)。這是因?yàn)�，它在用戶與服務(wù)器之間引入了一個(gè)中間媒介。用戶的瀏覽器在執(zhí)行任務(wù)時(shí)即裝載AJAX 引擎。AJAX引擎用JavaScript語(yǔ)言編寫(xiě)，通常藏在一個(gè)隱藏的框架中，它負(fù)責(zé)編譯用戶界面及與服務(wù)器之間的交互。AJAX引擎是獨(dú)立于用戶與網(wǎng)絡(luò)服務(wù)器間的交流的，它允許用戶與應(yīng)用軟件之間的交互過(guò)程異步進(jìn)行�，F(xiàn)在，可以用Javascript調(diào)用AJAX引擎來(lái)代替產(chǎn)生一個(gè) HTTP的用戶動(dòng)作，可以將不需要重新載入整個(gè)頁(yè)面的需求，如頁(yè)面導(dǎo)航、數(shù)據(jù)校驗(yàn)、內(nèi)存中的數(shù)據(jù)編輯交給AJAX來(lái)執(zhí)行。
　　通過(guò)XML可以規(guī)范地定義結(jié)構(gòu)化數(shù)據(jù)，使網(wǎng)上傳輸?shù)臄?shù)據(jù)和文檔符合統(tǒng)一的標(biāo)準(zhǔn)。用XML表述的數(shù)據(jù)和文檔，可以很容易地讓所有程序共享。
　　DOM是一組API，是提供給HTML和XML使用的，它提供了文件的表述結(jié)構(gòu)，使用它也可以改變其中的內(nèi)容和可見(jiàn)物。腳本語(yǔ)言要想同頁(yè)面進(jìn)行交互，需要通過(guò)DOM才能實(shí)現(xiàn)。
　　
　　三、無(wú)刷新網(wǎng)頁(yè)的實(shí)現(xiàn)
　　
　　下面就以為某公司建立的內(nèi)部網(wǎng)站中的一個(gè)無(wú)刷新網(wǎng)頁(yè)為例說(shuō)明一下AJAX的應(yīng)用。公司OA中的即時(shí)通訊原來(lái)采用窗口的定時(shí)刷新自動(dòng)獲取消息等信息，但采用這種技術(shù)的缺點(diǎn)很明顯，不僅性能低下，而且由于需要頻繁刷新頁(yè)面，用戶也不太滿意。采用AJAX技術(shù)后得到了很好的改善。實(shí)現(xiàn)此功能的所有文件包括：login.asp、online.asp、 getonlineuser.asp。
　　login.asp程序執(zhí)行一般的登陸操作，并將自身添加進(jìn)在線用戶表(onlineuser)中。用online.asp頁(yè)來(lái)顯示用戶在線情況，主要顯示在線人數(shù)、在線人員列表、離線人數(shù)、離線人員列表。主要代碼如下：
　　Dim rv
　�。ㄒ韵麓�碼是在頁(yè)面加載時(shí)，生成所有用戶列表的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")
　�。ê瘮�(shù)initList()，加載剛才生成的所有用戶列表）
　　function initList()
　　{
　　xmlDom.async=false;
　　xmlDom.loadXML("");
　　 }
　�。ê瘮�(shù)updateList()，刷新在線情況顯示）
　　function updateList()
　　 {
　　var root = xmlDom.documentElement;
　　 var obj=root.selectNodes("UserName[@On=’true’]");
　　onlinecount.innerHTML=obj.length;
　　var nRow=online.rows.length;
　�。ㄇ宄�當(dāng)前所有列表）
　　 for(j=0;j 　　Dim rv
　　Dim rs，strSql
　�。ǜ�新當(dāng)前用戶的在線狀態(tài)）
　　strSql="Update onlineuser Set lastdate=’" & now & "’ Where userid=’" & username & "’" conn.execute(strSql)
　　（刪除無(wú)活動(dòng)用戶）
　　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
　�。ǚ祷豿ml文件至客戶端給online.asp文件中的getOnlineUser()函數(shù)） Response.ContentType = "text/xml"
　　 Response.CharSet = "GB2312"
　　response.write rv
　　
　　四、結(jié)論
　　
　　通過(guò)以上的分析及實(shí)際應(yīng)用，對(duì)于開(kāi)發(fā)人員、終端用戶、ISP來(lái)說(shuō)，AJAX是大有益處的。
　　第一，減輕服務(wù)器的負(fù)擔(dān)。“按需取數(shù)據(jù)”是AJAX的原則，這不僅可以將冗余請(qǐng)求減到最少，而且也能最大程度地減少服務(wù)器的負(fù)擔(dān)。
　　第二，可以使用戶的等待時(shí)間減少。尤其是不會(huì)像Reload事件那樣，當(dāng)要讀取大量數(shù)據(jù)的時(shí)候，就會(huì)出項(xiàng)白屏的現(xiàn)象。AJAX使用XMLHTTP對(duì)象發(fā)送請(qǐng)求并得到服務(wù)器響應(yīng)，在不重新載入整個(gè)頁(yè)面的情況下更新頁(yè)面。因此在讀取數(shù)據(jù)的過(guò)程中，用戶所面對(duì)的不再是白屏，而是原來(lái)的頁(yè)面內(nèi)容。當(dāng)數(shù)據(jù)接收完畢之后才更新相應(yīng)部分的內(nèi)容。這種更新的速度非�？�，幾乎就是一瞬間，用戶幾乎感覺(jué)不到。
　　第三，使效率大大提高�？梢岳�用客戶端閑置的能力來(lái)處理以前一些服務(wù)器負(fù)擔(dān)的工作，從而減輕服務(wù)器和帶寬的負(fù)擔(dān)。
　　第四，可以調(diào)用外部數(shù)據(jù)。AJAX技術(shù)也不是完美的，也存在著一些突出的缺陷。AJAX大量地使用了取決于瀏覽器支持的AJAX和JS（Javascript）引擎。因此，使用 AJAX就必須要測(cè)試針對(duì)各個(gè)瀏覽器的兼容性。AJAX在更新頁(yè)面內(nèi)容的時(shí)候，并沒(méi)有對(duì)整個(gè)頁(yè)面進(jìn)行刷新，因此后退功能在網(wǎng)頁(yè)中是無(wú)效的，還有一些用戶經(jīng)常弄不清楚數(shù)據(jù)是否已經(jīng)被更新過(guò)，這就需要在明顯位置具有“數(shù)據(jù)已更新”的提醒字樣，起到提醒用戶的作用。在對(duì)流媒體的支持方面，相比JavaApplet和FLASH來(lái)說(shuō)，AJAX也是較差的。
　　
　　【參考文獻(xiàn)】
　　[1]Nicholas C.Zakas，Jeremy McPeak，Joe Fawcett著，徐鋒，吳蘭陟譯. Ajax高級(jí)程序設(shè)計(jì)[M]. 北京：人民郵電出版社，2006.
　　[2]顧兵.XML實(shí)用技術(shù)教程[M].北京：清華大學(xué)出版社，2007.
　　[3]劉好增，張坤.ASP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)實(shí)踐教程[M].北京：清華大學(xué)出版社，2007.
　　【收稿日期】2010年9月5日
　　【作者簡(jiǎn)介】李鳳祥（1972― ）：男，遼寧凌源人，沈陽(yáng)鐵路機(jī)械學(xué)校信息部講師，研究方向：計(jì)算機(jī)教學(xué)。

相關(guān)熱詞搜索：刷新 網(wǎng)頁(yè) 技術(shù) 基于AJAX的網(wǎng)頁(yè)無(wú)刷新技術(shù) ajax無(wú)刷新技術(shù) ajax無(wú)刷新更新數(shù)據(jù)