ibm官方資料把應(yīng)用程序從 Internet Explorer 遷移到 Mozilla

更新時間：2008年04月15日 12:08:48 作者：

使特定于 Internet Explorer 的 Web 應(yīng)用程序在 Mozilla 上運行時，您遇到過麻煩嗎？本文討論了將應(yīng)用程序遷移到基于開源 Mozilla 瀏覽器上時的常見問題。首先討論跨瀏覽器開發(fā)的基本技術(shù)，然后介紹克服 Mozilla 和 Internet Explorer 之間差異的策略。

CSS 差異

和 Internet Explorer 及其他瀏覽器相比，Mozilla 對級聯(lián)樣式表（CSS）的支持是最好的，包括 CSS1、CSS2 的全部和 CSS3 的一部分。

對于下面提到的多數(shù)問題，Mozilla 都會在 JavaScript 控制臺中添加錯誤或警告記錄。如果遇到和 CSS 有關(guān)的問題請檢查 JavaScript 控制臺。

Mimetypes（如果未應(yīng)用 CSS 文件）

與 CSS 有關(guān)的最常見的問題就是：未應(yīng)用所引用的 CSS 文件中的 CSS 定義。這通常是因為服務(wù)器為 CSS 文件提供了錯誤的 mimetype。CSS 規(guī)范指出，CSS 文件的 MIME 類型應(yīng)該是 text/css。Mozilla 遵守這一點，在嚴格標準模式下只有這種 MIME 類型的 CSS 文件才會被加載。Internet Explorer 總是加載 CSS 文件，無論使用什么 mimetype。如果以嚴格的文檔類型開始，則該網(wǎng)頁被認為是嚴格標準模式。為了解決這個問題，可以讓服務(wù)器發(fā)送正確的 mimetype 或者刪除文檔類型。下一節(jié)將進一步討論文檔類型。

CSS 和單位

很多 Web 應(yīng)用程序沒有在 CSS 中使用單位，尤其是如果使用 JavaScript 設(shè)置 CSS。Mozilla 允許這樣做，只要頁面不以嚴格模式呈現(xiàn)。因為 Internet Explorer 不支持真正的 XHTML，沒有指定單位也不必擔心。如果頁面處于嚴格標準模式而沒有使用單位，則 Mozilla 將忽略該樣式：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
 <body> 
 // works in strict mode 
 <div style="width:40px; border:1px solid black;">
  Text
 </div>

 // will fail in strict mode 
   <div style="width:40; border:1px solid black;">
     Text
   </div>
 </body> 
</html>

因為上面的例子使用了嚴格的文檔類型，頁面以嚴格標準模式呈現(xiàn)。第一個 div 的寬度為 40px，因為使用了單位；但是第二個 div 沒有設(shè)置寬度，因此使用默認值 100%。如果通過 JavaScript 設(shè)置寬度，情況也是一樣。

JavaScript 和 CSS

因為 Mozilla 支持 CSS 標準，它也支持通過 JavaScript 設(shè)置 CSS 的 CSS DOM 標準?？梢酝ㄟ^元素的 style 成員訪問、刪除和修改元素的 CSS 規(guī)則：

 
<div id="myDiv" border:1px solid black;">
 Text
</div> 

<script> 
 var myElm = document.getElementById("myDiv"); 
 myElm.style.width = "40px"; 
</script>

通過這種方法可以訪問每一個 CSS 屬性。同樣，如果網(wǎng)頁采用嚴格模式，就必須設(shè)置單位，否則 Mozilla 將忽略該命令。

在 Mozilla 和 Internet Explorer 中查詢一個值，比如說 .style.width，返回值也包含單位，就是說是一個字符串?？捎?parseFloat("40px") 將字符串轉(zhuǎn)換成數(shù)字。

CSS 溢出的區(qū)別

CSS 增加了溢出的概念，允許定義如何處理溢出；比如，如果指定高度的 div 的實際高度超出的時候。 height.CSS 標準規(guī)定如果這種情況下沒有定義溢出行為，則 div 內(nèi)容就會溢出。但是，Internet Explorer 沒有遵循這一點，而是擴展 div 的高度以便容納其內(nèi)容。下面的例子說明了這種差異：

 
<div style="height:100px; border: 1px solid black;"> 
 <div style="height:150px; border: 1px solid red; 
     margin:10px;">
 a
 </div> 
</div>

從圖 4 可以看出，Mozilla 是按照標準規(guī)定處理的。標準規(guī)定，這種情況下內(nèi)層的 div 溢出到底線，因為內(nèi)層的內(nèi)容比外層元素還高。如果愿意采用 Internet Explorer 的方式，只要不指定外層元素的高度即可。

圖 4. DIV 溢出

懸停差異

