在Mozilla中使用XML和JavaScript

在文章《用JavaScript来读取和显示服务器端的XML文件》中，讨论了在微软的Internet Explorer中使用JavaScript来操作XML文件。而现在，我将告诉你们在Mozilla中如何用JavaScript来读取和使用XML文件中的数据。我们将会看到如何显示标签（March注：tag）中的值、标签中的属性值等等。

从现在起，我不会特意提及Mozilla，因为我们只会涉及Mozilla，包括Netscape 6.x和7.x等（March注：当然也包括Firefox、Flock）。然而当提及Internet Explorer（MSIE或IE）时我会特别说明。

XML文件范例
XML文件范例

我将使用和我上一篇文章相同的XML文件，这样会让已经明白那一个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>的值（或者说节点值）储存了员工姓名，其他的诸如员工编号（id）、性别（sex）和年龄（age）的信息则被储存在了相同标签（<employee>）id、sex和age属性中。文件同时用标签<turnover>的节点值储存了公司的营业额（turnover），在该标签的year属性中储存了相应的时间信息。

在接下来的章节中，我们将操作上面的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;

 

上面这段代码的第一行创建了一个xmlDoc对象的实例；第二行加载我们需要的XML文件（本例中为someXMLFile.xml）；第三行处理或操作了我们刚才加载的XML文件。

现在，最好用一个不同的函数来加载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文件的函数：

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);
}

 

上面的函数既可以在Mozilla中加载XML文件，又可以在IE中加载。现在，要使用这个函数来加载XML文件，我们需要如下调用：

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数据的方法。

getElementsByTagName() //March注：通过标签名来获取元素

这个方法是可以在XMLDOM（Document Object Model，文档对象模型）对象中使用的最普遍的方法。正如这个方法的名字所示的那样，这个方法会返回特定元素下的和所给标签名相同所有元素（也可以称为元素）。从根本上说，它返回了一个对象集合（object collection）（March注：当然，集合中，对象的个数有可能为1和0。）。例如：

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

 

上面这段代码，变量xmlFile中将储存一个集合了所有<company>元素的对象集合。注意，你所传递给getElementsByTagName()方法的参数是对大小写敏感的，例如：getElementsByTagName("company")就和getElementsByTagName("ComPanY")的返回值不同。

查找拥有相同标签的元素的个数

在文章开头的那个XML文件中，我们只看到了一个<company>标签。由getElementsByTagName()所返回的对象集合有一个储存长度的方法，这个方法给出了当前对象集合中的元素个数。比如，要查看<company>标签的个数，就可以用下面这段代码：

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

如果用document.write()方法来显示变量noOfCompanyTags将会显示1。

显示标签的内容

再次回到开篇的那个XML文件，假设这次我们想显示第一个雇员的姓名。现在，标签<employee>是包含于标签<company>中的，所以我们首先需要得到<company>标签的集合，然后通过这个集合来获取所有的<employee>标签。让我们一步步地来看看如何显示第一个雇员的姓名：

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

上面的代码返回了一个<company>标签的对象集合，这个集合被储存在了变量companies中。注意，companies是一个数组（March注：因为其储存的是一个对象集合，数组的每一个元素为一个标签为&company>的元素对象，本例中数组只有一个元素，因为只有一个标签为&company>的元素）。

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

上面的代码给变量employees返回了一个<employee>标签的对象集合，同样以数组的形式返回。注意companies变量的索引号（0），知所以这样是因为我们只需要数组的第一个元素，数组只有一个元素，所以我们用索引数0来获得这个元素。

要显示第一个雇员的姓名，我们需要用下面的代码：

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

上面的代码将显示Premshree Pillai。很显然，变量employees是一个拥有三个元素的数组，所以，要显示第二个雇员的姓名，我们可以用下面的代码：

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()，我们能够运用下面的代码得到相同的结果：

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

现在，假设你想在表格中显示所有雇员的详细信息（编号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文件的内容任意操作来显示你所希望得到的内容，但是却不能使用用户的输入来修改XML文件。

总结

我们现在知道了检测Mozilla浏览器、用JavaScript加载XML文档以及在Mozilla中运用JavaScript来操作XML中的内容。运用XML和客户端JavaScript可以创建几个简单的应用：

• 你可以用XML文件储存一点信息，然后用JavaScript来获取你所需要的信息
• 你可以创建一些像“新闻纸带机”的东西，储存一些新闻，然后用JavaScript读取新闻项目。

 

这些指示XML和客户端JavaScript的一小部分应用。希望这篇文章能够给你一些在Mozilla中运用XML和客户端JavaScript的指导性想法。