JAVA & XML & JAVASCRIPT & AJAX & CSS

前段時(shí)間給神奇一刻做一個(gè)加載隨機(jī)圖片的JavaScript效果，圖片信息需要放在XML文件里。原來用Flash做過，對(duì)actionscript里加載XML文件還比較熟，但是用JavaScript加載XML還是第一次。原來只知道在IE中可以用ActiveXObjext對(duì)象來做，但一直不知道如何在Mozilla下用js加載XML，于是google到了這篇文章，非常詳細(xì)！

文章原文地址：http://www.sitepoint.com/article/xml-javascript-mozilla

在我的文章《用JavaScript來讀取和顯示服務(wù)器端的XML文件》中，我討論了在微軟的Internet Explorer中使用JavaScript來操作XML文件。而現(xiàn)在，我將告訴你們?cè)贛ozilla中如何用JavaScript來讀取和使用XML文件中的數(shù)據(jù)。我們將會(huì)看到如何顯示標(biāo)簽（March注：tag）中的值、標(biāo)簽中的屬性值等等。

從現(xiàn)在起，我不會(huì)特意提及Mozilla，因?yàn)槲覀冎粫?huì)涉及Mozilla，包括Netscape 6.x和7.x等（March注：當(dāng)然也包括Firefox、Flock）。然而當(dāng)提及Internet Explorer（MSIE或IE）時(shí)我會(huì)特別說明。

XML文件范例

我將使用和我上一篇文章相同的XML文件，這樣會(huì)讓已經(jīng)明白那一個(gè)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文件展示了一個(gè)公司雇員的詳細(xì)信息：用<employee>的值（或者說節(jié)點(diǎn)值）儲(chǔ)存了員工姓名，其他的諸如員工編號(hào)（id）、性別（sex）和年齡（age）的信息則被儲(chǔ)存在了相同標(biāo)簽（<employee>）id、sex和age屬性中。文件同時(shí)用標(biāo)簽<turnover>的節(jié)點(diǎn)值儲(chǔ)存了公司的營(yíng)業(yè)額（turnover），在該標(biāo)簽的year屬性中儲(chǔ)存了相應(yīng)的時(shí)間信息。

在接下來的章節(jié)中，我們將操作上面的XML文件，使之為我們所用。

XML和JavaScript

在我們開始讀取以及更高級(jí)的操作這個(gè)XML文件之前，我們必須得確定用戶是否在使用Mozilla瀏覽器，這點(diǎn)很重要。

檢測(cè)Mozilla

很顯然，你不可能只針對(duì)一個(gè)瀏覽器來編寫你的基于XML的JavaScript應(yīng)用，你需要很容易的來支持多種瀏覽器。然而，如何編寫你的應(yīng)用得取決于你的用戶使用什么樣的瀏覽器。

要檢測(cè)Mozilla，我們只需要使用這個(gè)簡(jiǎn)單的變量：

var moz = (typeof document.implementation != 'undefined') && (typeof
document.implementation.createDocument != 'undefined');

這個(gè)變量可以作為一個(gè)布爾值來使用：

				
						if(moz) {
 // 的確是Mozilla!!
} else {
 // 別的瀏覽器...
}
				
		

加載XML文件

當(dāng)我們確定了瀏覽器后，就可以加載XML文件了：

				
						var xmlDoc=document.implementation.createDocument("", "doc", null)
xmlDoc.load("someXMLFile.xml");
xmlDoc.onload = someProcessingFunction;
				
		

上面這段代碼的第一行創(chuàng)建了一個(gè)xmlDoc對(duì)象的實(shí)例；第二行加載我們需要的XML文件（本例中為someXMLFile.xml）；第三行處理或操作了我們剛才加載的XML文件。

現(xiàn)在，最好用一個(gè)不同的函數(shù)來加載XML文件：

				
						var xmlDoc;
function importXML(file) {
 xmlDoc=document.implementation.createDocument("", "doc", null)
 xmlDoc.load(file);
 xmlDoc.onload = readXML;
}
				
		

同時(shí)在Mozilla和IE中加載XML文件

Mozilla中絕大部分的操作都可以用于IE中，然而，加載XML文件卻不盡相同，讓我們看看這個(gè)能夠同時(shí)在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)在，要使用這個(gè)函數(shù)來加載XML文件，我們需要如下調(diào)用：

importXML("YourXMLFile.xml");

注意，變量ie被用來檢測(cè)IE。IE使用的是一個(gè)ActiveX Object對(duì)象來加載一個(gè)使用Microsoft.XMLDOM對(duì)象解析的XML文件（March注：這句有些不太明白，附英文原文：IE uses an ActiveX Object to load an XML file using the Microsoft.XMLDOM object.）。接下來我們來了解一些可以用來獲取和操作XML數(shù)據(jù)的方法。

getElementsByTagName() //March注：通過標(biāo)簽名來獲取元素

這個(gè)方法是可以在XMLDOM（Document Object Model，文檔對(duì)象模型）對(duì)象中使用的最普遍的方法。正如這個(gè)方法的名字所示的那樣，這個(gè)方法會(huì)返回特定元素下的和所給標(biāo)簽名相同所有元素（也可以稱為元素）。從根本上說，它返回了一個(gè)對(duì)象集合（object collection）（March注：當(dāng)然，集合中，對(duì)象的個(gè)數(shù)有可能為1和0。）。例如：

				
						var xmlFile = xmlDoc.getElementsByTagName("company");
				
		

