使用AJAX 異步提高Web應用互動能力(徐承禹)

随着網絡技術的飛速發展，在提供商業以及其他應用方面，IT行業對Web系統的依賴程度越來越高。如何提高B/S架構的應用系統在用戶端貧乏的互動能力，這一直困擾者Web系統的設計、開發人員，他們研究出很多方法增強用戶端界面的互動性，這些方法隻能說表面的實作了桌面應用的一些互動方式，但沒有真正的使得問題得到了解決。

作為Web2.0核心應用，Ajax的出現很好的解決了這個問題。他的特點就是異步互動，異步互動就是一個簡單的多線程。在必要的時候應用可以不需要重新整理整個頁面來更新頁面上的内容，對于使用者而言完全是一個“無重新整理”、“無阻塞”的過程，而在這個過程中，異步互動默默的在背景工作，而不是像傳統的B/S應用那樣必須是：使用者請求重新整理頁面内容時必須送出HTTP請求，然後強制使用者進入送出、等待、重新顯示互動結果的過程。

1、傳統的互動解決方法及其優、缺點

    在研發Web應用的過程中，設計和開發人員設計了很多方法增強Web應用的互動性：

1.1 彈出視窗。使用在事件處理函數中調用showModalDialog(URL)方法，将請求頁面連結通過showModalDialog打開視窗，請求經過伺服器處理後，視窗打開後又立即關閉，然後由事件處理函數中的腳本處理視窗傳回的資料。缺點：隻能處理類似滑鼠點選事件，如果是鍵盤事件，即使是最快的網絡速度，也會使用戶端有延遲。并且有螢幕閃爍的現象。

1.2 使用JS腳本。将所有的基礎資料生成到js檔案中，在頁面加載時下載下傳到本地，或者在加載頁面時動态生成JAVASCRIPT數組定義。在處理事件時，對js檔案的數組進行分析，然後顯示結果。優點是:相應速度快，可以應用在各種事件中，但是開發難度大、腳本複雜、功能單一、維護複雜，而且頁面源程式太大，使得加載速度比較慢。

1.3 頁面中腳本的按需加載。在頁面源程式中預先加入一段沒有内容的JAVASCRIPT的代碼段，并設定好id，在事件處理時使用代碼段的src屬性動态加載javascript代碼。并且執行這些代碼。<SCRIPT language=JavaScript id=script_do type=text/JavaScript></SCRIPT><SCRIPT LANGUAGE=JavaScript >function fun_do(){script_do.src=URL;}</SCRIPT>。優點是響應速度快，可以實作複雜的業務邏輯，但是在處理鍵盤事件比如onKeyPress事件時，就可以感覺到有一定的延遲。

其他還可以使用隐藏的Iframe，綜合上述三種方法，可以看出雖然實作了桌面應用的一些功能，但是由于根本上使用了浏覽器/伺服器固有的這種請求/響應的斷開式網絡通訊模式，是以會使使用者不得不等待伺服器的傳回的資訊。

2、Ajax技術

Ajax 是Asynchronous JavaScript and XML 的縮寫。即“異步的JavaScript 和 XML處理” 或“非同步JavaScript 和 XML技術”，它并不是一門新的語言或技術，它實際上是幾項技術按一定的方式組合在一起，在同共的協作中發揮各自的作用，它涵蓋。

（1）XMLHttpRequest: XMLHttpRequest對象在大部分浏覽器上已經實作而且擁有一個簡單的接口允許資料從用戶端傳遞到服務端，然後以背景活動的方式擷取資料，但并不會中斷使用者目前的操作。使用XMLHttpRequest傳送的資料可以是任何格式，雖然從名字上建議是XML格式的資料。

（2）CSS：層疊樣式表，CSS提供了從内容中分離應用樣式和設計的機制，在Ajax應用中，使用者的界面樣式可以通過CSS獨立修改。

（3）DHTML或Dynamic HTML，用于動态更新表單。一般使用div、span和其他動态HTML元素來标記HTML。

（4）DOM：文檔對象模型，用于（通過JavaScript代碼）處理HTML結構和（某些情況下）伺服器傳回的XML。使用DOM實作Ajax應用的動态顯示和互動。

（5）JavaScript：JavaScript是一種粘合劑使AJAX應用的各部分內建在一起。JavaScript代碼是運作Ajax應用程式的核心代碼。

2.2 工作原理 

Ajax 基本上就是把 JavaScript 技術和 XMLHttpRequest 對象放在 Web頁面和伺服器之間。當邏輯觸發時，資料發送給一些 JavaScript 代碼而不是 直接發送給伺服器，JavaScript 代碼捕獲資料後向伺服器發送請求，請求是異步發送的，就是說 JavaScript 代碼（和使用者）不用等待伺服器的響應。是以使用者可以繼續輸入資料、滾動螢幕和使用應用程式。

然後，伺服器将響應資料傳回 JavaScript 代碼，後者決定如何處理這些資料。它可以操作DOM處理資料，并且将頁面更新，它也可以對收到的資料執行某種計算，再發送另一個請求，完全不需要使用者幹預。它可以根據需要自行與伺服器進行互動。結果就是類似于桌面應用程式的動态、快速響應、高互動性的體驗。

2.3 普遍适用性