Internet Explorer 的非標準 CSS 懸停行為出現(xiàn)在很多 IBM 網(wǎng)站上。Mozilla 中懸停的時候一般通過改變文本樣式來表明自身，但是 Internet Explorer 沒有這種行為。這是因為 a:hover CSS 選擇器在 Internet Explorer 中和 <a href="" /> 匹配，但是與 <a name="" /> 不匹配，后者在 HTML 用于建立錨鏈接元素。文本變化是因為作者用錨設(shè)置標記包圍了該區(qū)域：

 
CSS: 
a:hover {color:green;} 

HTML: 
<a href="foo.com">This should turn green when you hover over it.</a> 

<a name="anchor-name"> 
 This should change color when hovered over, but doesn't 
 in Internet Explorer. 
</a>

Mozilla 正確地遵循了 CSS 規(guī)范，該例中文本的顏色變成綠色。有兩種方法可以讓 Mozilla 的行為和 Internet Explorer 一樣，即懸停的時候不改變文本顏色：

首先將 CSS 規(guī)則改為 a:link:hover {color:green;}，這樣只有鏈接（帶有 href 屬性）才會改變顏色。
或者修改標記在文本開始之前加入 <a />，修改后錨仍然能正常工作。

回頁首

特殊模式與標準模式

老的瀏覽器如 Internet Explorer 4 在特定情況下會以所謂的特殊模式呈現(xiàn)。雖然 Mozilla 的目標是成為符合標準的瀏覽器，但是提供了三種模式支持帶有這些特異行為的較老的網(wǎng)頁。頁面的內(nèi)容和交付決定了 Mozilla 使用哪種模式。Mozilla 在 View -> Page Info（或 Ctrl-i）中列出呈現(xiàn)模式。頁面選擇哪種模式取決于文檔類型。

文檔類型（doctypes，即文檔類型聲明的縮寫）如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

藍色部分稱為公共標識符，綠色的部分稱為系統(tǒng)標識符，是一個 URI。

標準模式

標準模式是最嚴格的呈現(xiàn)模式，根據(jù) W3C HTML 和 CSS 規(guī)范呈現(xiàn)頁面，不支持任何特異情況。如果滿足下列條件，Mozilla 使用該模式：

如果頁面以 text/xml mimetype 或者其他 XML 或 XHTML mimetype 發(fā)送
IBM 文檔類型之外的任何“DOCTYPE HTML SYSTEM”文檔類型（比如 <!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/REC-html40/strict.dtd">）
沒 DTD 的文檔類型或未知的文檔類型

準標準模式

Mozilla 引入準標準模式有一個原因：CSS 2 中的一部分破壞了基于小圖片在表格中精確布局的設(shè)計。不是為用戶組成一幅完整的圖片，而是在每個小圖片后面都帶一段間隙。圖 5 所示的舊的 IBM 主頁給出了一個例子。

圖 5. 圖片間隙

除了圖片間隙問題外,準標準模式基本上和標準模式完全相同。這個問題常常出現(xiàn)在符合標準的頁面上，并造成不正確的顯示。

Mozilla 在下列情況下使用準標準模式。

任何 “寬松” 文檔類型（如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">）
IBM 文檔類型（<!DOCTYPE html SYSTEM "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd">）

請閱讀相關(guān)資料進一步了解圖片間隙問題。

特殊模式

目前 Web 上到處充斥著不合法的 HTML 標記以及依靠瀏覽器的缺陷工作的標記。早在老的 Netscape 瀏覽器當還是市場領(lǐng)先者的時候就有這方面缺陷。Internet Explorer 出現(xiàn)時，為適應(yīng)當時的內(nèi)容而模仿了這些缺陷。隨著新的瀏覽器進入市場，原來的這些缺陷，通常稱為特異情況（quirks），為保持向后兼容大部分保留了下來。Mozilla 在特殊呈現(xiàn)模式中支持很多這樣的特異情況。要注意，由于這些特異情況，頁面與完全符合標準的情形相比呈現(xiàn)速度更慢。多數(shù)網(wǎng)頁都用這種模式呈現(xiàn)。

Mozilla 在下面情況下使用特殊模式：

沒有指定文檔類型
文檔類型沒有系統(tǒng)標識符（比如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">）

如果希望進一步了解相關(guān)內(nèi)容，請閱讀 List of Quirks 和 List of Doctypes and What Modes They Cause。

回頁首

事件差異

在事件方面，Mozilla 和 Internet Explorer 幾乎完全不同。Mozilla 事件模型按照 W3C 和 Netscape 模型。在 Internet Explorer 中，如果從事件中調(diào)用一個函數(shù)，可以通過 window.event 訪問 event 對象。Mozilla 把 event 對象傳遞給事件處理程序。必須通過參數(shù)把該對象明確傳遞給調(diào)用的函數(shù)。下面是一個跨瀏覽器事件處理的例子：

 
<div onclick="handleEvent(event)">Click me!</div> 

<script> 
function handleEvent(aEvent){ 
 // if aEvent is null, means the Internet Explorer event model, 
 // so get window.event. 
 var myEvent = aEvent ? aEvent : window.event; 
} 
</script>

事件對象公開的屬性和函數(shù)的名稱在 Mozilla 和 Internet Explorer 中也常常不同，如表 4 所示。

