基于Ａｊａｘ技術的跨瀏覽器組件研究

摘要：隨著網絡技術的發展，出現了多種流行的瀏覽器。由于不同的瀏覽器，有著各自的特征和限制，因此更多的瀏覽器的出現，將會促使更多的技術融入到Ajax中去。跨瀏覽器是Web應用可用性的重要組成部分，處理跨瀏覽器兼容性成了一個迫切需要解決的問題。Ajax技術為創建一個可以很容易在所有瀏覽器中使用的可移植的組件提供了一個通用編程模式。

關鍵詞：Ajax；跨瀏覽器；組件；兼容；通用模式

中圖分類號：TP393文獻標識碼：A文章編號：1009-3044(2008)29-0423-02

The Underlying Technique for Cross-browser Components Base on Ajax

LI Ze

(Department of Library Network Technology，Southwest Forestry University，Kunming 650224，China)

Abstract: With the development of network technology， a variety of popular browser. As a different browser， have their own characteristics and constraints， the more the emergence of the browser， would enable more technology into Ajax. Cross-browser Web application availability is an important part of dealing with cross-browser compatibility has become a pressing need to address the problem. Ajax technology can easily create a browser in all of the components can be transplanted to provide a common programming model.

Key words: Ajax; corss-browser components; compatibility; common model

1 引言

目前，Web中流行著多種瀏覽器，從市場份額看，IE約占79%左右，除了IE外，比較流行的有Firefox（約占15%）、Safari、Opera、Netscape，根據訪問的主流瀏覽器，我們可以得出最低兼容限度為： IE、Firefox、Safari和Opera。盡管IE依然有一定主導地位，但是市場正在變得越來越分散。W3C為瀏覽器建立的統一的標準，但是這些標準并沒有完全被遵循。有的時候，兩個不同瀏覽器提供相同的功能，卻以不同的方式訪問。如何實現跨瀏覽器組件開發呢？本文以Ajax技術為平臺，對底層的瀏覽器問題進行抽象，提供統一的API，以達到使這些組件具有支持不同的瀏覽器的功能。

2 主要的跨瀏覽器組件

由于瀏覽器廠商發展歷史不同，各個瀏覽器實現也不同，這給開發造成了困難。目前在網絡中應用的瀏覽器很多，為力求簡單說明問題，只討論IE和Firefox兩個主要的瀏覽器，Firefox實際是由Netscape基礎上發展而來的，具有精簡高效、可定制性強、安全性高、跨平臺等優點，網頁兼容性也十分出色。Firefox在MS-Windows、Apple、Linux，以及很多其他操作系統中都可以運行。瀏覽器的一些方面依賴特定的操作系統的功能，這是出現更多不兼容性的地方。比如說，IE拖曳與放置能力不僅取決于使用的IE版本，也依賴于是執行在Apple還是在MS-Windows上。

2.1 XMLHttpRequest的應用

要開發跨瀏覽器組件，需要用到最關鍵的Ajax組件就是XMLHttpRequest，借助它，可以在網頁的背后和瀏覽器進行異步通信，而無需刷新整個頁面，稱它為Ajax的核心技術毫 不為過。XMLHttpRequest 最早出現在IE5.0瀏覽器中，后來隨著他的標準逐漸完善，越來越多的開發人員開始使用XMLHttpRequest 對象組合其他的標準技術做出豐富的客戶端應用，其他瀏覽器，如Firefox就是應用最廣的瀏覽器之一。

XMLHttpRequest對象用于瀏覽器和服務器之間的通信，它對于當前的主要瀏覽器都是支持的。大多瀏覽器包含一個特定的XMLHttpRequest類，這個類被創建為一個ActiveX組件。但是，這個對象不是一個國際標準，在不同的瀏覽器中實現方法不同。

要實現能夠在不同的瀏覽器中運行Ajax的應用，必須考慮所有的使用場合。例如在IE5.0瀏覽器的創建語法是var xmlhttp=new ActiveXObject(‘Msxml2.XMLHTTP’)；而在IE5.5中是var xmlhttp=new XMLHttpRequest()。在Firefox當中，將采用如下語法：var objXMLHTTP = new XMLHttpRequest();因此，創建方式和不同的瀏覽器有關，使用時候就必須根據瀏覽器采用不同語法進行創建。但是對每一個都進行判斷不合乎實際，可以利用JavaScript的異常處理機制實現跨瀏覽器的XMLHttpRequest對象創建腳本。處理異常的代碼如下：

Var xmlhttp;