AJAX 之是以成為可能，是因為現在許多主要的浏覽器都提供可進行獨立 XML HTTP 請求的對象。Internet Explorer 5 以及更高版本提供了一個 XMLHTTP 對象，而基于 Mozilla 的浏覽器則提供了一個 XMLHttpRequest 對象。這些對象都能夠從伺服器請求 XML 資料，并以類似的方式處理這些資料。所有能夠動态提供 XML 的技術都可以使用伺服器端 AJAX 元件。任何動态 Web 技術（從 ASP、PHP 到 JSP、Servlet）都可以充當 AJAX 伺服器。因為所有流行的浏覽器都支援 Javascript 和必要的 XMLHTTP 請求對象，且幾乎所有 Web 伺服器技術均可生成 XML（或任何标記），是以核心 AJAX 技術普遍适用。

3、《鐵路安全行車事故綜合分析系統》中Ajax實作

3.1 應用背景

《鐵路安全行車事故綜合分析系統》是鐵路運輸事故統計分析的重要系統，其基礎資訊必須具有絕對的正确性、嚴肅性。設計開發時，系統采用B/S架構。行車事故概況表（安監報一）是本系統的基本資料來源，資料項有六十多項，其中“事故地點”有8000多個可選項，“事故類别”有60多可選項，“線路别”有530多選項，“責任機關”也多達1000多選項。為了資料錄入時的标準化，在桌面應用系統中使用者可以隻錄入拼音碼，應用程式根據拼音碼檢索符合條件的選項并很快的更新到下拉選擇框裡，但是在傳統的Web應用中很難實作如此平滑的操作。筆者作為該系統的設計和開發人員，采用了Ajax技術進行實作。下面以鐵路線路的錄入為例具體實作。

3.2 具體實作

    (1) 建立XMLHttpRequest 請求對象：要求浏覽器使用XMLHttpRequest或ActiveXObject。這兩個對象的主要差別在于使用他們的浏覽器以及建立對象的方式。

<script> function createRequestObject() { var ro; var browser = navigator.appName;

    if(browser == "Microsoft Internet Explorer"){

        ro = new ActiveXObject("Microsoft.XMLHTTP");

    }else{ro = new XMLHttpRequest();}return ro;}

var txtObj;//目前獲得輸入的文本框(51aspx.com)

var http = createRequestObject();</script>

(2)發送請求：建立了請求對象，即向伺服器送出請求作了準備。當使用者在“線路名稱”輸入域裡輸入線路的拼音碼時即可觸發sndReq(txt,pym)函數，具體實作如下：<input type="text" name="line_name"   onKeyUp="sndReq(this，this.value);">

調用的函數有2個參數：該文本框對象和它的值。函數具體實作如下：

<script> function sndReq(txt,pym) {txtObj=txt;// 目前獲得輸入的文本框

if(pym=="") {return false;}

http.open('get', 'quick_ajax_retrun.jsp?pym='+pym, 'true');//51aspx.com

http.onreadystatechange = handleResponse; http.send(null);} </script>

函數中首先設定請求對象http的url：http.open ("GET",url, true); “true”表示是異步方式，接着設定請求傳回值的接收方法：http.onreadystatechange = handleResponse;（handleResponse是該請求傳回值的接收方法）最後是發送請求：req.send(null)。

（3）應用程式處理請求：

處理請求的應用程式是quick_ajax_retrun.jsp ，它的功能是，用查詢參數pym的值，作為拼音碼的比對條件從資料庫檢索符合條件的記錄。實作也比較簡單：

a、            使用JDBC 連結ORACLE資料庫

b、            組織查詢語句查詢資料庫

c、            将查詢的前50條記錄中線路名字段資料以“，”隔開，組成一個字元串傳回用戶端。

（4）用戶端接收處理伺服器傳回的請求：用戶端接收到伺服器端傳回字元串型資料後立刻調用請求的處理函數。這裡應用HMLHttpRequest對象的responseText屬性，其作用是将響應資訊作為字元串接收。

<script> Function handleResponse() { if(http.readyState == 4){var response ="";

if (http.status==200){ try{ response= http.responseText; //獲得傳回的字元串

 }catch(exception) { response="浏覽器無法支援快速輸入"; }

var lines= new Array(); lines=response.split(','); //轉為數組

toosing_show(txtObj,quicksel,quicklays,lines);//重新整理下拉選擇框中清單

}}}</script>

toosing_show功能是以文本框、下拉框、包含下拉框的層、lines數組為參數的函數，功能是将lines數組加載到下拉框中，将下拉框定位到文本框的下面，并顯示出來。整個過程讓人的感覺是Web程式是立即完成的，頁面沒有送出而使用者得到了新的資料。

四、結束語

Web應用軟體的開發除了考慮系統提供的之外，還要考慮應用的互動能力，使得使用者操作時友善快捷。Ajax技術為B/S架構的應用程式提供了一種實作良好可互動性的選擇，他的異步互動特點使得資料交換在頁面之間完成，每次送出請求不需要重新整理整個頁面。本文通過一個具體項目實踐說明了Ajax在增強Web應用互動能力方面的強大功能。作為一種技術，Ajax應用沒有固定的模式，其具體實作方法要根據具體應用進行設計，以便向使用者提供更友善、快捷、及時的服務，本文希望能起到抛磚引玉的作用。

本文轉自 liudao 部落格園部落格，原文連結：http://www.cnblogs.com/liudao/archive/2007/10/31/944210.html，如需轉載請自行聯系原作者