AJAX技術在Web零件庫系統中的應用研究

王宏偉，孫文磊，何 麗

WANG Hong-wei, SUN Wen-lei, HE Li

（新疆大學 機械工程學院，烏魯木齊 830008）

0 引言

隨著互聯網技術的不斷發展，網絡正在成為人們生活中不可缺少的一部分。而在當今制造業信息化進程中，圖形庫系統正在發揮著越來越重要的作用。因此，借助于Web3D技術將兩者緊密結合起來而設計的Web零件庫系統將會給用戶帶來一種全新的體驗，用戶能夠實現在線瀏覽、搜索、修改零件參數以及下載UG文件等功能。在整個系統功能中，在線瀏覽與搜索指定文件功能占有相當大的比重，如何快速瀏覽零件以及制定高效率、快速的數據檢索方案顯得尤為重要。AJAX技術是最近幾年最受關注的一種技術，在使用了該技術的網頁中，能夠輕而易舉的實現頁面內容的局部刷新、智能搜索、異步通信等功能，而且速度相對較快。此次研究 主要就是通過運用AJAX技術實現Web零件庫系統中三維零件圖的無刷新瀏覽以及智能搜索兩項重要功能。

1 核心技術簡介

1.1 AJAX技術簡介

AJAX全名是Asynchronous JavaScript And XML（異步JavaScript和XML），它是幾種技術的一個有機結合。完整AJAX程序框架一般包含以下幾部分內容：按照W3C DOM規范操作頁面元素進行動態顯示；使用XMLHttpRequest（以下簡稱為XHR）組件發起異步請求與服務端進行通信；采用XML數據格式傳輸與交換數據；最終通過Javascript語言將這些技術有機的捆綁在一起，使之能夠協同工作，形成一整套完整的程序框架。AJAX程序能夠在整個頁面加載完成后再與服務器進行異步通信，實現小范圍內數據更新，快速獲得服務端數據，進而響應用戶請求，優化網頁數據傳輸解決方案。

AJAX程序的核心組件是XHR組件，它承擔發送與接收數據兩大重要任務。運行AJAX程序的首要任務即為創建XHR對象，繼而利用該對象發送請求數據至服務端。此時在XHR對象的onreadystatechange屬性中所指定的回調函數開始工作，周而復始的檢測XHR對象的狀態，直至接收到服務端返回的數據。當檢測到服務端數據已經接收完畢，回調函數將開始解析服務端所返回的XML數據并更新頁面指定區域，隨后回調函數將停止工作，至此完成一次與服務器的通信。AJAX程序模型如圖1所示。

1.2 Web3D技術

Web3D技術即為互聯網上的3D技術，由于3D圖形與動畫比其他媒介有更強的說明作用，故在互聯網占有重要的地位。VRML（虛擬現實建模語言）是3D圖形和多媒體技術通用的交換文件格式，它基于建模技術，描述交互式的3D對象和場景，不僅應用在互聯網上，也可以用在本地客戶系統中，應用范圍極廣。

由于網絡上傳輸的模型文件是基于ASCII碼的文本文件，故其傳輸數據量大大小于視頻圖像。通過學習VRML97標準，能夠使任何一個3D圖形愛好者制作可在互聯網上實時渲染的3D場景模型。普通Web瀏覽器通過安裝顯示VRML文件的插件(如BS Contact VRML)便可直接在Web瀏覽器中瀏覽三維模型，并能對模型進行移動、縮放和旋轉等操作。同時，考慮到網絡數據傳輸帶寬等問題，VRML模型文件相對較小，也能加快程序響應速度，因此在本Web零件庫系統中使用VRML文件作為中間文件。

圖1 AJAX程序模型

2 三維模型無刷新瀏覽與智能搜索功能的實現

2.1 建立數據庫及中間文件的生成

在UG NX 6.0軟件中，已經為我們提供了生成VRML文件的接口，可通過對UG軟件的二次開發在后臺自動生成VRML文件，然后按照設定的命名格式進行命名、存儲。本程序中作為中間文件的VRML文件，其文件名與UG文件名始終保持一致。

為了實現快速搜索以及首頁面自動生成樹形導航菜單，我們需要借助數據庫來存儲文件相關信息，如文件名(包括UG文件和VRML文件)、路徑、文件編號等信息。生成中間文件和建立數據庫過程如圖2所示。

圖2 數據庫及中間文件建立

2.2 三維零件動態無刷新瀏覽功能的實現

Web零件庫系統的一大重要功能是能夠使用戶在瀏覽器中直接觀察三維零件，并能夠進行旋轉、縮放操作。本Web零件庫系統中為實現三維模型在頁面上的顯示功能，需要借助VRML文件瀏覽插件，三維模型動態顯示的具體實現方法為：頁面中采用HTML語言中的object控件作為容器控件，并指定其classid屬性為VRML插件在系統中所注冊的類庫ID值便可實現VRML文件動態顯示功能：

Web零件庫系統無刷新瀏覽功能框圖如圖3所示。