上面這段代碼，變量xmlFile中將儲(chǔ)存一個(gè)集合了所有<company>元素的對(duì)象集合。注意，你所傳遞給getElementsByTagName()方法的參數(shù)是對(duì)大小寫敏感的，例如：getElementsByTagName("company")就和getElementsByTagName("ComPanY")的返回值不同。

查找擁有相同標(biāo)簽的元素的個(gè)數(shù)

在文章開頭的那個(gè)XML文件中，我們只看到了一個(gè)<company>標(biāo)簽。由getElementsByTagName()所返回的對(duì)象集合有一個(gè)儲(chǔ)存長(zhǎng)度的方法，這個(gè)方法給出了當(dāng)前對(duì)象集合中的元素個(gè)數(shù)。比如，要查看<company>標(biāo)簽的個(gè)數(shù)，就可以用下面這段代碼：

var noOfCompanyTags = xmlDoc.getElementsByTagName("company").length;

如果用document.write()方法來顯示變量noOfCompanyTags將會(huì)顯示1。

顯示標(biāo)簽的內(nèi)容

再次回到開篇的那個(gè)XML文件，假設(shè)這次我們想顯示第一個(gè)雇員的姓名。現(xiàn)在，標(biāo)簽<employee>是包含于標(biāo)簽<company>中的，所以我們首先需要得到<company>標(biāo)簽的集合，然后通過這個(gè)集合來獲取所有的<employee>標(biāo)簽。讓我們一步步地來看看如何顯示第一個(gè)雇員的姓名：

var companies = xmlDoc.getElementsByTagName("company");

上面的代碼返回了一個(gè)<company>標(biāo)簽的對(duì)象集合，這個(gè)集合被儲(chǔ)存在了變量companies中。注意，companies是一個(gè)數(shù)組（March注：因?yàn)槠鋬?chǔ)存的是一個(gè)對(duì)象集合，數(shù)組的每一個(gè)元素為一個(gè)標(biāo)簽為&company>的元素對(duì)象，本例中數(shù)組只有一個(gè)元素，因?yàn)橹挥幸粋€(gè)標(biāo)簽為&company>的元素）。

var employees = companies[0].getElementsByTagName("employee");

上面的代碼給變量employees返回了一個(gè)<employee>標(biāo)簽的對(duì)象集合，同樣以數(shù)組的形式返回。注意companies變量的索引號(hào)（0），知所以這樣是因?yàn)槲覀冎恍枰獢?shù)組的第一個(gè)元素，數(shù)組只有一個(gè)元素，所以我們用索引數(shù)0來獲得這個(gè)元素。

要顯示第一個(gè)雇員的姓名，我們需要用下面的代碼：

document.write(employees[0].firstChild.nodeValue);

上面的代碼將顯示Premshree Pillai。很顯然，變量employees是一個(gè)擁有三個(gè)元素的數(shù)組，所以，要顯示第二個(gè)雇員的姓名，我們可以用下面的代碼：

document.write(employees[1].firstChild.nodeValue);

上面的代碼將會(huì)顯示Kumar Singh。上面用來顯示雇員姓名（Premshree Pillai）的所有代碼可以簡(jiǎn)化為下面這段代碼：

document.write(xmlDoc.getElementsByTagName("company")[0].getElementsByTagName("employee")[0]
.firstChild.nodeValue);

存取標(biāo)簽的屬性

以屬性的形式在XML文件中存儲(chǔ)信息是很普遍的。因此，能夠存取XML文件中的屬性對(duì)我們非常重要。在我們的XML范例中，我們儲(chǔ)存了很多雇員的信息，包括id、sex和age，都在<employee>標(biāo)簽中。要引用第一個(gè)雇員的年齡，我們得用如下代碼：

document.write(employees[0].getAttribute("age"));

上面的代碼會(huì)輸出20。這段代碼對(duì)對(duì)象employees[0]運(yùn)用了方法getAttribute()，我們能夠運(yùn)用下面的代碼得到相同的結(jié)果：

document.write(xmlDoc.getElementsByTagName("company")[0].getElementsByTagName("employee")[0]
.getAttribute("age"));

現(xiàn)在，假設(shè)你想在表格中顯示所有雇員的詳細(xì)信息（編號(hào)id、性別sex和年齡age）。要完成這項(xiàng)工作，我們必須遍歷所有的<employee>標(biāo)簽。下面是全部的代碼（但不包括加載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編寫的應(yīng)用中對(duì)一個(gè)外部XML文件的內(nèi)容任意操作來顯示你所希望得到的內(nèi)容，但是卻不能使用用戶的輸入來修改XML文件。

總結(jié)

我們現(xiàn)在知道了檢測(cè)Mozilla瀏覽器、用JavaScript加載XML文檔以及在Mozilla中運(yùn)用JavaScript來操作XML中的內(nèi)容。運(yùn)用XML和客戶端JavaScript可以創(chuàng)建幾個(gè)簡(jiǎn)單的應(yīng)用：

• 你可以用XML文件儲(chǔ)存一點(diǎn)信息，然后用JavaScript來獲取你所需要的信息
• 你可以創(chuàng)建一些像“新聞紙帶機(jī)”的東西，儲(chǔ)存一些新聞，然后用JavaScript讀取新聞項(xiàng)目。

這些指示XML和客戶端JavaScript的一小部分應(yīng)用。希望這篇文章能夠給你一些在Mozilla中運(yùn)用XML和客戶端JavaScript的指導(dǎo)性想法。