ＡＪＡＸ動(dòng)態(tài)無刷新技術(shù)在企業(yè)網(wǎng)中的應(yīng)用

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

主題詞：AJAX；無刷新

1引言

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

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

2 AJAX技術(shù)

2.1 AJAX技術(shù)簡介

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

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

AJAX技術(shù)優(yōu)點(diǎn)是：首先是無需重新裝載整個(gè)頁面便能向服務(wù)器發(fā)送請(qǐng)求；其次是對(duì)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動(dòng)態(tài)無刷新技術(shù)實(shí)現(xiàn)方法及程序?qū)崿F(xiàn)

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

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

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

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

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

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

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請(qǐng)求對(duì)象用哪一個(gè)JavaScript函數(shù)處理這個(gè)響應(yīng)。可以將對(duì)象的狀態(tài)屬性設(shè)置為要使用的JavaScript函數(shù)名，如：

http_request.onreadystatechange = nameOfTheFunction;

http_request.onreadystatechange = function(){};

在定義了如何處理響應(yīng)后，就要發(fā)送請(qǐng)求了。可以調(diào)用HTTP請(qǐng)求類的open()和send()方法， 如下所示：

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

http_request.send(1);

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

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

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

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

http_request.onreadystatechange = alertContents();

這個(gè)函數(shù)的功能是首先檢查請(qǐng)求的狀態(tài)。如果狀態(tài)值是4，意味著一個(gè)完整的服務(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) { }

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

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

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

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

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

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

120

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

在alertContents()中，添加代碼：

var xmldoc = http_request.responseXML;

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

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

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

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

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

4 結(jié)論

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

參考文獻(xiàn)

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

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