摘要： 本文介紹了基于ASP.NET的AJAX動態(tài)無刷新技術(shù)在企業(yè)網(wǎng)的實現(xiàn)方法，利用JavaScript結(jié)合XML，實現(xiàn)了網(wǎng)頁動態(tài)無閃爍刷新。

主題詞：AJAX；無刷新

1引言

在傳統(tǒng)網(wǎng)頁中，用戶提交信息給網(wǎng)站服務(wù)器，將花費大量的等待時間。即使客戶端和服務(wù)器的連接狀況非常好，加載新頁面時，瀏覽器中仍會有一個顯示空白頁面的\"閃爍\"過程。這是因為瀏覽器需要清除原有的內(nèi)容并重新寫入新的內(nèi)容，即使頁面的一小部分進(jìn)行更改，整個頁面都要刷新。

隨著google Maps等無閃刷新技術(shù)的實現(xiàn)，使人們意識到其重要性。利用AJAX (異步JavaScript 和XML)，通過調(diào)用HttpRequest實現(xiàn)與服務(wù)器的異步通訊，并最終在網(wǎng)頁中實現(xiàn)無閃刷新界面。

2 AJAX技術(shù)

2.1 AJAX技術(shù)簡介

AJAX是多種技術(shù)的綜合，使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)，使用DOM實現(xiàn)動態(tài)顯示和交互，使用XML、XSTL進(jìn)行數(shù)據(jù)交換與處理，使用XMLHttpRequest對象進(jìn)行異步數(shù)據(jù)讀取，使用 Javascript 綁定和處理所有數(shù)據(jù)。它打破了頁面重載的慣例技術(shù)組合，因此AJAX已成為Web開發(fā)的重要工具。

2.2 AJAX技術(shù)優(yōu)勢

AJAX技術(shù)優(yōu)點是：首先是無需重新裝載整個頁面便能向服務(wù)器發(fā)送請求；其次是對XML文檔的解析和處理。與傳統(tǒng)的asp無刷新技術(shù)相比：

AJAX技術(shù)支持各種瀏覽器，兼容性好，使用的iframe并非所有的瀏覽器都支持;傳統(tǒng)的無刷新技術(shù)需要返回合法的javascript程序端，調(diào)試不便;AJAX的優(yōu)勢在于將各種技術(shù)有機(jī)的結(jié)合在一起;AJAX應(yīng)用程序無需客戶端進(jìn)行任何形式的安裝部署，因而其優(yōu)勢是Java Applet和ActiveX等需要下載、安裝插件的技術(shù)所無法比擬的。

3 AJAX動態(tài)無刷新技術(shù)實現(xiàn)方法及程序?qū)崿F(xiàn)

3.1 AJAX動態(tài)無刷新技術(shù)實現(xiàn)方法

3.1.1 AJAX服務(wù)器端安裝與配置

在服務(wù)器端安裝ASP.net AJAX，配置AJAX信息。

3.1.2 制作發(fā)送HTTP請求

為了用JavaScript向服務(wù)器發(fā)送一個HTTP請求，需要一個類實例。類首先由IE瀏覽器以ActiveX對象引入，被稱為XMLHTTP。它支持微軟的ActiveX對象所提供的方法和屬性。

創(chuàng)建一個跨瀏覽器的這樣的類實例，代碼如下：

if (window.XMLHttpRequest) {http_request = new XMLHttpRequest();}

