Xml學習筆記(二)Javascript篇

2024-09-05 20:54:45

字體：大中小

來源：轉載

供稿：網友

一、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>T</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>T</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標準建議的。