表 4. Mozilla 和 Internet Explorer 中的事件屬性

Internet Explorer 名稱	Mozilla 名稱	說明
altKey	altKey	布爾屬性，表示事件過程中是否按下了 alt 鍵。
cancelBubble	stopPropagation()	用于停止事件進一步沿樹上行。
clientX	clientX	事件的 X 坐標，相對于客戶機。
clientY	clientY	事件的 Y 坐標，相對于客戶機。
ctrlKey	ctrlKey	布爾屬性，表明事件過程中是否按下了 Ctrl 鍵。
fromElement	relatedTarget	對于鼠標事件來說，指的是鼠標從上移走的那個元素。
keyCode	keyCode	用于鍵盤事件，表示所按下的鍵的數(shù)字。對于鼠標事件，其值為 0。
returnValue	preventDefault()	用于防止執(zhí)行事件的默認動作。
screenX	screenX	事件的 X 坐標，相對于屏幕。
screenX	screenY	事件的 Y 坐標，相對于屏幕。
shiftKey	shiftKey	布爾屬性，表明事件過程中是否按下了 Shift 鍵。
srcElement	target	事件最初指派到的元素。
toElement	currentTarget	用于鼠標事件，鼠標移動到的當前元素。
type	type	返回事件名。

附加事件處理程序

Mozilla 提供了兩種方法通過 JavaScript 附加事件。第一種是所有瀏覽器都具備的，即直接在對象上設(shè)置 event 屬性。要設(shè)置 click 事件處理程序，可以向該對象的 onclick 屬性傳遞一個函數(shù)引用：

 
<div id="myDiv">Click me!</div> 

<script> 

function handleEvent(aEvent){ 
 // if aEvent is null, means the Internet Explorer event model, 
 // so get window.event. 
 var myEvent = aEvent ? aEvent : window.event; 
} 


function onPageLoad(){ 
 document.getElementById("myDiv").onclick = handleEvent; 
} 

</script>

Mozilla 完全支持向 DOM 節(jié)點附加監(jiān)聽器的 W3C 標準方式。使用 addEventListener() 和 removeEventListener() 方法的好處是能夠?qū)ν粋€事件類型添加多個監(jiān)聽器。兩種方法都需要三個參數(shù)：事件類型、函數(shù)引用以及監(jiān)聽器是否能夠在捕獲階段捕獲事件的布爾值。如果這個布爾參數(shù)設(shè)為 false，則只捕獲上行的事件。W3C 事件有三個階段：捕獲、到達目標和上行。每個事件對象都有一個 eventPhase 屬性用數(shù)字表示所處的階段（從 0 開始）。每當觸發(fā)一個事件時，事件都從 DOM 的最外層元素即 DOM 樹最頂端的元素開始。然后沿著到目標最近的路徑在 DOM 中下行，稱為捕獲階段。事件到達目標的時候稱為目標抵達階段。到達目標后，事件再沿著 DOM 樹回到最外層的節(jié)點，稱為上行（冒泡）。Internet Explorer 的事件模型只有上行階段，因此，只要將第三個參數(shù)設(shè)置為 false 就能模仿 Internet Explorer 的行為：

 
<div id="myDiv">Click me!</div> 

<script> 

 function handleEvent(aEvent) { 
 // if aEvent is null, it is the Internet Explorer event model, 
 // so get window.event. 
 var myEvent = aEvent ? aEvent : window.event; 
 } 

 function onPageLoad() {
  var element = document.getElementById("myDiv");
 element.addEventListener("click", handleEvent, false); 
 } 
</script>

與設(shè)置屬性相比，addEventListener() 和 removeEventListener() 的優(yōu)點是可以為同一個事件設(shè)置多個監(jiān)聽器，調(diào)用不同的函數(shù)。因此，刪除事件監(jiān)聽器要求傳遞的三個參數(shù)和添加時設(shè)定的三個參數(shù)完全相同。

Mozilla 不支持 Internet Explorer 將“script”標簽轉(zhuǎn)變成事件處理程序的方法，后者為“script”增加了 for 和 event 屬性（如表 5 所示）。也不支持 attachEvent 和 detachEvent 方法。相反，應(yīng)該使用 addEventListener 和 removeEventListener 方法。Internet Explorer 不支持 W3C 事件規(guī)范。

表 5. Mozilla 與 Internet Explorer 的事件方法差異

Internet Explorer 方法	Mozilla 方法	說明
attachEvent(aEventType, aFunctionReference)	addEventListener(aEventType, aFunctionReference, aUseCapture)	向 DOM 元素添加事件監(jiān)聽器。
detachEvent(aEventType, aFunctionReference)	removeEventListener(aEventType, aFunctionReference, aUseCapture)	從 DOM 元素刪除事件監(jiān)聽器。

回頁首

富文本編輯

雖然 Mozilla 自詡為最符合 W3C 標準的瀏覽器，但是如果不存在相關(guān)的 W3C 標準，它也可以支持非標準的功能，如 innerHTML 和富文本編輯。