Try{xmlhttp=new ActiveXObject(‘Msxml2.XMLHTTP’);

Catch(e){

Try{ xmlhttp=new ActiveXObject(‘Microsoft.XMLHTTP’);

Catch(e){ try{ xmlhttp=new XMLHttpRequest();

Catch(e){}

}}

上面的代碼通過三層try…catch語句結構來嘗試是否能創建成功，就實現了腳本的跨瀏覽器兼容性，從而不必擔心瀏覽器的特殊性，被返回的對象是一個跨瀏覽器的組件。

無論使用Firefox還是使用IE，API都是相同的，因此，程序員能以相同的方式進行Web遠程通信。

2.2 其他組件的應用

除了XMLHttpRequest以外，還有很多功能強大的其他組件，下面將介紹它們中的一部分：

Dojo

Dojo是最早的一個ajax框架，2004年開始建立。它提供綜合性小組件及瀏覽器，它提供了一個同時兼容IE和Firefox的dojo.io.XMLHTTPTransport。目前，Dojo支持了safari以外的所有瀏覽器。在服務器端，它支持java\\php\\dotnet\\perl，從使用者角度來說，使用的dojo的JS代碼看來來很舒服，事件驅動模式的設計脈絡得到清晰的體現。

利用Dojo可以創建跨瀏覽器兼容的樹形結構、標簽面板、彈出菜單等，有許多工具包支持這些UI部件，并且是跨瀏覽器兼容的，但是支持豐富事件處理模型的工具包卻不多。

Backbase

Backbase是具有跨瀏覽器支持的綜合性瀏覽器端的ajax框架，包含了帶有附加庫的javascript引擎以支持J2EE和.NET，可以同任何服務器平臺兼容（例如，java，.net，php或者coldfusion），它的特點是非商業性，可以免費使用社區版本，是.net開發者的高級工具，Visual Studio 2005插件，也是Java開發者的高級工具－JSF標簽庫/Elipse集成，在Backup Explorer上，有超過80個Ajax小組件。Backbase完全兼容Web標準，包括結構化語言，表示語言，對象模型和腳本語言。基于工業化標準，比如java，xml，xhtml.css和dom，它可以很好地運行在主流瀏覽器 。

除了以上這些組件外，還有支持拖曳功能的Yahoo UI使用的DragDrap，以面向對象方式開發Ajax的領導平臺Bindows，Javascript的MVC框架Freja，來自Ismorphic Software的SmartClient等，都是跨瀏覽器的Javascript多用途框架，提供了很多跨瀏覽器的基礎類和服務。

3 創建跨瀏覽器組件的標準

創建組件的標準主要有兩種方式，一種是基于瀏覽器的不同版本之間的兼容，如何確定瀏覽器的版本呢？可以使用navigator對象直接報告這個信息，它的屬性包括navigator.appName，用于瀏覽器的名稱，navigator.appVersion用于說明瀏覽器的版本。另外一種是基于檢測特定的功能是否存在，是否兼容于不同瀏覽器，尤其是某個屬性或者方法是否存在。

如果功能不被當前瀏覽器支持的話，跨瀏覽器API要么是拋出異常，指明該對象無法創建，要么就是提供自定義的版本，也就是說，可以以其他被當前瀏覽器支持的對象為基礎，創建一個自定義的版本。

4 設計一個可拖曳的跨瀏覽器組件

在網頁中，創建一個可以移植的跨瀏覽器組件，比如要開發一個整合了一個大的場景中的圖像和動畫的小精靈引擎，可以在不同瀏覽器中使用，在屏幕里四下拖曳。它不僅僅符合同一瀏覽器的多個版本，也適用于大多數瀏覽器，符合跨瀏覽器組件的標準。它的實現原理將通過下完進行分析。

拖曳效果是通過Javascript來實現的，而完成拖曳時要向服務器發送XMLHttpRequest請求以完成對數據庫的操作。我們可以通過上文中所提到的Yahoo UI的DragDrap庫來實現一個容易在Firefox和IE上都能使用的可移植組件。這個組件能獨立于瀏覽器的界面，考慮到了鼠標位置和圖標定位的瀏覽器不兼容性。當新的拖曳與放置需求出現時，程序員能依賴這個組件，而不必費心處理潛在的瀏覽器不兼容性。

拖曳功能主要分三個步驟實現，即鼠標按下事件，拖動事件和鼠標釋放事件。當鼠標按下時，調用mousedown事件，獲得拖動元素的初始位置。拖動時調用mouseover事件，先獲得鼠標位置，然后改變拖動元素位置。當釋放鼠標時，獲取結束時的鼠標位置。

從拖動到釋放，需要處理四個過程：

第一，創建虛擬層模擬界面元素拖動，該層為原始層的拷貝；

第二，制定元素釋放的容器，也就是元素可以拖動到的位置，并判斷該容器是否能接收被拖動的元素；

第三，如該容器可接收被拖動元素，則在此點插入原始層，并刪除在原始層的原始結點；第四，刪除拖曳的虛擬層完成拖曳。

圖1為拖曳原理示意圖。

4 結束語

過去幾年，Ajax應用只需要標準的Web瀏覽器，例如IE和Firefox1.0，然而Ajax依然還是盡量利用標準瀏覽器的功能，盡量避免特定的一些瀏覽器的特性和插件，這也代表遵守標準的Web用戶界面。

跨瀏覽器是Web應用可用性的重要組成部分，只有基于真正的Web標準來做開發，才有可能跨瀏覽器為用戶提供一致的交互體驗。而跨瀏覽器僅僅是基于真正的Web標準做開發的一個原因。另外一個原因是，唯有這樣，才能充分地利用Web標準發展的成果，并且建造出向后兼容的Web應用。這里所指的向后兼容也就是說，當瀏覽器隨著技術的更新而不斷升級，增加了一些新的功能，那么也能得到跨瀏覽器組件的支持。我們必須拋開以往局限于單一瀏覽器的研究，在開發中考慮到多種主流的瀏覽器的兼容，實現更加豐富的應用體驗。

參考文獻：

[1] Michael Mahemoff.Ajax設計模式[M].北京:電子工業出版社，2007.

[2] 王沛，馮曼菲.征服Ajax Web2.0開發技術詳解[M].北京:人民郵電出版社，2006.

[3] Perry B W. Ajax Hacks創建快速響應WEB站點工具和技巧[M].北京:電子工業出版社，2007.

[4] 施偉偉，張蓓.征服Ajax Web 2.0快速入門與項目實踐[M].北京:人民郵電出版社，2006.