else if (window.ActiveXObject) {http_request = new ActiveXObject(\"Microsoft.XMLHTTP\");}

http_request = new XMLHttpRequest();

http_request.overrideMimeType('text/xml');

當(dāng)收到服務(wù)器的響應(yīng)后，需要告訴HTTP請求對象用哪一個JavaScript函數(shù)處理這個響應(yīng)?？梢詫ο蟮臓顟B(tài)屬性設(shè)置為要使用的JavaScript函數(shù)名，如：

http_request.onreadystatechange = nameOfTheFunction;

http_request.onreadystatechange = function(){};

在定義了如何處理響應(yīng)后，就要發(fā)送請求了?？梢哉{(diào)用HTTP請求類的open()和send()方法， 如下所示：

http_request.open('GET'， 'file'， true);

http_request.send(1);

open()的第一個參數(shù)是HTTP請求方式 - GET，POS，HEAD 或任何服務(wù)器所支持的您想調(diào)用的方式。第二個參數(shù)是請求頁面的URL。由于自身安全特性的限制，第三個參數(shù)設(shè)置請求是否為異步模式。如果是TRUE，JavaScript函數(shù)將繼續(xù)執(zhí)行，而不等待服務(wù)器響應(yīng).這就是\"AJAX\"中的\"A\"。

如果第一個參數(shù)是\"POST\"，send()方法的參數(shù)可以是任何想送給服務(wù)器的數(shù)據(jù)。這時數(shù)據(jù)要以字符串的形式送給服務(wù)器。

3.1.3 處理服務(wù)器的響應(yīng)

當(dāng)發(fā)送請求時，要指定處理響應(yīng)的JavaScript函數(shù)名。

http_request.onreadystatechange = alertContents();

這個函數(shù)的功能是首先檢查請求的狀態(tài)。如果狀態(tài)值是4，意味著一個完整的服務(wù)器響應(yīng)已經(jīng)收到，可以處理該響應(yīng)。

if (http_request.readyState == 4) {}

函數(shù)檢查HTTP服務(wù)器響應(yīng)的狀態(tài)值。著重處理值為200 OK的響應(yīng)。

if (http_request.status == 200) { }

在檢查完請求的狀態(tài)值和響應(yīng)的HTTP狀態(tài)值后，就可以處理從服務(wù)器得到的數(shù)據(jù)了。有兩種方式可以得到這些數(shù)據(jù)：

http_request.responseText - 以文本字符串的方式返回服務(wù)器的響應(yīng)；

http_request.responseXML - 以XMLDocument對象方式返回響應(yīng)， 使用JScript DOM函數(shù)處理XML文檔對象。

3.1.4 \"X-文檔\" --- 處理XML響應(yīng)

當(dāng)服務(wù)器對HTTP請求的響應(yīng)被收到后，會調(diào)用請求對象的responseXML屬性。

首先，新建一個XML文件，源代碼如下所示：

120

在ASP.net文件中添加代碼：onclick=\"makeRequest('1.xml')\"

在alertContents()中，添加代碼：

var xmldoc = http_request.responseXML;

var root_node = xmldoc.getElementsByTagName('root').item(0);

利用responseXML提供的XMLDocument對象并用DOM方法獲取存于XML文件中的內(nèi)容。

3.2 AJAX動態(tài)無刷新技術(shù)在企業(yè)網(wǎng)應(yīng)用實例

我們利用AJAX結(jié)合SVG技術(shù)實現(xiàn)了實時監(jiān)控圖表，圖表的指針會根據(jù)服務(wù)器的數(shù)據(jù)實時擺動。傳統(tǒng)頁面的圖片都是靜態(tài)的，用戶刷新一次頁面，軟件根據(jù)服務(wù)器端的數(shù)據(jù)重新生成圖片再顯示給用戶。但是對于實時性要求比較高的監(jiān)控系統(tǒng)來說，不可能要求用戶隨時刷新頁面，或者使用 JavaScript 來定時刷新頁面，這樣效果非常差，而且服務(wù)器端反復(fù)在內(nèi)存或硬盤中生成圖片，用戶數(shù)量多時，系統(tǒng)會導(dǎo)致內(nèi)存溢出。

使用AJAX技術(shù)，無需頁面刷新，無需重新生成圖片，并且網(wǎng)絡(luò)端、服務(wù)器端、用戶端的開銷都非常少，系統(tǒng)風(fēng)險小。

4 結(jié)論

AJAX 和各種新興的 Web 2.0 技術(shù)的出現(xiàn)大大的豐富了Web程序員的技術(shù)力量，利用AJAX結(jié)合SVG等技術(shù)實現(xiàn)的網(wǎng)上動態(tài)實時無刷新監(jiān)控圖表，性能優(yōu)越、效果突出。替代了以往用戶使用 CS 軟件才能實現(xiàn)的實時監(jiān)控圖表的功能，而且更加完美和高效。

參考文獻(xiàn)

[1] 楊仁和 AJAX設(shè)計模式 電子工業(yè)出版社 2006年

[2] 李敏波 CSS與HTML設(shè)計清華大學(xué)出版社 2005年