Mozilla 1.3 實現(xiàn)了 Internet Explorer 的 designMode 特性，將 HTML 文檔變成了一個富文本編輯器字段。變成了編輯器之后，就可以通過 execCommand 在文檔上執(zhí)行命令。Mozilla 不支持 Internet Explorer 的 contentEditable 屬性，后者允許編輯任何組件?？梢允褂?iframe 增加富文本編輯器。

富文本差異

Mozilla 支持通過 IFrameElm.contentDocument 訪問 iframe 文檔對象的 W3C 標準，而 Internet Explorer 要求通過 document.frames["name"] 訪問它，然后再訪問最終得到的 document：

 
 function getIFrameDocument(aID){ 
var rv = null; 

// if contentDocument exists, W3C compliant (Mozilla) 
if (document.getElementById(aID).contentDocument){ 
 rv = document.getElementById(aID).contentDocument; 
} else { 
 // IE 
 ?rv = document.frames[aID].document; 
} 

return rv; 
 }

Mozilla 和 Internet Explorer 的另一個區(qū)別是富文本編輯器所創(chuàng)建的 HTML。Mozilla 默認對生成的標記使用 CSS。但是，Mozilla 允許使用 useCSS execCommand 分別改為 true 和 false 來在 HTML 和 CSS 之間切換。Internet Explorer 總是使用 HTML 標記。

 
 Mozilla (CSS): 
<span style="color: blue;">Big Blue</span> 

 Mozilla (HTML): 
<font color="blue">Big Blue</font> 

 Internet Explorer: 
<FONT color="blue">Big Blue</FONT>

下面列出了 Mozilla 支持的 execCommand 命令：

表 6. 富文本編輯命令

命令名	說明	參數(shù)
bold	決定所選內(nèi)容是否以粗體顯示。	---
createlink	從選中的文本創(chuàng)建 HTML 鏈接。	鏈接的 URL
delete	刪除所選內(nèi)容。	---
fontname	改變所選文本使用的字體。	使用的字體名（比如 Arial）
fontsize	改變所選文本的字體大小。	使用的字體大小
fontcolor	改變所選文本使用的字體顏色。	使用的顏色
indent	縮進光標所在的塊。	---
inserthorizontalrule	在鼠標位置插入 <hr> 元素。	---
insertimage	在鼠標位置插入圖片。	圖片的 URL
insertorderedlist	在當前位置插入有序列表（<ol>）元素。	---
insertunorderedlist	在光標位置插入無序列表（<ul>）元素。	---
italic	切換所選內(nèi)容的的斜體屬性。	---
justifycenter	當前行居中對齊。	---
justifyleft	當前行左對齊。	---
justifyright	當前行右對齊。	---
outdent	減少光標所在塊的縮進。	---
redo	恢復(fù)撤銷的上一個命令。	---
removeformat	去掉所選內(nèi)容的全部格式。	---
selectall	選擇富文本編輯器中的全部內(nèi)容。	---
strikethrough	切換所選文本的刪除線。	---
subscript	將當前選擇的內(nèi)容改為下標。	---
superscript	當前所選內(nèi)容轉(zhuǎn)化為上標。	---
underline	添加或刪除所選文本的下劃線。	---
undo	撤銷上一次執(zhí)行的動作。	---
unlink	刪除所選內(nèi)容的鏈接信息。	---
useCSS	在生成的標記中使用/不使用 CSS。	布爾值

更多信息請訪問 DevEdge。

回頁首

XML 差異

Mozilla 對 XML 及 XML 相關(guān)技術(shù)提供了強大的支持，如 XSLT 和 Web 服務(wù)。也支持 Internet Explorer 的一些非標準擴展，如 XMLHttpRequest。

如何處理 XML

和標準 HTML 一樣，Mozilla 也支持 W3C XML DOM 規(guī)范，允許執(zhí)行 XML 文檔大多數(shù)方面的操作。和 Internet Explorer XML DOM 的區(qū)別多數(shù)是由于 Internet Explorer 的非標準行為造成的。可能最常見的一個差別就是處理空白文本節(jié)點的方式。生成的 XML 通常在 XML 節(jié)點之間帶有空白。Internet Explorer 在使用 XMLNode.childNodes[] 的時候不包含這些空白節(jié)點。但是在 Mozilla 中，這些節(jié)點也包含在數(shù)組中。

 
 XML: 
<?xml version="1.0"?> 
<myXMLdoc xmlns:myns="http://myfoo.com"> 
 <myns:foo>bar</myns:foo> 
</myXMLdoc> 

 JavaScript: 
var myXMLDoc = getXMLDocument().documentElement; 
alert(myXMLDoc.childNodes.length);

