IE和FireFox下,javascript讀取,並輸出xml文件節點內容

出處:http://apps.hi.baidu.com/share/detail/16041848

一、IE讀取XML

var xmlDoc;
xmlDoc = new ActiveXObject( "Msxml2.DOMDocument" );
xmlDoc.loadXML(xml);
//取的節點
var points = xmlDoc.documentElement.getElementsByTagName("point");
//取得節點的內容值
points[i].childNodes[1].text

二、FireFox讀取XML

Firefox中創建一個XML DOM,需要調用document.implementation對象的createDocument()方法。該方法接受三個參數:第一個參數是包含文檔所使用的命名空間URI的字符串;第二個參數是包含文檔根元素名稱的字符串;第三個參數是要創建的文檔類型(也稱爲doctype)。如果要創建空的DOM文檔,則代碼如下所示:

var oXmlDom = document.implementation.createDocument("", "", null);

前兩個參數是空字符串,第三個參數爲null,這樣可以確保生成一個徹底的空文檔。事實上,現在Firefox中並不提供針對文檔類型的JavaScript支持,所以第三個參數總是爲null。如果要創建包含文檔元素的XML DOM,那麼可以在第二個參數中指定標籤名稱:

var oXmlDom = document.implementation.createDocument("", "books", null);

這段代碼創建了一個XML DOM,其documentElement<books/>。如果要創建包含指定命名空間的DOM,可以在第一個參數中指定命名空間URI

