AJAX技術(shù)在Web零件庫系統(tǒng)中的應(yīng)用研究

王宏偉，孫文磊，何 麗

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

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

0 引言

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

1 核心技術(shù)簡介

1.1 AJAX技術(shù)簡介

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

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

1.2 Web3D技術(shù)

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

由于網(wǎng)絡(luò)上傳輸?shù)哪Ｐ臀募腔贏SCII碼的文本文件，故其傳輸數(shù)據(jù)量大大小于視頻圖像。通過學習VRML97標準，能夠使任何一個3D圖形愛好者制作可在互聯(lián)網(wǎng)上實時渲染的3D場景模型。普通Web瀏覽器通過安裝顯示VRML文件的插件(如BS Contact VRML)便可直接在Web瀏覽器中瀏覽三維模型，并能對模型進行移動、縮放和旋轉(zhuǎn)等操作。同時，考慮到網(wǎng)絡(luò)數(shù)據(jù)傳輸帶寬等問題，VRML模型文件相對較小，也能加快程序響應(yīng)速度，因此在本W(wǎng)eb零件庫系統(tǒng)中使用VRML文件作為中間文件。

圖1 AJAX程序模型

2 三維模型無刷新瀏覽與智能搜索功能的實現(xiàn)

2.1 建立數(shù)據(jù)庫及中間文件的生成

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

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

圖2 數(shù)據(jù)庫及中間文件建立

2.2 三維零件動態(tài)無刷新瀏覽功能的實現(xiàn)

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

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

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

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

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

2.3 三維零件智能搜索功能的實現(xiàn)

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

本系統(tǒng)為了方便用戶進行文件檢索，實現(xiàn)了基于AJAX技術(shù)的智能搜索功能。具體實現(xiàn)過程如圖4所示：

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

圖4 三維圖形智能搜索功能實現(xiàn)框圖

3 應(yīng)用實例

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

圖5 三維模型瀏覽

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

圖6 搜索結(jié)果顯示

4 結(jié)束語

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

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

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

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

[4]黃曉東.基于Ajax技術(shù)的區(qū)域農(nóng)業(yè)產(chǎn)業(yè)優(yōu)勢分析與優(yōu)化工具研究[D].中國農(nóng)業(yè)科學院, 2008.

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

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