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

 （太原鐵路局資訊技術處，太原 030013）摘要：傳統的Web應用不能像案頭應用一樣提供豐富的用戶端功能。而Ajax技術則是有效解決途徑。介紹Ajax的基本原理及技術，並通過一個鐵路安全行車事故分析系統具體實踐Ajax技術。關鍵詞：Ajax；XML;XMLHttpRequest對象;非同步互動 Improving interactivity of Web application based on AjaxXU Cheng-yu(Information and Technology Office, Taiyuan Railways Bureau,Taiyuan 030013,China) Abstract: Web applications couldn't offer abundant client function like desktop application.Ajax was such a technique which was a correct solution. It was introduced the principle of Ajax and a Web application based on Ajax. . Key words: Ajax,XML;XMLHttpRequest object; Asynchronous interactivity隨著網路技術的飛速發展，在供應商業以及其他應用方面，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技術 2.1 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.comhttp.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應用沒有固定的模式，其具體實現方法要根據具體應用進行設計，以便向使用者提供更方便、快捷、及時的服務，本文希望能起到拋磚引玉的作用。