前段時間給神奇一刻做一個加載隨機圖片的JavaScript效果，圖片信息需要放在XML文件里。原來用Flash做過，對actionscript里加載XML文件還比較熟，但是用JavaScript加載XML還是第一次。原來只知道在IE中可以用ActiveXObjext對象來做，但一直不知道如何在Mozilla下用js加載XML，于是google到了這篇文章，非常詳細！
文章原文地址：http://www.sitepoint.com/article/xml-javascript-mozilla
在我的文章《用JavaScript來讀取和顯示服務器端的XML文件》中，我討論了在微軟的Internet Explorer中使用JavaScript來操作XML文件。而現(xiàn)在，我將告訴你們在Mozilla中如何用JavaScript來讀取和使用XML文件中的數(shù)據(jù)。我們將會看到如何顯示標簽（March注：tag）中的值、標簽中的屬性值等等。
從現(xiàn)在起，我不會特意提及Mozilla，因為我們只會涉及Mozilla，包括Netscape 6.x和7.x等（March注：當然也包括Firefox、Flock）。然而當提及Internet Explorer（MSIE或IE）時我會特別說明。
XML文件范例
我將使用和我上一篇文章相同的XML文件，這樣會讓已經(jīng)明白那一個XML文件的人比較容易理解。看看下面的XML文件：
<?xml version="1.0" ?>
<company>
<employee id="001" sex="M" age="20">Premshree Pillai</employee>
<employee id="002" sex="M" age="24">Kumar Singh</employee>
<employee id="003" sex="M" age="21">Ranjit Kapoor<turnover>
<year id="2000">100,000</year>
<year id="2001">140,000</year>
<year id="2002">200,000</year>
</turnover>
</company>
如你所見，上面的XML文件展示了一個公司雇員的詳細信息：用<employee>的值（或者說節(jié)點值）儲存了員工姓名，其他的諸如員工編號（id）、性別（sex）和年齡（age）的信息則被儲存在了相同標簽（<employee>）id、sex和age屬性中。文件同時用標簽<turnover>的節(jié)點值儲存了公司的營業(yè)額（turnover），在該標簽的year屬性中儲存了相應的時間信息。
在接下來的章節(jié)中，我們將操作上面的XML文件，使之為我們所用。
XML和JavaScript
在我們開始讀取以及更高級的操作這個XML文件之前，我們必須得確定用戶是否在使用Mozilla瀏覽器，這點很重要。
檢測Mozilla
很顯然，你不可能只針對一個瀏覽器來編寫你的基于XML的JavaScript應用，你需要很容易的來支持多種瀏覽器。然而，如何編寫你的應用得取決于你的用戶使用什么樣的瀏覽器。
要檢測Mozilla，我們只需要使用這個簡單的變量：
var moz = (typeof document.implementation != 'undefined') && (typeof
document.implementation.createDocument != 'undefined');
這個變量可以作為一個布爾值來使用：
if(moz) {
// 的確是Mozilla!!
} else {
// 別的瀏覽器...
}
加載XML文件
當我們確定了瀏覽器后，就可以加載XML文件了：
var xmlDoc=document.implementation.createDocument("", "doc", null)
xmlDoc.load("someXMLFile.xml");
xmlDoc.onload = someProcessingFunction;
上面這段代碼的第一行創(chuàng)建了一個xmlDoc對象的實例；第二行加載我們需要的XML文件（本例中為someXMLFile.xml）；第三行處理或操作了我們剛才加載的XML文件。
現(xiàn)在，最好用一個不同的函數(shù)來加載XML文件：
var xmlDoc;
function importXML(file) {
xmlDoc=document.implementation.createDocument("", "doc", null)
xmlDoc.load(file);
xmlDoc.onload = readXML;
}
同時在Mozilla和IE中加載XML文件
Mozilla中絕大部分的操作都可以用于IE中，然而，加載XML文件卻不盡相同，讓我們看看這個能夠同時在IE和Mozilla中加載XML文件的函數(shù)：
var xmlDoc;
function importXML(file) {
var xmlDoc;
var moz = (typeof document.implementation != 'undefined') && (typeof
document.implementation.createDocument != 'undefined');
var ie = (typeof window.ActiveXObject != 'undefined');
if (moz) {
xmlDoc = document.implementation.createDocument("", "", null)
xmlDoc.onload = readXML;
} else if (ie) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
while(xmlDoc.readyState != 4) {};
}
xmlDoc.load(file);
}
上面的函數(shù)既可以在Mozilla中加載XML文件，又可以在IE中加載。現(xiàn)在，要使用這個函數(shù)來加載XML文件，我們需要如下調(diào)用：
importXML("YourXMLFile.xml");
注意，變量ie被用來檢測IE。IE使用的是一個ActiveX Object對象來加載一個使用Microsoft.XMLDOM對象解析的XML文件（March注：這句有些不太明白，附英文原文：IE uses an ActiveX Object to load an XML file using the Microsoft.XMLDOM object.）。接下來我們來了解一些可以用來獲取和操作XML數(shù)據(jù)的方法。
getElementsByTagName() //March注：通過標簽名來獲取元素
這個方法是可以在XMLDOM（Document Object Model，文檔對象模型）對象中使用的最普遍的方法。正如這個方法的名字所示的那樣，這個方法會返回特定元素下的和所給標簽名相同所有元素（也可以稱為元素）。從根本上說，它返回了一個對象集合（object collection）（March注：當然，集合中，對象的個數(shù)有可能為1和0。）。例如：
var xmlFile = xmlDoc.getElementsByTagName("company");
上面這段代碼，變量xmlFile中將儲存一個集合了所有<company>元素的對象集合。注意，你所傳遞給getElementsByTagName()方法的參數(shù)是對大小寫敏感的，例如：getElementsByTagName("company")就和getElementsByTagName("ComPanY")的返回值不同。
查找擁有相同標簽的元素的個數(shù)
在文章開頭的那個XML文件中，我們只看到了一個<company>標簽。由getElementsByTagName()所返回的對象集合有一個儲存長度的方法，這個方法給出了當前對象集合中的元素個數(shù)。比如，要查看<company>標簽的個數(shù)，就可以用下面這段代碼：
var noOfCompanyTags = xmlDoc.getElementsByTagName("company").length;
如果用document.write()方法來顯示變量noOfCompanyTags將會顯示1。
顯示標簽的內(nèi)容
再次回到開篇的那個XML文件，假設這次我們想顯示第一個雇員的姓名。現(xiàn)在，標簽<employee>是包含于標簽<company>中的，所以我們首先需要得到<company>標簽的集合，然后通過這個集合來獲取所有的<employee>標簽。讓我們一步步地來看看如何顯示第一個雇員的姓名：
var companies = xmlDoc.getElementsByTagName("company");
上面的代碼返回了一個<company>標簽的對象集合，這個集合被儲存在了變量companies中。注意，companies是一個數(shù)組（March注：因為其儲存的是一個對象集合，數(shù)組的每一個元素為一個標簽為&company>的元素對象，本例中數(shù)組只有一個元素，因為只有一個標簽為&company>的元素）。
var employees = companies[0].getElementsByTagName("employee");
上面的代碼給變量employees返回了一個<employee>標簽的對象集合，同樣以數(shù)組的形式返回。注意companies變量的索引號（0），知所以這樣是因為我們只需要數(shù)組的第一個元素，數(shù)組只有一個元素，所以我們用索引數(shù)0來獲得這個元素。
要顯示第一個雇員的姓名，我們需要用下面的代碼：
document.write(employees[0].firstChild.nodeValue);
上面的代碼將顯示Premshree Pillai。很顯然，變量employees是一個擁有三個元素的數(shù)組，所以，要顯示第二個雇員的姓名，我們可以用下面的代碼：
document.write(employees[1].firstChild.nodeValue);
上面的代碼將會顯示Kumar Singh。上面用來顯示雇員姓名（Premshree Pillai）的所有代碼可以簡化為下面這段代碼：
document.write(xmlDoc.getElementsByTagName("company")[0].getElementsByTagName("employee")[0]
.firstChild.nodeValue);
存取標簽的屬性
以屬性的形式在XML文件中存儲信息是很普遍的。因此，能夠存取XML文件中的屬性對我們非常重要。在我們的XML范例中，我們儲存了很多雇員的信息，包括id、sex和age，都在<employee>標簽中。要引用第一個雇員的年齡，我們得用如下代碼：
document.write(employees[0].getAttribute("age"));
上面的代碼會輸出20。這段代碼對對象employees[0]運用了方法getAttribute()，我們能夠運用下面的代碼得到相同的結(jié)果：
document.write(xmlDoc.getElementsByTagName("company")[0].getElementsByTagName("employee")[0]
.getAttribute("age"));
現(xiàn)在，假設你想在表格中顯示所有雇員的詳細信息（編號id、性別sex和年齡age）。要完成這項工作，我們必須遍歷所有的<employee>標簽。下面是全部的代碼（但不包括加載XML文件的代碼）：
var companies=xmlDoc.getElementsByTagName("company");
var employees=companies[0].getElementsByTagName("employee");
document.write('<table border="1">');
document.write('<tr><th>id</th><th>Sex</th><th>Age</th></tr>');
for(var i=0; i<employees.length; i++) {
document.write('<tr>');
document.write('<td>' + employees[i].getAttribute("id") + '</td>');
document.write('<td>' + employees[i].getAttribute("sex") + '</td>');
document.write('<td>' + employees[i].getAttribute("age") + '</td>');
document.write('</tr>');
}
document.write('<table>');
上面代碼在Mozilla中將生成如下效果：
是否能夠修改XML文件？
不行，使用客戶端JavaScript無法修改XML文件。你可以在你的客戶端JavaScript編寫的應用中對一個外部XML文件的內(nèi)容任意操作來顯示你所希望得到的內(nèi)容，但是卻不能使用用戶的輸入來修改XML文件。
總結(jié)
我們現(xiàn)在知道了檢測Mozilla瀏覽器、用JavaScript加載XML文檔以及在Mozilla中運用JavaScript來操作XML中的內(nèi)容。運用XML和客戶端JavaScript可以創(chuàng)建幾個簡單的應用：
- 你可以用XML文件儲存一點信息，然后用JavaScript來獲取你所需要的信息
- 你可以創(chuàng)建一些像“新聞紙帶機”的東西，儲存一些新聞，然后用JavaScript讀取新聞項目。
這些指示XML和客戶端JavaScript的一小部分應用。希望這篇文章能夠給你一些在Mozilla中運用XML和客戶端JavaScript的指導性想法。