var oXmlDom = document.implementation.createDocument(http://www.site1.com, "books", null);

當在createDocument()方法中指定命名空間時, Firefox會自動附上前綴a0以表示命名空間URI

<a0:books xmlns:a0="http://www.site1.com" />

接着,你可以通過程序來填充XML文檔,不過在一般情況下,還需要在空的XML DOM對象中載入現有的XML文檔。

1. Firefox中載入XML數據

Firefox中,將XML載入XML DOM的方法和微軟採用的方法大致相同,只存在一個顯著區別:Firefox只支持load()方法。因此,在這兩種瀏覽器中載入外部XML數據的代碼是相同的:

oXmlDom.load("books.xml");

與微軟的IE一樣,Firefox同樣實現了async屬性,該屬性的行爲也與其一致:將async設置爲false,表示以同步模式載入文檔;否則,以異步模式載入文檔。

FirefoxXML DOM實現和微軟的XML DOM實現還存在另一個不同,即Firefox不支持readyState屬性及onreadystatechange事件處理函數。在Firefox中,支持load事件和onload事件處理函數。在文檔完全載入後將觸發load事件:

oXmlDom.load("books.xml");

oXmlDom.onload = function () {

    //文檔完全載入後的操作

};

正如前面所說,在FirefoxXML DOM實現中,並沒有loadXML()方法,不過通過Firefox中的DOMParser類可以模擬loadXML()的行爲。該類有一個名爲parseFromString()的方法,用來載入字符串並解析成文檔:

var sXml = "<root><person><name>Jeremy McPeak</name></person></root>";

var oParser = new DOMParser();

var oXmlDom = oParser.parseFromString(sXml,"text/xml");

在這段代碼中,創建了一個XML字符串,並作爲參數傳遞給DOMParserparseFromString()方法。parseFromString()方法的兩個參數分別是XML字符串和數據的內容類型(一般設置爲text/xml)parseFromString()方法返回XML DOM對象,因此這裏得到的oXmlDom與第一個例子相同。

2. Firefox中獲取XML數據

儘管存在這樣那樣的不同,但IEFirefox中用於獲取文檔中XML數據的大多數屬性和方法是一致的。正如在IE中,可以使用documentElement屬性來獲取文檔的根元素,例如:

var oRoot = oXmlDom.documentElement;

Firefox同樣支持W3C標準屬性,包括childNodesfirstChildlastChildnextSiblingnodeNamenodeTypenodeValueownerDocumentparentNodepreviousSibling。不幸的是,對於微軟專有的textxml屬性,Firefox並不支持,不過可以利用其他方法來模擬該屬性的行爲。

大家應該還記得,text屬性返回了當前節點的內容,或者是當前節點及其子節點的內容。這不僅僅返回當前節點的文本,還有所有子節點的文本,因此要模擬該功能實現是十分容易的。下面這個簡單的函數就能夠完成該功能,該函數唯一的參數是一個節點:

function getText(oNode) {

    var sText = "";

    for (var i = 0; i < oNode.childNodes.length; i++) {

       if (oNode.childNodes[i].hasChildNodes()) {

           sText += getText(oNode.childNodes[i]);

       } else {

           sText += oNode.childNodes[i].nodeValue;

       }

    }

    return sText;

}

getText()函數中,sText變量用來保存獲取的所有文本。接着對oNode的子節點使用for循環進行遍歷,檢查每個子節點是否包含子節點。如果有子節點,那麼就將其childNode傳給getText()函數,並進行同樣的處理;如果沒有子節點,那麼將當前節點的nodeValue加到字符串中(對文本節點而言,這只是文本字符串)。處理了所有子節點後,該函數返回變量sText

IE中的xml屬性將存放對當前節點包含的所有XML進行序列化的結果。在Firefox中,提供了一個名爲XMLSerializer對象來完成這一功能。該對象提供一個使用JavaScript可訪問的serializeToString()方法,使用該方法可以對XML數據進行序列化。

function serializeXml(oNode) {

    var oSerializer = new XMLSerializer();

    return oSerializer.serializeToString(oNode);

}

serializeXml()函數以XML節點作爲參數,創建一個XMLSerializer對象,並將該節點傳給serializeToString()方法。該方法將向調用者返回XML數據的字符串表示。

對於節點操作的DOM方法,FirefoxIE大致相同。參見“在IE中操作DOM”小節。

3. Firefox中處理錯誤

FirefoxIE的錯誤處理並不一樣。當IE遇到錯誤時,它會填充parseError對象;而當Firefox遇到錯誤時,它會將包含錯誤信息的XML文檔載入到XML DOM文檔中。看下面的這個例子:

var sXml = "<root><person><name>Jeremy McPeak</name></root>";

var oParser = new DOMParser();

var oXmlDom = oParser.parseFromString(sXml,"text/xml");

 

if (oXmlDom.documentElement.tagName != "parsererror") {

    //沒有錯誤發生,進行所需操作

} else {

    alert("An Error Occurred");

}

在突出顯示的代碼行中,你會發現其中將產生一個錯誤:XML字符串格式不正確(因爲<person>元素不完整,沒有相應的</person>元素)。當載入錯誤的XML時,XML DOM對象將會載入一個documentElement<parsererror/>的錯誤文檔。我們可以通過檢查documentElementtagName屬性來很容易地確定是否發生錯誤。如果tagName屬性不是parsererror,就可以確定沒有發生任何錯誤。

在本例中,可能會生成如下所示的錯誤文檔:

<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">XML

Parsing Error: mismatched tag. Expected: </person>.

Location: http://yoda/fooreader/test.htm

Line Number 1, Column 43:<sourcetext><root><person><name>Jeremy

McPeak</name></root>

------------------------------------------^</sourcetext></parsererror>

所有的錯誤信息都包含在錯誤文檔的文本中。如果要通過程序使用這些錯誤信息,那麼首先就要對其進行解析。最簡單的方法是使用一個稍長的正則表達式:

var reError = />([\s\S]*?)Location:([\s\S]*?)Line Number (\d+), Column

    (\d+):<sourcetext>([\s\S]*?)(?:\-*\^)/;

該正則表達式將錯誤文檔分爲五個部分:錯誤消息、發生錯誤的文件名、行號、該行中發生錯誤的位置,以及發生錯誤的源代碼。使用正則表達式對象的test()方法可以使用這些信息:

if (oXmlDom.firstChild.tagName != "parsererror") {

    //沒有錯誤發生,進行所需操作

} else {

    var oXmlSerializer = new XMLSerializer();

    var sXmlError = oXmlSerializer.serializeToString(oXmlDom);

    var reError = />([\s\S]*?)Location:([\s\S]*?)Line Number (\d+), Column

       (\d+):<sourcetext>([\s\S]*?)(?:\-*\^)/;

    reError.test(sXmlError);

正則表達式捕獲到的第一部分數據是錯誤消息,第二部分是文件名,第三部分是行號,第四部分是行內位置,第五部分是源碼。你可以使用這些解析後的信息來創建自定義的錯誤消息:

var str = "An error occurred!!\n" +

    "Description: " + RegExp.$1 + "\n" +

    "File: " + RegExp.$2 + "\n" +

    "Line: " + RegExp.$3 + "\n" +

    "Line Position: " + RegExp.$4 + "\n" +

    "Source Code: " + RegExp.$5;

 

alert(str);

如果發生錯誤,那麼alert()方法會以易於閱讀的格式在警告框中來顯示相關的錯誤信息。

經過學習參考其他文章,終於在IE和FF下都可以輸出了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
var xmlDoc;
var browse="";
function loadXML()
{
    var fileRoute="books.xml"
    if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject('Msxml2.DOMDocument');
        xmlDoc.async=false;
        xmlDoc.load(fileRoute);
        browse="ie";
    }
    else if (document.implementation && document.implementation.createDocument)
    {
        xmlDoc=document.implementation.createDocument('', '', null);
        xmlDoc.load(fileRoute);
        browse="ff";
    }
    else
    {
    alert( '未做與該瀏覽器的兼容!');
    }
}

function getmessage()
{
    var msg='<table border="1" cellspacing="0" cellpadding="0" width="500">';
    msg+='<tr><td width="90"></td><td width="100">圖書編號</td><td width="100">種類編號</td><td width="110">圖書名稱</td><td width="100">作者</td></tr>'
    if(browse=="ff")
    {
        var cNodes = xmlDoc.getElementsByTagName("book");
        for(j=0;j<cNodes.length;j++)
        {
            var bookID=xmlDoc.getElementsByTagName("book")[j].getAttribute("id");
            var sortID=xmlDoc.getElementsByTagName("book")[j].getAttribute("sortID");
            var bookTitle=xmlDoc.getElementsByTagName("title")[j].childNodes[0].nodeValue;
            var bookAuthor=xmlDoc.getElementsByTagName("author")[j].childNodes[0].nodeValue;
            msg+='<tr><td>'+j+'</td><td>'+bookID+'</td><td width="100">'+sortID+'</td><td width="190">'+bookTitle+'</td><td width="120">'+bookAuthor+'</td></tr>'
        }
        
    }
    else if(browse=="ie")
    {
        var state = xmlDoc.readyState;
        if (state == 4)
        {
            var oNodes = xmlDoc.selectNodes("//books/book");
            for(j=0;j<oNodes.length;j++)
            {
                var bookID=oNodes[j].getAttribute("id");
                var sortID=oNodes[j].getAttribute("sortID");
                var bookTitle=oNodes[j].childNodes[0].text;
                var bookAuthor=oNodes[j].childNodes[1].text;
                msg+='<tr><td>'+j+'</td><td>'+bookID+'</td><td width="100">'+sortID+'</td><td width="190">'+bookTitle+'</td><td width="120">'+bookAuthor+'</td></tr>'
            }
        }
    }
    msg+='</table>';
    //alert(msg)
    document.getElementById("bookList").innerHTML=msg;
}

</script>
</head>
<body onload="loadXML();">
<div id="bookList" style="width:500px;">
</div>
<table border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td> </td>
</tr>
</table>
<input name="button" type="button" value=" />
</body>
</html>
 

books.xml
<?xml version="1.0" encoding="gb2312"?>
<books>
    <book id="4" sortID="a4">
        <title>author4aa</title>
        <author>author4</author>
    </book>
    <book id="5" sortID="a5">
        <title>author55</title>
        <author>author5</author>
    </book>
    <book id="6" sortID="a6">
        <title>booktitle</title>
        <author>author6</author>
    </book>
    <book id="7" sortID="a7">
        <title>booktitle</title>
        <author>author7</author>
    </book>
    <book id="8" sortID="a8">
        <title>booktitle</title>
        <author>author8</author>
    </book>
    <book id="15" sortID="a15">
        <title>author155</title>
        <author>author15</author>
    </book>
</books>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章