用戶進行瀏覽操作時，系統捕捉用戶點擊頁面左側導航菜單事件，通過前臺觸發函數獲取用戶所點擊項目的文件編號值隨即利用該編碼與緩存中的編碼作比對，判斷是否需要發起新的請求來獲取服務端的三維模型虛擬現實文件。若需要更新文件則進行初始化工作來創建XHR對象，接著利用XHR對象的send方法將該編號發送至服務端處理頁進行處理，并返回所需要的數據。與此同時回調函數也開始工作，檢測XHR對象是否接收到服務端發回的數據。當檢測到已經收到服務端返回的數據時，便按照W3CDOM編程規范所提供的方法解析XML格式數據，從中獲取用戶所點擊的項目對應的VRML文件地址，并更新頁面中的文件顯示區域，實現動態瀏覽功能。

圖3 三維模型無刷新瀏覽框圖

在系統無刷新瀏覽功能的實現過程中，借助了AJAX程序的異步通信特點，對頁面進行小范圍數據提交與更新，加快了三維圖形的瀏覽速度，實現了無需刷新整個頁面就能更新三維模型的功能。在此過程中，XHR對象起到了至關重要的作用。因此，在AJAX程序中，能否成功建立XHR對象也就決定了整個程序是否能夠成功運行。針對目前各瀏覽器對ActiveX技術的支持情況不同，每一種瀏覽器創建XHR對象的方法也不盡相同，本文以微軟公司的IE瀏覽器為例進行說明，創建XHR的方法為：

2.3 三維零件智能搜索功能的實現

由于Web零件庫系統中的零件數量一般會很大，單一的樹形導航菜單并不能確保用戶能夠快速定位到想要瀏覽的文件。因此，如何根據文件的部分信息快速定位到該文件也是三維模型瀏覽的重要功能之一。

本系統為了方便用戶進行文件檢索，實現了基于AJAX技術的智能搜索功能。具體實現過程如圖4所示：

在文件搜索過程中，可按照文件的編碼和名稱兩種方式進行查詢。用戶操作時可以直接在搜索條件文本框中輸入編號或名稱，系統將智能判斷所輸入的數據具體屬于編號還是名稱，最終將其發送至服務端進行模糊查詢，服務端處理函數查詢數據庫后返回由數據庫中前十條記錄和總計條數所構成的XML格式結果集合。最后由回調函數解析服務端所返回的XML文檔并生成結構化字符串儲存于hide控件中，然后以此字符串動態構建DIV控件，顯示模糊查詢的結果列表以提示用戶進行選擇。智能搜索過程中，為了節省帶寬，每次只返回數據庫中前十條符合要求的數據記錄。

圖4 三維圖形智能搜索功能實現框圖

3 應用實例

系統采用VRML作為中間文件來實現三維模型與瀏覽器的連接，故用戶通過安裝了VRML瀏覽器插件的普通Web瀏覽器在連接互聯網的條件下就能瀏覽三維模型，而不需要安裝復雜的專業軟件。如圖5所示，用戶登陸系統網站后，可根據左側導航菜單對三維模型進行瀏覽和下載。

圖5 三維模型瀏覽

同時，如果用戶想快速根據文件部分信息快速定位到該文件，也可在搜索文本框中提交搜索條件進行文件檢索，通過智能搜索功能瀏覽指定的三維模型。檢索零件過程中用戶可以提交相對模糊的查詢條件，搜索程序會根據該條件進行模糊查詢列出相關結果，最后通過在提示框中進行提示用戶選擇來精確定位文件。當程序完成搜索并將提示框顯示于搜索文本框下方時，用戶可以按下鍵盤方向鍵選擇相應項目，提示框中將會以高亮模式顯示選中項目。同時，也可以直接用鼠標點擊，最終將會在顯示區域動態顯示用戶所選擇的文件。如圖6所示。

圖6 搜索結果顯示

4 結束語

通過研究AJAX通信原理以及W3CDOM編程規范，并以Visual Studio 2008作為開發工具，實現了Web零件庫系統中三維模型在線無刷新瀏覽與智能搜索兩大重要功能。通過網絡，用戶可以使用普通Web瀏覽器在接入互聯網并安裝一個很小的VRML瀏覽器插件的條件下就能方便的使用本Web零件庫系統。通過Web零件庫系統，用戶能夠在不安裝復雜的專業三維軟件的情況下進行直觀的觀察零件的三維模型，并且能夠對模型進行旋轉、縮放等簡單交互操作。借鑒于三維動畫的直觀性，與傳統的二維機械圖紙相比，本系統能夠給用戶提供更多的方便，減少了二維零件圖紙在流通過程中所造成的誤解，在更大程度上方便用戶與零件制造者進行溝通。

[1]陳冠軍, 等.ASP.NET AJAX實用開發詳解[M].北京∶ 電子工業出版社, 2008.

[2]霍茲納, 著, 陳秋萍, 譯.Ajax寶典[M].北京∶ 人郵電出版社, 2007.

[3]柯自聰.Ajax開發精要∶ 概念、案例與框架[M].北京∶ 電子工業出版社, 2006.

[4]黃曉東.基于Ajax技術的區域農業產業優勢分析與優化工具研究[D].中國農業科學院, 2008.

[5]唐華, 趙正文, 龍樹全.基于ASP.NET AJAX的搜索動態提示功能的實現[J].計算機系統應用, 2009(9)∶ 159-162.

[6]鐘佩思, 欒倩, 劉梅, 王景林.辛紀光,面向網絡化資源共享的零件庫系統研究與實現[J].機械設計與制造, 2010(2)∶ 249-251.