JAVA & XML & JAVASCRIPT & AJAX & CSS

Web 2.0 技术储备............

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  77 随笔 :: 17 文章 :: 116 评论 :: 0 Trackbacks

前段时间给神奇一刻做一个加载随机图片的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>idsexage属性中。文件同时用标签<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范例中,我们储存了很多雇员的信息,包括idsexage,都在<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中将生成如下效果:

Mozilla中的效果

是否能够修改XML文件?

不行,使用客户端JavaScript无法修改XML文件。你可以在你的客户端JavaScript编写的应用中对一个外部XML文件的内容任意操作来显示你所希望得到的内容,但是却不能使用用户的输入来修改XML文件。

总结

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

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

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

posted on 2006-03-20 09:33 Web 2.0 技术资源 阅读(692) 评论(4)  编辑  收藏 所属分类: Javascript

评论

# re: [经典]在Mozilla中使用XML和JavaScript....... 2006-10-25 14:15 邱俊
你好,我是试过这样写,怎么在Mozilla下用getElementsByTagName("company").length 得到的总是0,各ie是正确的,望指教  回复  更多评论
  

# re: [经典]在Mozilla中使用XML和JavaScript....... 2006-10-25 19:43 Web 2.0 技术资源
估计是你加载 XML 的方式没对。

请参考:
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   回复  更多评论
  

# re: [经典]在Mozilla中使用XML和JavaScript....... 2006-10-26 11:40 邱俊
你好,还是不行,我的代码如下,请指教
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>

结果是ie显示1 而firefox &Opera为0,但是不报错!


  回复  更多评论
  

# re: [经典]在Mozilla中使用XML和JavaScript....... 2006-10-26 23:59 Web 2.0 技术资源
其实我已经给你提供API了....... 可是你把他给改了....... 最可怕的是改错了

if (moz)
{
xmlDoc = document.implementation.createDocument("", "", null);
/*这里错大了!
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);
/*这里错大了!
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>  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: