国产亚洲中文在线字幕,久久国产亚洲精品麻豆,亚洲今日精彩视频

[經(jīng)典]在Mozilla中使用XML和JavaScript.......

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

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

在我的文章《用JavaScript來(lái)讀取和顯示服務(wù)器端的XML文件》中，我討論了在微軟的Internet Explorer中使用JavaScript來(lái)操作XML文件。而現(xiàn)在，我將告訴你們?cè)贛ozilla中如何用JavaScript來(lái)讀取和使用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ì)特別說(shuō)明。

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>

如你所見(jiàn)，上面的XML文件展示了一個(gè)公司雇員的詳細(xì)信息：用<employee>的值（或者說(shuō)節(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í)間信息。

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

XML和JavaScript

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

檢測(cè)Mozilla

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

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

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

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

				
						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ù)來(lái)加載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ù)來(lái)加載XML文件，我們需要如下調(diào)用：

importXML("YourXMLFile.xml");

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

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

這個(gè)方法是可以在XMLDOM（Document Object Model，文檔對(duì)象模型）對(duì)象中使用的最普遍的方法。正如這個(gè)方法的名字所示的那樣，這個(gè)方法會(huì)返回特定元素下的和所給標(biāo)簽名相同所有元素（也可以稱為元素）。從根本上說(shuō)，它返回了一個(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ì)大小寫(xiě)敏感的，例如：getElementsByTagName("company")就和getElementsByTagName("ComPanY")的返回值不同。

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

在文章開(kāi)頭的那個(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()方法來(lái)顯示變量noOfCompanyTags將會(huì)顯示1。

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

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

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

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

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

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

上面的代碼將會(huì)顯示Kumar Singh。上面用來(lái)顯示雇員姓名（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中將生成如下效果：

Mozilla中的效果

是否能夠修改XML文件？

不行，使用客戶端JavaScript無(wú)法修改XML文件。你可以在你的客戶端JavaScript編寫(xiě)的應(yīng)用中對(duì)一個(gè)外部XML文件的內(nèi)容任意操作來(lái)顯示你所希望得到的內(nèi)容，但是卻不能使用用戶的輸入來(lái)修改XML文件。

總結(jié)

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

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

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

posted on 2006-03-20 09:33 Web 2.0 技術(shù)資源閱讀(708) 評(píng)論(4) 編輯收藏所屬分類: Javascript

評(píng)論

# re: [經(jīng)典]在Mozilla中使用XML和JavaScript....... 2006-10-25 14:15 邱俊

你好，我是試過(guò)這樣寫(xiě)，怎么在Mozilla下用getElementsByTagName("company").length 得到的總是0，各ie是正確的，望指教回復(fù) 更多評(píng)論

# re: [經(jīng)典]在Mozilla中使用XML和JavaScript....... 2006-10-25 19:43 Web 2.0 技術(shù)資源

估計(jì)是你加載 XML 的方式?jīng)]對(duì)。

請(qǐng)參考：
function loadXML(file)
{
var xml = null;
var ie = (typeof window.ActiveXObject != 'undefined');
var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined');
if (moz)
{
xml = document.implementation.createDocument("", "", null)
xml.load(file);
xml.onload = function ()
{
viewData(xml);
}
}
else if (ie)
{
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load(file);
if(xml.readyState == 4)
{
viewData(xml);
}
}
}

參考地址 : http://bbs1.softhouse.com.cn/index.htm?url=/forum/help/user/index.jsp 回復(fù) 更多評(píng)論

# re: [經(jīng)典]在Mozilla中使用XML和JavaScript....... 2006-10-26 11:40 邱俊

你好，還是不行，我的代碼如下，請(qǐng)指教
function importXML(file) {
var xmlDoc=null;
var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument !='undefined');
var ie = (typeof window.ActiveXObject != 'undefined');
if (moz) {
xmlDoc = document.implementation.createDocument("", "", null);
readXML(xmlDoc);
xmlDoc.onload = function(){ readXML(xmlDoc); }
} else if (ie) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.onreadystatechange = function() {
if(xmlDoc.readyState == 4) readXML(xmlDoc);
}
xmlDoc.load(file);
}

}
function readXML(xmlDocObj){
var company=xmlDocObj.getElementsByTagName("company");
document.write(company.length);
}
importXML("11.xml");

xml文件：
<?xml version="1.0" encoding="UTF-8"?>
<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>
</employee>
</company>

結(jié)果是ie顯示1 而firefox ＆Opera為0,但是不報(bào)錯(cuò)！

回復(fù) 更多評(píng)論

# re: [經(jīng)典]在Mozilla中使用XML和JavaScript....... 2006-10-26 23:59 Web 2.0 技術(shù)資源

其實(shí)我已經(jīng)給你提供API了....... 可是你把他給改了....... 最可怕的是改錯(cuò)了

if (moz)
{
xmlDoc = document.implementation.createDocument("", "", null);
/*這里錯(cuò)大了！
readXML(xmlDoc);
*/
/*正確方式*/
xmlDoc.load( file );
xmlDoc.onload = function(){ readXML(xmlDoc); }
}

/********************* 代碼 ***********************/
<script language="javascript">
function importXML(file)
{
var xmlDoc=null;
var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument !='undefined');
var ie = (typeof window.ActiveXObject != 'undefined');
if (moz)
{
xmlDoc = document.implementation.createDocument("", "", null);
/*這里錯(cuò)大了！
readXML(xmlDoc);
*/
/*正確方式*/
xmlDoc.load( file );
xmlDoc.onload = function(){ readXML(xmlDoc); }
}
else if (ie)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.onreadystatechange = function()
{
if(xmlDoc.readyState == 4) readXML(xmlDoc);
}
xmlDoc.load(file);
}
}

function readXML( xmlDocObj )
{
var company = xmlDocObj.getElementsByTagName("company");
window.alert(company.length);
}

function doXML()
{
importXML("11.xml");
}
</script> 回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: [原創(chuàng)]自己封裝了個(gè)Tab標(biāo)簽控件，效果和瀏覽器一樣。 Javascript 中的 Visitor 模式 → 實(shí)現(xiàn)樹(shù)型結(jié)構(gòu)任意節(jié)點(diǎn)遍歷................ [原創(chuàng)]一個(gè)精巧的層控制工具 LayerUtil ....希望能滿足大家的基本需求 [Javascript] JAVASCRIPT & 動(dòng)態(tài)綁定 & 閉包prototype [原創(chuàng)] Javascript 封裝 HashMap v1.1 ...... [充分利用Javascript 的特性 80 行代碼實(shí)現(xiàn)] window.setTimeout() & window.setInterval() 使用方式與參數(shù)傳遞問(wèn)題！ Object-Oriented Event Listening through Partial Application in JavaScript [JavaScript] 經(jīng)典 Javascript 使用例子集合.................. [不斷更新ing .......] [Jscript] 無(wú) event 事件實(shí)現(xiàn)拖拽效果....... [絕對(duì)經(jīng)典] [原創(chuàng)] 用 Javascript 封裝了一個(gè)HashMap ..... 希望大家多多指教！

JAVA & XML & JAVASCRIPT & AJAX & CSS

常用鏈接

留言簿(6)

我參與的團(tuán)隊(duì)

隨筆分類(84)

隨筆檔案(77)

文章分類(2)

文章檔案(17)

Javascript

最新隨筆

最新評(píng)論

閱讀排行榜

評(píng)論排行榜