JavaScript 的第一行加載 XML 文檔并通過檢索 documentElement 訪問根元素（myXMLDoc）。第二行僅僅告訴您子節(jié)點的個數(shù)。按照 W3C 規(guī)范，相連的空格和新行字符合并為一個文本節(jié)點。對于 Mozilla，myXMLdoc 節(jié)點有三個孩子：包含新行字符和兩個空格的文本節(jié)點、myns:foo 節(jié)點和包含新行字符的另一個文本節(jié)點。但是 Internet Explorer 沒有遵守這一點，上面的代碼將返回“1”，即 myns:foo 節(jié)點。因此要遍歷子節(jié)點和忽略文本節(jié)點，必須區(qū)分出這樣的節(jié)點。

如前所述，每個節(jié)點都有 nodeType 屬性表示節(jié)點類型。比如，元素節(jié)點類型是 1，而文檔節(jié)點類型是 9。要丟掉文本節(jié)點，必須檢查類型 3（文本節(jié)點）和 8（注釋節(jié)點）。

 
 XML: 
<?xml version="1.0"?> ? 
<myXMLdoc xmlns:myns="http://myfoo.com"> 
 <myns:foo>bar</myns:foo> 
</myXMLdoc> ? 

 JavaScript: 
var myXMLDoc = getXMLDocument().documentElement; 
var myChildren = myXMLDoc.childNodes; 
for (var run = 0; run < myChildren.length; run++){ 
 if ( (myChildren[run].nodeType != 3) && 
(myChildren[run].nodeType != 8) ){ 
 // not a text or comment node 
 } 
}

XML 數(shù)據(jù)島

Internet Explorer 有一個非標準特性稱為 XML 數(shù)據(jù)島，它允許使用非標準 HTML 標簽 <xml> 在 HTML 文檔中嵌入 XML。Mozilla 不支持 XML 數(shù)據(jù)島，將其作為未知的 HTML 標簽處理?？梢杂?XHTML 來實現(xiàn)同樣的功能，但是由于 Internet Explorer 對 XHTML 的支持很弱，這通常不是一個好辦法。

一種跨瀏覽器的解決方法是使用 DOM 解析器，它解析包含序列化 XML 文檔的字符串并為解析后的 XML 生成文檔。Mozilla 使用 DOMParser 類，它接受序列化字符串并用它創(chuàng)建 XML 文檔。在 Internet Explorer 可用 ActiveX 實現(xiàn)同樣的功能。新增的 Microsoft.XMLDOM 生成 XML 文檔，并且有一個 loadXML 方法可以接收字符串。比如下面的代碼：

 
 IE XML data island: 
.. 
<xml id="xmldataisland"> 
 <foo>bar</foo> 
</xml> 

 Cross-browser solution: 
var xmlString = "<xml 
id=\"xmldataisland\"><foo>bar</foo></xml>"; 
var myDocument; 
 
if (document.implementation.createDocument){ 
 // Mozilla, create a new DOMParser 
 var parser = new DOMParser(); 
 myDocument = parser.parseFromString(xmlString, "text/xml"); 
} else if (window.ActiveXObject){ 
 // Internet Explorer, create a new XML document using ActiveX 
 // and use loadXML as a DOM parser. 
 myDocument = new ActiveXObject("Microsoft.XMLDOM") 
 myDocument.async="false"; 
 myDocument.loadXML(xmlString); 
}

XML HTTP 請求

Internet Explorer 允許使用 MSXML 的 XMLHTTP 類發(fā)送和檢索 XML 文件，該類通過 ActiveX 使用 new ActiveXObject("Msxml2.XMLHTTP") 或者 new ActiveXObject("Microsoft.XMLHTTP") 進行實例化。由于不存在完成這一任務(wù)的標準方法，Mozilla 在 JavaScript 全局對象 XMLHttpRequest 中提供了同等的功能。該對象默認生成異步請求。

