http://www.marchbox.com/blog/post/xml_js_in_mozilla.html ===================================== 前段时间给神奇一刻做 一个加载随机图片的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文件。而现在，我将告诉你们在Mozilla中如何用JavaScript来读取和使用XML文 件中的数据。我们将会看到如何显示标签（March注：tag）中的值、标签中的属性值等等。 从现在起，我不会特意提及Mozilla，因为我们只会涉及Mozilla，包括Netscape 6.x和7.x等（March注：当然也包括Firefox、Flock）。然而当提及Internet Explorer（MSIE或IE）时我会特别说明。 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.getAttribute("id") + '</td>'); document.write('<td>' + employees.getAttribute("sex") + '</td>'); document.write('<td>' + employees.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的指导性想法。