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文件xmlDoc.async = " false " ;
xmlDoc.load( " note.xml " );
xmlDoc.async = " false " ;
xmlDoc.loadXML(txt);
注意以上是使用同一个对象的不同方法去实现的。其他的Browser则是用不同的对象去实现。
xmlDoc.async = " false " ;
xmlDoc.load( " note.xml " );
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>的节点的语句:下面是一个完整的例子。用JavaScript从一个XML文件中读取内容,显示到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中读出来。
< 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传送数据。
马上看一个例子:
< 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相关对象
本文为个人原创,转载请注明出自: http://jackma.cnblogs.com/
Author:JackMa