改善傳統WEB應用程序通信模式的兩種方法研究

高煥江　高鵬

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

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

1 showModalDailog模態窗口方式

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

從工作流程圖中可以看出，客戶端進程會在調用模態窗口處中止執行，在這期間腳本在模態窗口中自由運行而用戶在主頁面中不能進行任何操作。等到模態窗口關閉返回數據后客戶端主進程恢復。

使用腳本語言JavaScript調用模態窗口的語法如下：

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

參數說明：

URL：提交給模態窗口的新進程的處理程序;

features：模態窗口的顯示參數。

returnValue：模態窗口返回給客戶端的數據（一般為數字型或字符型）;

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

window.returnValue = result

window.close（）

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

2 Ajax方式

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

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

（1） 創建客戶端界面，通過某個事件觸發JavaScript調用Ajax引擎

（2） 初始化請求對象XMLHTTPRequest。通常可以使用以下統一代碼：

function getXmlHttpRequest（）{

try{return new XMLHttpRequest（）;}

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

}

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

function senddata（）{

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

xmlHttp= getXmlHttpRequest（）;

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

xmlHttp.send（null）;

xmlHttp.onreadystatechanged = statechanged;

}

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

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

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

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

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

從以上論述中我們可以知道模態窗口和Ajax技術都能提高web應用程序交互性，但兩者在許多方面存在著差異，現總結如下：

4 結語

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

參考文獻：

[1] 唐克，王猛. Web應用軟件系統的性能分析與優化[J]. 電腦開發與應用， 2014 （7）：42-44.

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

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

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

[5] 徐紅勤. Ajax在網絡考試系統中的應用[J]. 計算機應用，2007（6）：349-351.

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

【通聯編輯：唐一東】