當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

浏览器中的XML与JavaScript

發(fā)布時間：2023/12/20 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了浏览器中的XML与JavaScript 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

瀏覽器中的XML與JavaScript

在處理XML前，你需要在JavaScript中獲取它。這一部分展示了一些不同的方法用來在JavaScript中獲取XML并且對它進(jìn)行處理。

XML的節(jié)點(diǎn)類型

在我們研究如何處理XML前，先來了解下XML中不同的節(jié)點(diǎn)及類型。如果是HTML，了解這些節(jié)點(diǎn)就沒必要了，但由于XML的可擴(kuò)展性和結(jié)構(gòu)的不確定性，了解這些固有節(jié)點(diǎn)類型就顯得猶為重要了。

下面是XML 中12種不同的節(jié)點(diǎn)（表格取自W3School中文站點(diǎn)）：

節(jié)點(diǎn)類型	描述
Document	表示整個文檔（DOM?樹的根節(jié)點(diǎn)）
DocumentFragment	表示輕量級的?Document?對象，其中容納了一部分文檔。
DocumentType	向?yàn)槲臋n定義的實(shí)體提供接口。
ProcessingInstruction	表示處理指令。
EntityReference	表示實(shí)體引用元素。
Element	表示?element（元素）元素
Attr	表示屬性。
Text	表示元素或?qū)傩灾械奈谋緝?nèi)容。
CDATASection	表示文檔中的?CDATA?區(qū)段（文本不會被解析器解析）
Comment	表示注釋。
Entity	表示實(shí)體。
Notation	表示在?DTD?中聲明的符號。

妳可以使用JavaScript來獲取一個節(jié)點(diǎn)并檢查它的類型。清單13中的代碼返回真如果傳入的節(jié)點(diǎn)類型為Comment，否則返回假。這里的代碼還不涉及jQuery，但在后面探索XML的節(jié)點(diǎn)值的時候會用到。

Listing 13. JavaScript function for determining if the node element is a comment

function isNodeComment(node){

return (node.nodeType===8);

}

</script>

這里并不對每個節(jié)點(diǎn)類型做具體介紹，但熟悉這些節(jié)點(diǎn)對于處理它和它其中的值至關(guān)重要。

在客戶端用JavaScript處理XML

之前例子中用來處理HTML的代碼大部分都可以直接拿來處理XML；需要注意的一點(diǎn)是，XML中不能依賴id屬性來處理一個節(jié)點(diǎn)了，需要使用節(jié)點(diǎn)名字這種更通俗的方法來進(jìn)行。另外，在進(jìn)行XML處理時，節(jié)點(diǎn)名字的大小是敏感的。

假設(shè)我們要處理的XML如下面清單14這個樣子。

Listing 14. A simple XML file

<?xml version="1.0" encoding="UTF-8" ?>

<related_items>

<related_item content_id="2"></related_item>

<related_item content_id="3"></related_item>

</related_items>

</item>

在JavaScript中獲取XML

要處理清單14中的XML，首先要做的事情就是在JavaScript中取得它。有很多方法可以做到這點(diǎn)：

在服務(wù)器端將XML轉(zhuǎn)成字符串類型傳到JavaScript

在服務(wù)器端將XML 與一個textarea 控件進(jìn)行綁定

通過Ajax將XML裝載進(jìn)瀏覽器

每種方法的詳細(xì)步驟如下：

在服務(wù)器端將XML轉(zhuǎn)成字符串類型傳到JavaScript

通過一種服務(wù)器端編程語言，可以將XML 轉(zhuǎn)成字符串放到一個JavaScript變量中。這種方法不是最優(yōu)雅也不是最特別的，但它確實(shí)有用。但這種方法有個優(yōu)點(diǎn)就是妳可以從任何地方加載XML文件，甚至是本地服務(wù)器（見清單15）。

Listing 15. Writing XML into a JavaScript variable from PHP

<?php

$xmlPath = "/path/to/file.xml"; // or http://www.somedomain.com/path/to/file.xml

$xmlFile = file_get_contents($xmlPath);

var xmlString = "<?=$xmlFile?>";

</script>

在服務(wù)器端將XML 與一個textarea 控件進(jìn)行綁定

另外一種稍微有點(diǎn)區(qū)別的方法是將XML裝載進(jìn)一個<textarea> (這個元素可以不在展示)。然后通過之前提到過的innerHTML?來獲取XML 字符串然后放到JavaScript中。

