高煥江　高鵬

摘要：為了解決傳統(tǒng)的WEB應(yīng)用程序在客戶端和服務(wù)器通信模式方面存在的缺陷，提高WEB應(yīng)用程序的交互性能，可以采用模態(tài)窗口或者Ajax技術(shù)啟動新線程來處理客戶端的不定時請求，在對這兩種技術(shù)作詳細介紹的基礎(chǔ)上，總結(jié)了他們各自的優(yōu)劣之處。

關(guān)鍵詞：WEB程序;模態(tài)窗口;Ajax;模式研究

中圖分類號： TP399? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2019）25-0018-02

Abstract：To solve the problems which exist in the client and server communication mode of WEB applications， and enhance its interactive performance， this paper proposed two technology methods， the first is Modal Dialog Window， and the second is Ajax， both methods can be used to process the indefinite request of web clients. Based on the detailed introduction of the two methods， this paper summarizes the advantage and disadvantage of each method.

Key words： WEB application; modal dialog window;? Ajax; method research

WEB應(yīng)用程序是基于現(xiàn)代網(wǎng)絡(luò)通信技術(shù)的最流行的信息化應(yīng)用之一。傳統(tǒng)WEB應(yīng)用程序在客戶端和服務(wù)器的通信模式方面存在一些缺陷，即客戶端每一次很小的數(shù)據(jù)請求都強制進行提交、等待、重新顯示的模式，所有步驟都隸屬于同一主進程。這種工作模式使得用戶在提交請求前錄入的有效數(shù)據(jù)容易丟失，系統(tǒng)閃爍現(xiàn)象嚴重，在響應(yīng)靈敏性和交互性方面大打折扣。解決此類問題必須通過啟動新進程來處理客戶端的不定時數(shù)據(jù)請求。現(xiàn)有兩種方案：一種是通過調(diào)用模態(tài)窗口啟動同步進程;另一種是通過Ajax技術(shù)實現(xiàn)異步通信。

1 showModalDailog模態(tài)窗口方式

IE4.0以上的瀏覽器提供了一種簡便的方法來啟動新的客戶端進程，這就是使用showModalDialog（）方法來彈出模態(tài)窗口。若客戶端需要在主進程執(zhí)行的過程中獲取一些外部資源（如存儲于數(shù)據(jù)庫中的字段）而不想提交本頁面也不想改變服務(wù)器端主進程的執(zhí)行，便可以把這些工作交給模態(tài)窗口來處理。模態(tài)窗口可以獲得主窗口的句柄，也可以把處理后的結(jié)果以字符串方式返回給主頁面，其工作流程如下圖所示：

從工作流程圖中可以看出，客戶端進程會在調(diào)用模態(tài)窗口處中止執(zhí)行，在這期間腳本在模態(tài)窗口中自由運行而用戶在主頁面中不能進行任何操作。等到模態(tài)窗口關(guān)閉返回數(shù)據(jù)后客戶端主進程恢復(fù)。

使用腳本語言JavaScript調(diào)用模態(tài)窗口的語法如下：

var returnValue = showModalDialog（URL[， arguments] [， features]）

參數(shù)說明：

URL：提交給模態(tài)窗口的新進程的處理程序;

features：模態(tài)窗口的顯示參數(shù)。

returnValue：模態(tài)窗口返回給客戶端的數(shù)據(jù)（一般為數(shù)字型或字符型）;

可以看出模態(tài)窗口具有一些非常特殊的優(yōu)勢。最明顯的是體現(xiàn)在參數(shù)傳遞上。如果傳遞普通的字符串可以直接附加在URL上進行傳遞，而特殊類型的數(shù)據(jù)傳遞可以設(shè)置arguments參數(shù)。如客戶端可以通過以下方式傳遞主窗口：showModalDialog（“implement.asp”， window， “…”），而在模態(tài)窗口處理頁面implement.asp中可以用var window1 = window.dialogArgument進行參數(shù)的接收，從而可以獲得對主窗口的完全控制權(quán)，也就是說可以調(diào)用主窗口的所有控件，函數(shù)以及事件。如果模態(tài)窗口向客戶端返回數(shù)據(jù)并自動關(guān)閉，可以使用以下代碼

window.returnValue = result

window.close（）

由于模態(tài)窗口本質(zhì)上是一種可自動關(guān)閉的對話框，因而在調(diào)用過程中會出現(xiàn)閃爍問題，我們可以通過設(shè)置顯示參數(shù)基本解決該問題，如把第三個features參數(shù)設(shè)為“ dialogHeight：0px;dialogWidth：0px;dialogLeft： 0px;dialogTop：0px;”。

2 Ajax方式

