基于AJAX的網頁無刷新技術:網頁刷新器
發(fā)布時間:2020-02-14 來源: 歷史回眸 點擊:
【摘要】人們在上網瀏覽網頁切換頁面時經常出現(xiàn)這種情況,即頁面中大部分內容是不變的,只有一少部分需要更新。從技術上來說,如果重新載入這些不變的數據,就會浪費網絡和服務器的資源,同時也會延長用戶的等待時間。因此近年來,網頁的無刷新技術得到了比較廣泛的應用。本文分析了基于AJAX的網頁無刷新技術,然后給出了應用該技術的主要代碼。
【關鍵詞】AJAX;ASP;JS
【中圖分類號】TP393【文獻標識碼】A
【文章編號】1007―4309(2010)10―0084―2
一、 總述
伴隨著計算機網絡等信息技術的發(fā)展,通過互聯(lián)網獲取信息是現(xiàn)在人們認識世界、了解世界的主要方法之一。人們無論在單位還是在家里都可以通過上網得到及時準確的信息。人們在瀏覽網頁時總是希望打開的速度能夠像訪問本機的硬盤數據一樣快。但是目前,由于用戶數量多、網絡的帶寬有限等原因,用戶打開網頁的時間還是比較長的。于是人們通過各種技術手段來縮短打開網頁的時間。本文將要分析的就是一種基于AJAX技術的網頁無刷新技術,這種技術可以使用戶在一些情況下切換頁面時極大地提高訪問速度。
網頁無刷新技術是指在進行頁面的切換時,只從網站的服務器載入發(fā)生變化的數據(這在瀏覽網頁時是經常遇到的情況),而不變的內容無須重新載入。對于傳統(tǒng)方法,在切換頁面時,所有內容都需要從服務器端重新載入到本地的計算機,這樣浪費了大量的網絡帶寬,加重了服務器的負擔,用戶也需要花費更多的等待時間。AJAX(Asynchronous JavaScript and XML)包括了XHTML和CSS、XML和 XSTL、Javascript、DOM(Document Object Model)、XMLHttpRequest等技術,實際上是多種技術的綜合。XHTML和CSS能夠實現(xiàn)標準化呈現(xiàn);XML和XSTL能夠進行數據交換與處理;Javascript能夠綁定和處理所有數據;DOM能夠實現(xiàn)動態(tài)顯示和交互;XMLHttpRequest能夠對對象進行異步數據讀取。事實上,在沒有提出AJAX之前,業(yè)界只是單獨地使用上述技術,而沒有對其進行綜合使用。隨著網頁無刷新技術的應用及其廣泛發(fā)展,人們也開始逐漸使用AJAX了。
二、相關技術介紹
傳統(tǒng)的Web應用采用同步交互過程,在這種情形下,用戶首先向HTTP服務器觸發(fā)一個行為或請求的呼求。反過來,服務器執(zhí)行某些任務,再向發(fā)出請求的用戶返回一個HTML頁面。這種用戶體驗是不連貫的,服務器在處理請求的時候,用戶多數時間處于等待的狀態(tài),屏幕內容也是一片空白。
AJAX與傳統(tǒng)Web的應用是不同的,它采用了異步交互過程。AJAX能夠消除網絡交互過程中的處理―等待―處理―等待的缺點。這是因為,它在用戶與服務器之間引入了一個中間媒介。用戶的瀏覽器在執(zhí)行任務時即裝載AJAX 引擎。AJAX引擎用JavaScript語言編寫,通常藏在一個隱藏的框架中,它負責編譯用戶界面及與服務器之間的交互。AJAX引擎是獨立于用戶與網絡服務器間的交流的,它允許用戶與應用軟件之間的交互過程異步進行,F(xiàn)在,可以用Javascript調用AJAX引擎來代替產生一個 HTTP的用戶動作,可以將不需要重新載入整個頁面的需求,如頁面導航、數據校驗、內存中的數據編輯交給AJAX來執(zhí)行。
通過XML可以規(guī)范地定義結構化數據,使網上傳輸的數據和文檔符合統(tǒng)一的標準。用XML表述的數據和文檔,可以很容易地讓所有程序共享。
DOM是一組API,是提供給HTML和XML使用的,它提供了文件的表述結構,使用它也可以改變其中的內容和可見物。腳本語言要想同頁面進行交互,需要通過DOM才能實現(xiàn)。
三、無刷新網頁的實現(xiàn)
下面就以為某公司建立的內部網站中的一個無刷新網頁為例說明一下AJAX的應用。公司OA中的即時通訊原來采用窗口的定時刷新自動獲取消息等信息,但采用這種技術的缺點很明顯,不僅性能低下,而且由于需要頻繁刷新頁面,用戶也不太滿意。采用AJAX技術后得到了很好的改善。實現(xiàn)此功能的所有文件包括:login.asp、online.asp、 getonlineuser.asp。
login.asp程序執(zhí)行一般的登陸操作,并將自身添加進在線用戶表(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")
。ê瘮礽nitList(),加載剛才生成的所有用戶列表)
function initList()
{
xmlDom.async=false;
xmlDom.loadXML("");
}
。ê瘮祏pdateList(),刷新在線情況顯示)
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 Dim rv
Dim rs,strSql
。ǜ庐斍坝脩舻脑诰狀態(tài))
strSql="Update onlineuser Set lastdate=’" & now & "’ Where userid=’" & username & "’" conn.execute(strSql)
。▌h除無活動用戶)
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()函數) Response.ContentType = "text/xml"
Response.CharSet = "GB2312"
response.write rv
四、結論
通過以上的分析及實際應用,對于開發(fā)人員、終端用戶、ISP來說,AJAX是大有益處的。
第一,減輕服務器的負擔!鞍葱枞祿笔茿JAX的原則,這不僅可以將冗余請求減到最少,而且也能最大程度地減少服務器的負擔。
第二,可以使用戶的等待時間減少。尤其是不會像Reload事件那樣,當要讀取大量數據的時候,就會出項白屏的現(xiàn)象。AJAX使用XMLHTTP對象發(fā)送請求并得到服務器響應,在不重新載入整個頁面的情況下更新頁面。因此在讀取數據的過程中,用戶所面對的不再是白屏,而是原來的頁面內容。當數據接收完畢之后才更新相應部分的內容。這種更新的速度非?欤瑤缀蹙褪且凰查g,用戶幾乎感覺不到。
第三,使效率大大提高。可以利用客戶端閑置的能力來處理以前一些服務器負擔的工作,從而減輕服務器和帶寬的負擔。
第四,可以調用外部數據。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動態(tài)網站開發(fā)實踐教程[M].北京:清華大學出版社,2007.
【收稿日期】2010年9月5日
【作者簡介】李鳳祥(1972― ):男,遼寧凌源人,沈陽鐵路機械學校信息部講師,研究方向:計算機教學。
相關熱詞搜索:刷新 網頁 技術 基于AJAX的網頁無刷新技術 ajax無刷新技術 ajax無刷新更新數據
熱點文章閱讀