妳可以把這個包含了XML的PHP變量放到一個id為"xml"的<textarea>標(biāo)簽中，之后可以通過這個id方便地獲取它：

然后就可以方便地將XML從這個HTML元素中取出來放到JavaScript中進(jìn)行操作了（見清單16）。

Listing 16. Exposing XML to JavaScript from a textarea element

var xmlString = document.getElementById("xml").innerHTML;

</script>

考慮瀏覽器兼容性，使用清單17中的方法來從XML字符串創(chuàng)建DOM。

Listing 17. Cross-browser JavaScript function for converting an XML string into a DOM object

/**

* Converts passed XML string into a DOM element.

* @param xmlStr {String}

function getXmlDOMFromString(xmlStr){

if (window.ActiveXObject && window.GetObject) {

???????? // for Internet Explorer

var dom = new ActiveXObject('Microsoft.XMLDOM');

dom.loadXML(xmlStr);

return dom;

}

if (window.DOMParser){ // for other browsers

return new DOMParser().parseFromString(xmlStr,'text/xml');

}

throw new Error( 'No XML parser available' );

}

var xmlString = document.getElementById("xmlString").innerHTML;

var xmlData = getXmlDOMFromString(xmlString);

</script>

下面看下逆過程，也就是從XML DOM中返回XML字符串(見清單18)。

Listing 18. Cross-browser JavaScript function for returning a string representation of an XML DOM object

/**

* Returns string representation of passed XML object

function getXmlAsString(xmlDom){

return (typeof XMLSerializer!=="undefined") ?

(new window.XMLSerializer()).serializeToString(xmlDom) :

xmlDom.xml;

}

</script>

通過Ajax將XML裝載進(jìn)瀏覽器

最后種在JavaScript中獲取XML的方法是通過Ajax。詳見后面關(guān)于jQuery的部分。

JavaScript中處理XML

讓我們看看之前提到的一些標(biāo)準(zhǔn)的JavaScript方法如果應(yīng)用到XML上。要獲得當(dāng)前條目的description字段和相關(guān)條目的id，可以通過清單19的代碼實(shí)現(xiàn)。

Listing 19. XML Processing using JavaScript

// get value of single node

var descriptionNode = xmlData.getElementsByTagName("description")[0];

var description

= descriptionNode.firstChild && descriptionNode.firstChild.nodeValue;

// get values of nodes from a set

var relatedItems = xmlData.getElementsByTagName("related_item");

// xmlData is an XML doc

var relatedItemVals = [];

var tempItemVal;

for (var i=0,total=relatedItems.length; i<total; i++){

tempItemVal = relatedItems[i].firstChild ? relatedItems[i].firstChild.nodeValue : "";

relatedItemVals.push(tempItemVal);

}

// set and get attribute of a node

description.setAttribute("language", "en");

description.getAttribute("language"); // returns "en"

</script>

仔細(xì)看上面的代碼。getElementsByTagName()這個之前也見過的方法對于處理XML埋深重要，因?yàn)樗寠吙梢垣@取到給定名稱的XML元素。（需要再次重申的是在處理XML時大小寫是敏感的）。然后再檢查一下descriptionNode?是否包含子節(jié)點(diǎn)就可以安全地返回description?的值了。如果有子節(jié)點(diǎn)，那么就可以訪問nodeValue獲取值。當(dāng)妳想要獲取某個特定節(jié)點(diǎn)的文本值時，事情變得有點(diǎn)難了。雖然某些瀏覽器支持在XML中使用之前提到的innerHTML屬性，但大多數(shù)不支持。所以妳需要首先檢查下它是否包含firstChild?（文本節(jié)點(diǎn)textNode，注釋節(jié)點(diǎn)comment?，子節(jié)點(diǎn)child node），如果有才可以訪問nodeValue。上面的代碼中，如果檢查到不存在子節(jié)點(diǎn)則返回空字符串。

最后，妳看到，setAttribute()?和?getAttribute()方法的使用完全和在HTML中一樣。

到這里妳已經(jīng)見識了如何使用原始的JavaScript代碼來處理HTML和XML節(jié)點(diǎn)。下一節(jié)中引入jQuery,妳將會看到這個庫有多強(qiáng)大威武，不僅簡化了處理流程而且使妳對DOM的操作更得心應(yīng)手。

總結(jié)

以上是生活随笔為你收集整理的浏览器中的XML与JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Maximal Rectangle
下一篇： gradle idea java ssm