Ajax是Asynchronous JavaScript and XML的縮寫，它作為WEB2.0的標志，其優(yōu)良的設(shè)計模式，良好的用戶體驗以及眾多瀏覽器廠商的支持越來越受到程序員的關(guān)注。與模態(tài)窗口方式相比，Ajax技術(shù)在提高web程序交互性方面的最大優(yōu)勢是采用異步進程的方式，請求外部資源時不需中斷客戶端進程，從而大大減少用戶的等待時間，提高了系統(tǒng)的效率。

Ajax的核心是XMLHttpRequest對象，它是一種可以被大多數(shù)瀏覽器創(chuàng)建的特殊對象，通過它可以方便的以后臺異步方式與服務(wù)器進行數(shù)據(jù)交換而不用提交頁面。其具體實現(xiàn)步驟如下所述：

（1） 創(chuàng)建客戶端界面，通過某個事件觸發(fā)JavaScript調(diào)用Ajax引擎

（2） 初始化請求對象XMLHTTPRequest。通?？梢允褂靡韵陆y(tǒng)一代碼：

function getXmlHttpRequest（）{

try{return new XMLHttpRequest（）;}

catch （e）{try{return new ActiveXObject（'Msxm12.XMLHTTP'）;}

}

（3） 發(fā)出數(shù)據(jù)請求。客戶端數(shù)據(jù)首先發(fā)送給XmlHttpRequest對象，該對象捕獲數(shù)據(jù)并異步向服務(wù)器發(fā)送請求。此時客戶端不會發(fā)生閃爍，延遲和消失，因而可以繼續(xù)使用程序。該步驟可用以下代碼實現(xiàn)：

function senddata（）{

var url=" implement.asp？param=" + value;

xmlHttp= getXmlHttpRequest（）;

xmlHttp.open（"GET"， url ， true）;

xmlHttp.send（null）;

xmlHttp.onreadystatechanged = statechanged;

}

其中，XmlHttpRequest對象open方法的第三個參數(shù)可以設(shè)置數(shù)據(jù)請求是異步還是同步。但在使用Ajax時傳遞的數(shù)據(jù)類型只能為數(shù)字或者字符類而不能是對象類，處理程序不能獲得對客戶端的完全控制。

（4） 應(yīng)用程序處理請求并向客戶端返回結(jié)果。在此處響應(yīng)程序用Request對象接收數(shù)據(jù)，進行業(yè)務(wù)邏輯處理。由于無法直接得到客戶端的句柄，必須對返回數(shù)據(jù)進行良好的組織。返回的結(jié)果可以有多種形式，包括：Html、JSON、文本數(shù)據(jù)和XML文檔等。

（5） 客戶端接收結(jié)果。當客戶端收到服務(wù)器返回結(jié)果實會觸發(fā)XmlHttpRequest對象的onreadystatechanged事件，因而只要在該事件中設(shè)計回調(diào)函數(shù)對該對象的狀態(tài)進行捕捉即可。對于XML文檔方式返回的結(jié)果用XmlHttpRequest對象的responseXML屬性接收，其他結(jié)果用responseText屬性接收。

（6） 完成對結(jié)果的處理。綜合使用HTML+javaScript+CSS更新客戶端需要更新的內(nèi)容。

Ajax的工作流程可以用以下流程圖表示：

從以上論述中我們可以知道模態(tài)窗口和Ajax技術(shù)都能提高web應(yīng)用程序交互性，但兩者在許多方面存在著差異，現(xiàn)總結(jié)如下：

4 結(jié)語

模態(tài)窗口和Ajax技術(shù)是在web應(yīng)用程序中啟動新進程的兩種技術(shù)，而它們又各有優(yōu)劣。由于模態(tài)窗口進程的同步性，它主要用于B/S型事務(wù)處理系統(tǒng)等業(yè)務(wù)邏輯具有明顯順序特征的系統(tǒng)，而后者則主要應(yīng)用于網(wǎng)站等用戶體驗要求比較高的場合。

參考文獻：

[1] 唐克，王猛. Web應(yīng)用軟件系統(tǒng)的性能分析與優(yōu)化[J]. 電腦開發(fā)與應(yīng)用， 2014 （7）：42-44.

[2] 吳吉義，平玲娣. Web2.0主流應(yīng)用技術(shù)——Ajax性能分析[J]. 計算機工程與設(shè)計，2008，4（29）： 1913-1915.

[3] 張子平，謝小林. 基于Ajax技術(shù)實現(xiàn)搜索引擎中的搜索提示功能[J]. 東華理工大學學報，2008，3（31）： 81-83.

[4] 李剛，宋偉.征服Ajax + lucene構(gòu)建搜索引擎[M]. 北京郵電出版社，2006： 146-168.

[5] 徐紅勤. Ajax在網(wǎng)絡(luò)考試系統(tǒng)中的應(yīng)用[J]. 計算機應(yīng)用，2007（6）：349-351.

[6] 譚明紅，王成亮. 基于頁面差異模式的Ajax框架設(shè)計及實現(xiàn)[J].微電子學與計算機，2008（25）：106-108.

【通聯(lián)編輯：唐一東】