使用 new XMLHttpRequest() 實例化該對象后，可用 open 方法指定使用的請求類型（GET 或 POST）、加載的文件以及是否異步執(zhí)行。如果采用異步調(diào)用，則為 onload 成員提供一個函數(shù)引用，請求完成的時候調(diào)用它。

				
					Synchronous request:
				 

 var myXMLHTTPRequest = new XMLHttpRequest(); 
 myXMLHTTPRequest.open("GET", "data.xml", false); 
 myXMLHTTPRequest.send(null); 

 var myXMLDocument = myXMLHTTPRequest.responseXML; 


					Asynchronous request:
				 

 var myXMLHTTPRequest; 

 function 
					xmlLoaded
				() { 
 var myXMLDocument = myXMLHTTPRequest.responseXML; 
 } 

 function loadXML(){ 
 myXMLHTTPRequest = new XMLHttpRequest();

 myXMLHTTPRequest.open("GET", "data.xml", true);

 myXMLHTTPRequest.onload =

 function 
					xmlLoaded
				() { 
 var myXMLDocument = myXMLHTTPRequest.responseXML; 
 } 

 function loadXML(){ 
 myXMLHTTPRequest = new XMLHttpRequest();

 myXMLHTTPRequest.open("GET", "data.xml", true);

 myXMLHTTPRequest.onload = 
					xmlLoaded
				; 

 myXMLHTTPRequest.send(null); 
 }

表 7 列出了 Mozilla XMLHttpRequest 提供的方法和屬性。

表 7. XMLHttpRequest 方法和屬性

名稱說明

void abort() 如果請求依然在運行則停止它。

string getAllResponseHeaders() 用一個字符串返回所有的請求頭。

string getResponseHeader(string headerName) 返回指定頭的值。

functionRef onerror 射之后，請求中發(fā)生錯誤時將調(diào)用指定的函數(shù)。

functionRef onload 射之后，請求成功完成并收到響應(yīng)后將調(diào)用引用的函數(shù)。用于異步請求。

void open (string HTTP_Method, string URL)

void open (string HTTP_Method, string URL, boolean async, string userName, string password) 初始化對指定 URL 的請求，使用 GET 或 POST HTTP 方法。要發(fā)送請求需要在初始化之后調(diào)用 send() 方法。如果 async 是 false，則請求是同步的，否則默認使用異步請求。如果需要，可以為給定的 URL 指定用戶名和口令。

int readyState

請求的狀態(tài)。可能值包括：

0	UNINITIALIZED —— 尚未調(diào)用 open()。
1	LOADING —— 尚未調(diào)用 send()。
2	LOADED —— 調(diào)用了 send()，頭和狀態(tài)可用。
3	INTERACTIVE —— 下載中，responseText 保存下載的部分數(shù)據(jù)。
4	COMPLETED —— 全部操作已完成。

string responseText 包含響應(yīng)字符串。

DOMDocument responseXML 包含響應(yīng) DOM Document。

void send(variant body) 發(fā)起請求。如果定義了 body，則作為 POST 請求體發(fā)送。body 可以是 XML 文檔或者序列化 XML 文檔的字符串。

void setRequestHeader (string headerName, string headerValue) 設(shè)置 HTTP 請求頭以便在 HTTP 請求中使用。必須在 open() 之后調(diào)用。

string status HTTP 請求的狀態(tài)碼。

XSLT 差異

Mozilla 支持 XSL Transformations（XSLT）1.0。還允許 JavaScript 執(zhí)行 XSLT 轉(zhuǎn)換和對文檔運行 XPATH。

Mozilla 要求使用 XML mimetype（text/xml 或 application/xml）發(fā)送 XML 和包含樣式表的 XSLT 文件。這也是 XSLT 不能在 Mozilla 而能在 Internet Explorer 中運行的主要原因之一。Mozilla 在這方面很嚴格。

Internet Explorer 5.0 和 5.5 支持 XSLT 工作草案，后者與最終的 1.0 推薦標準存在根本的區(qū)別。判斷 XSLT 使用哪一個版本的最簡單辦法就是查看名稱空間。1.0 推薦標準的名稱空間是 http://www.w3.org/1999/XSL/Transform，而工作草案的名稱空間是 http://www.w3.org/TR/WD-xsl。Internet Explorer 6 為保持向后兼容而支持工作草案，但是 Mozilla 不支持工作草案，僅支持最終推薦標準。

如果 XSLT 需要判斷瀏覽器，可以查詢 “xsl:vendor” 系統(tǒng)屬性。Mozilla 的 XSLT 引擎將報告 “Transformiix”，Internet Explorer 則返回 “Microsoft”。

 
<xsl:if test="system-property('xsl:vendor') = 'Transformiix'"> 
<!-- Mozilla specific markup --> 
</xsl:if> 
<xsl:if test="system-property('xsl:vendor') = 'Microsoft'"> 
<!-- Internet Explorer specific markup --> 
</xsl:if>

Mozilla 還為 XSLT 提供了 JavaScript 接口，Web 站點可以在內(nèi)存中完成 XSLT 轉(zhuǎn)換?？梢允褂?XSLTProcessor JavaScript 全局對象完成這項工作。XSLTProcessor 需要加載 XML 和 XSLT 文件，因為需要它們的 DOM 文檔。XSLTProcessor 導(dǎo)入的 XSLT 文檔允許修改 XSLT 參數(shù)。XSLTProcessor 可以使用 transformToDocument() 創(chuàng)建標準文檔，或者使用 transformToFragment() 生成文檔片斷，您可輕松地將其添加到其他 DOM 文檔中。下面是一個例子：

 
var xslStylesheet; 
var xsltProcessor = new XSLTProcessor(); 

// load the xslt file, example1.xsl 
var myXMLHTTPRequest = new XMLHttpRequest(); 
myXMLHTTPRequest.open("GET", "example1.xsl", false); 
myXMLHTTPRequest.send(null); 

// get the XML document and import it 
xslStylesheet = myXMLHTTPRequest.responseXML; 

xsltProcessor.importStylesheet(xslStylesheet); 

// load the xml file, example1.xml 
myXMLHTTPRequest = new XMLHttpRequest(); 
myXMLHTTPRequest.open("GET", "example1.xml", false); 
myXMLHTTPRequest.send(null); 

var xmlSource = myXMLHTTPRequest.responseXML; 

var resultDocument = xsltProcessor.transformToDocument(xmlSource);

創(chuàng)建 XSLTProcessor 后使用 XMLHttpRequest 加載 XSLT 文件。XMLHttpRequest 的 responseXML 成員包含 XSLT 的文件的 XML 文檔，傳遞給 importStylesheet。然后再使用 XMLHttpRequest 打開需要轉(zhuǎn)換的源 XML 文檔，將該文檔傳遞給 XSLTProcessor 的 transformToDocument 方法。表 8 列出了 XSLTProcessor 的方法。

表 8. XSLTProcessor 方法

方法	說明
void importStylesheet(Node styleSheet)	導(dǎo)入 XSLT 樣式表。`styleSheet` 參數(shù)是 XSLT 樣式表 DOM 文檔的根節(jié)點。
DocumentFragment transformToFragment(Node source, Document owner)	應(yīng)用通過 `importStylesheet` 方法導(dǎo)入的樣式表，并生成 DocumentFragment，通過這種方法來轉(zhuǎn)換節(jié)點 `source`。`owner` 指定了 DocumentFragment 屬于哪個 DOM 文檔，以便添加到相應(yīng)的 DOM 文檔中。
Document transformToDocument(Node source)	應(yīng)用通過 `importStylesheet` 導(dǎo)入的樣式表，并返回一個獨立的 DOM 文檔，通過這種方法來轉(zhuǎn)換節(jié)點 `source`。
void setParameter(String namespaceURI, String localName, Variant value)	設(shè)置導(dǎo)入的 XSLT 樣式表中的參數(shù)。
Variant getParameter(String namespaceURI, String localName)	獲得導(dǎo)入 XSLT 樣式表的參數(shù)值。
void removeParameter(String namespaceURI, String localName)	從導(dǎo)入的 XSLT 樣式表中刪除所有已設(shè)置的參數(shù)，使用 XSLT 定義的默認值。
void clearParameters()	刪除所有已設(shè)置的參數(shù)并將其設(shè)置為 XSLT 樣式表的默認參數(shù)。
void reset()	刪除所有的參數(shù)和樣式表。

回頁首

結(jié)束語

本文介紹了 Web 應(yīng)用程序開發(fā)人員嘗試使其應(yīng)用程序在基于 Mozilla 的瀏覽器中工作時面臨的常見問題。開發(fā) Web 應(yīng)用程序時，一定要考慮到可能存在的瀏覽器差異并牢記在心。參考資料中提供了兩篇很好的參考資料，深入探討了跨瀏覽器開發(fā)問題。根據(jù)這些原則開發(fā)的 Web 應(yīng)用程序可以在其他瀏覽器乃至其他平臺上工作。

參考資料

您可以參閱本文在 developerWorks 全球站點上的英文原文。
Dynamic HTML: The Definitive Reference (2nd Edition) 詳細討論了跨瀏覽器 DHTML 開發(fā)的方方面面（O'Reilly & Associates. Inc.，2002 年）。
JavaScript: The Definitive Guide (4th Edition) 介紹了 JavaScript 的最新版本（1.5），討論了瀏覽器的細微差別（O'Reilly & Associates, Inc.，2002 年）。
Netscape Devedge 討論了開發(fā)人員在使用基于 Mozilla 的瀏覽器的時候遇到的一些問題。糟糕的是，AOL 去年把它從在線書架上拿了下來，不過已經(jīng)存檔。
Mozilla.org 上的 Web 開發(fā)文檔為 Web 開發(fā)人員提供了關(guān)于 Mozilla 的很好的信息。
developerWorks Web 開發(fā)專區(qū) 專門發(fā)表各種基于 Web 的解決方案的文章。
通過參與 developerWorks blogs 加入 developerWorks 社區(qū)。

關(guān)于作者


		Doron Rosenberg 在加入 IBM Browser Development Center 之前效力于 Netscape。他為 Mozilla 項目工作了五年多?？梢酝ㄟ^ doronr@us.ibm.com 聯(lián)系 Doron。

xmlLoaded ; myXMLHTTPRequest.send(null); }

