Xml学习笔记（二）Javascript篇

首页发现

博客园 - JackMa

设计模式外观 Facade 设计模式适配器-Adapter 设计模式命令-Command 设计模式单件-Singleton 积累PDU 设计模式工厂-Factory 设计模式策略-Strategy，装饰-Decorator，观察者-Observer Java多线程编程 Red Hat Linux认证认识Agile，Scrum和DevOps 博客目标 iOS Development Learning 13Nov 重新起步 iOS 开发 XML学习笔记（七）Schema语法杂项 XML学习笔记（六）Schema语法之复杂类型 UML和模式应用-第一部分：绪论 XML学习笔记（五）Schema语法之简单类型 XML学习笔记（四）Schema介绍篇 XML学习笔记（三）进阶篇

JackMa · 2008-02-13 · via 博客园 - JackMa

Preface：本文是W3Schools上《XML指南》Javascript篇的学习笔记。其中大部分内容是对指南的翻译总结。由于原文的例子更详尽生动，如果各位想阅读原文可以到这个网址http://www.w3schools.com/xml/default.asp。同时，W3Schools提供了测试，大家可以测测自己对XML的理解程度。

一、XML解析器（Parser）

所有的现代浏览器都会内建一个XML解析器(Parser)来读取和操作XML。Parser将XML读入内存中将之转换为一个DOM（Documnet Object Model）对象。我们可以使用JavaScript存取到这个对象。（备注，Microsoft的Parser可以加载XML文件和字符串中的XML内容，而其他的一些Browser则分别使用不同的Parser去实现。）所有的Parser都可以遍历XML树，读取、插入、删除节点（elements）和attribute。在谈论XML解析时，我们是用Nodes（节点）来代替Elements（元素）。

一般我们会从两个地方加载XML：XML文件或者包含XML的string（字符串）。

使用MicrosoftParser加载XML文件

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("note.xml");

使用Parser读取保存在string（字符串）中的XML内容

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);

注意以上是使用同一个对象的不同方法去实现的。其他的Browser则是用不同的对象去实现。

var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("note.xml");

var parser=new DOMParser();
var doc=parser.parseFromString(txt,"text/xml");

二、XML DOM

DOM（Document Object Model）定义了一种标准的方式去存取和操作XML文件。DOM将XML视作一个树结构。通过DOM可以增加、修改、删除Element，同时可以修改包括Element的Attribute和Element包含的内容（text）。我们将一个Element及其包含的所有东西（Attribute、Text）称作一个Node。

以下是读取<to>的节点的语句：

xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue

和用HTML的DOM读取一个id="to"的语句比较可以看到很多相似之处：

document.getElementById("to").innerHTML

（更多有关的DOM内容，可以参考XML DOM指南）

下面是一个完整的例子。用JavaScript从一个XML文件中读取内容，显示到HTML中。以下代码是跨浏览器的。已经考虑到不同浏览器的问题。

<html>
<head>
<script type="text/javascript">
function parseXML()
{
try
  {//try IE first
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try
    {//try Mozilla, Firefox, Opera, etc.
    xmlDoc=document.implementation.createDocument("","",null);
    }
  catch(e)
    {
    alert(e.message);
    return;
    }
  }
xmlDoc.async=false;
xmlDoc.load("note.xml");

document.getElementById(

"to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
</script>
</head><body onload="parseXML()">
<h1>W3Schools Internal Note</h1>
<p><b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</p>
</body>
</html>

然后下面这个例子可以快速浏览甚至略过，和上面代码的区别，紧紧是先把XML存到一个string中，然后再用Parser把XML从string中读出来。

<html>
<head>
<script type="text/javascript">
function parseXML()
{
var text="<note>";
text=text+"<to>Tove</to>";
text=text+"<from>Jani</from>";
text=text+"<heading>Reminder</heading>";
text=text+"<body>Don't forget me this weekend!</body>";
text=text+"</note>";
try
  {// code for IE
  var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
  }
catch(e)
  {// code for Mozilla, Firefox, Opera, etc.
  try
    {
    var parser=new DOMParser();
    var xmlDoc=parser.parseFromString(text,"text/xml");
    }
  catch(e)
    {
    alert(e.message);
    return;
    }
  }
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
</script>
</head><body onload="parseXML()">
<h1>W3Schools Internal Note</h1>
<p><b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</p>
</body>
</html>

三、XML to HTML

指南中给出例子的思路就是一边用XML DOM读取XML的内容，一边不停的用document.write写HTML标记和读取到的XML内容。和上面的例子差不多，就不再转贴代码了。

四、XMLHttpRequestObject

这个东西很厉害啊，大名鼎鼎的Ajax就是从这东西变出来的。

什么是XMLHttpRequestObject?XMLHttpRequestObject是开发人员的梦，因为有了它，你就可以:

为网页增加新数据而无需重新加载页面。
在网页加载后向Server请求数据。
在网页加载后从Server接受数据。
在后台向Server传送数据。

其实以上说的都是一回事，关键三个字“无刷新”。

马上看一个例子：

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for IE7, Firefox, Opera, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = "OK"
    document.getElementById('A1').innerHTML=xmlhttp.status;
    document.getElementById('A2').innerHTML=xmlhttp.statusText;
    document.getElementById('A3').innerHTML=xmlhttp.responseText;
    }
  else
    {
    alert("Problem retrieving XML data:" + xmlhttp.statusText);
    }
  }
}
</script>
</head><body>
<h2>Using the HttpRequest Object</h2><p><b>Status:</b>
<span id="A1"></span>
</p><p><b>Status text:</b>
<span id="A2"></span>
</p><p><b>Response:</b>
<br /><span id="A3"></span>
</p><button onclick="loadXMLDoc('note.xml')">Get XML</button></body>
</html>

以上的代码是在button的OnClick中读取一个xml文件的内容然后进行显示。这里要强调的是：这里并不是把隐藏的内容显示出来而是确实从Server的XML读取到数据然后作显示的，而且是无刷新的。可以到这个网址去体现一下http://www.w3schools.com/xml/tryit.asp?filename=tryxml_httprequest_js。
Open的true是表示是否进行异步操作，true表示script继续运行而不必等待Server的应答。了解更多的XMLHttpRequest对象，可以到网上查找一下XMLHttp的CHM文档。注意XMLHttpRequest对象并不是W3C标准建议的。

五、总结

柔合以上的知识就可以使用JavaSripte灵活的读写XML了。在这里我们用到了多种的的Web技术，包括：

HTML和HTML DOM
XML和XML DOM
JavaScript
XMLHttp相关对象

本篇简介了以上的某些技术，而关键的是多种的柔合。Ajax不就是这样出来的么，呵呵。

本文为个人原创，转载请注明出自：

http://jackma.cnblogs.com/
Author：JackMa

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - JackMa

一、XML解析器（Parser）

二、XML DOM

三、XML to HTML

四、XMLHttpRequestObject

五、总结