表 7 列出了 Mozilla XMLHttpRequest 提供的方法和屬性。

表 7. XMLHttpRequest 方法和屬性

名稱說明

void abort() 如果請求依然在運行則停止它。

string getAllResponseHeaders() 用一個字符串返回所有的請求頭。

string getResponseHeader(string headerName) 返回指定頭的值。

functionRef onerror 射之后，請求中發(fā)生錯誤時將調(diào)用指定的函數(shù)。

functionRef onload 射之后，請求成功完成并收到響應(yīng)后將調(diào)用引用的函數(shù)。用于異步請求。

int readyState

請求的狀態(tài)?？赡苤蛋ǎ?

0	UNINITIALIZED —— 尚未調(diào)用 open()。
1	LOADING —— 尚未調(diào)用 send()。
2	LOADED —— 調(diào)用了 send()，頭和狀態(tài)可用。
3	INTERACTIVE —— 下載中，responseText 保存下載的部分數(shù)據(jù)。
4	COMPLETED —— 全部操作已完成。

string responseText 包含響應(yīng)字符串。

DOMDocument responseXML 包含響應(yīng) DOM Document。

void send(variant body) 發(fā)起請求。如果定義了 body，則作為 POST 請求體發(fā)送。body 可以是 XML 文檔或者序列化 XML 文檔的字符串。

void setRequestHeader (string headerName, string headerValue) 設(shè)置 HTTP 請求頭以便在 HTTP 請求中使用。必須在 open() 之后調(diào)用。

string status HTTP 請求的狀態(tài)碼。

XSLT 差異

Mozilla 支持 XSL Transformations（XSLT）1.0。還允許 JavaScript 執(zhí)行 XSLT 轉(zhuǎn)換和對文檔運行 XPATH。

如果 XSLT 需要判斷瀏覽器，可以查詢 “xsl:vendor” 系統(tǒng)屬性。Mozilla 的 XSLT 引擎將報告 “Transformiix”，Internet Explorer 則返回 “Microsoft”。

 
<xsl:if test="system-property('xsl:vendor') = 'Transformiix'"> 
<!-- Mozilla specific markup --> 
</xsl:if> 
<xsl:if test="system-property('xsl:vendor') = 'Microsoft'"> 
<!-- Internet Explorer specific markup --> 
</xsl:if>

 
var xslStylesheet; 
var xsltProcessor = new XSLTProcessor(); 

// load the xslt file, example1.xsl 
var myXMLHTTPRequest = new XMLHttpRequest(); 
myXMLHTTPRequest.open("GET", "example1.xsl", false); 
myXMLHTTPRequest.send(null); 

// get the XML document and import it 
xslStylesheet = myXMLHTTPRequest.responseXML; 

xsltProcessor.importStylesheet(xslStylesheet); 

// load the xml file, example1.xml 
myXMLHTTPRequest = new XMLHttpRequest(); 
myXMLHTTPRequest.open("GET", "example1.xml", false); 
myXMLHTTPRequest.send(null); 

var xmlSource = myXMLHTTPRequest.responseXML; 

var resultDocument = xsltProcessor.transformToDocument(xmlSource);

表 8. XSLTProcessor 方法

方法	說明
void importStylesheet(Node styleSheet)	導(dǎo)入 XSLT 樣式表。`styleSheet` 參數(shù)是 XSLT 樣式表 DOM 文檔的根節(jié)點。
DocumentFragment transformToFragment(Node source, Document owner)	應(yīng)用通過 `importStylesheet` 方法導(dǎo)入的樣式表，并生成 DocumentFragment，通過這種方法來轉(zhuǎn)換節(jié)點 `source`。`owner` 指定了 DocumentFragment 屬于哪個 DOM 文檔，以便添加到相應(yīng)的 DOM 文檔中。
Document transformToDocument(Node source)	應(yīng)用通過 `importStylesheet` 導(dǎo)入的樣式表，并返回一個獨立的 DOM 文檔，通過這種方法來轉(zhuǎn)換節(jié)點 `source`。
void setParameter(String namespaceURI, String localName, Variant value)	設(shè)置導(dǎo)入的 XSLT 樣式表中的參數(shù)。
Variant getParameter(String namespaceURI, String localName)	獲得導(dǎo)入 XSLT 樣式表的參數(shù)值。
void removeParameter(String namespaceURI, String localName)	從導(dǎo)入的 XSLT 樣式表中刪除所有已設(shè)置的參數(shù)，使用 XSLT 定義的默認值。
void clearParameters()	刪除所有已設(shè)置的參數(shù)并將其設(shè)置為 XSLT 樣式表的默認參數(shù)。
void reset()	刪除所有的參數(shù)和樣式表。

回頁首

結(jié)束語

參考資料

您可以參閱本文在 developerWorks 全球站點上的英文原文。
Dynamic HTML: The Definitive Reference (2nd Edition) 詳細討論了跨瀏覽器 DHTML 開發(fā)的方方面面（O'Reilly & Associates. Inc.，2002 年）。
JavaScript: The Definitive Guide (4th Edition) 介紹了 JavaScript 的最新版本（1.5），討論了瀏覽器的細微差別（O'Reilly & Associates, Inc.，2002 年）。
Netscape Devedge 討論了開發(fā)人員在使用基于 Mozilla 的瀏覽器的時候遇到的一些問題。糟糕的是，AOL 去年把它從在線書架上拿了下來，不過已經(jīng)存檔。
Mozilla.org 上的 Web 開發(fā)文檔為 Web 開發(fā)人員提供了關(guān)于 Mozilla 的很好的信息。
developerWorks Web 開發(fā)專區(qū) 專門發(fā)表各種基于 Web 的解決方案的文章。
通過參與 developerWorks blogs 加入 developerWorks 社區(qū)。

關(guān)于作者


		Doron Rosenberg 在加入 IBM Browser Development Center 之前效力于 Netscape。他為 Mozilla 項目工作了五年多。可以通過 doronr@us.ibm.com 聯(lián)系 Doron。