KingKong Bruce記事: JavaScript

JavaScript - XML DOM簡介

Asynchronous JavaScript And XML, AJAX

HTML/XHTML與CSS：顯示UI與相關資料
XML：伺服端非同步傳遞的資料
XML DOM：當Browser非同步取得XML資料後，可進一步使用Javascript和XML DOM取出所需資訊
XMLHttpRequest：Javascript透過XMLHttpRequest物件來建立非同步HTTP請求

Extensible Markup Language, XML

利用特殊的標示語言(Markup Language)，建立XML文件(XML Document)。

XML Document

XML Document是由元素(Elements)組成。

標籤(Tags)

XML能自己定義標籤，如：<book>、<title>…。

元素(Elements)

元素是一個完整項目：<book code="K2010">Javascipt入門</book> 開始標籤、屬性、文字內容、結尾標籤。

屬性

屬性值需要使用引號(單、雙皆可)括起。

實體參考(Entity Reference)

XML本身有一些保留符號，如文件內需要使用這些符號，請使用實體參考。

JavaScript XML實體參考
實體參考	代表符號
<	<
>	>
&	&
'	'
"	"

註解(Comment)

與HTML相同，例如，

<!-- 註解內容 -->

PCDATA

文字內容稱PCDATA，例如，

<book code="K2010">Javascipt入門</book>

PCDATA → Javascript入門。

CDATA

Character Data，表示XML在剖析文件時不用處理此區塊的內容，例如，

<script type="text/javascript">
<![CDATA[
    function a(){
    ...
    }
]]>
</script>

CDATA的註解

在HTML解析器(Browser)是不承認CDATA開始"<![CDATA["與結束"(]]>"標籤，也不認識HTML實體參考(Entity Reference)，可能導致會把問題顯示在Browser，並可能產生"跨網站腳本"問題，所以在HTML會建議註解CDATA。

範例一：JavaScript註解

<script type="text/javascript">
// <![CDATA[
　　document.write("<");
// ]]>
</script>

範例二：CSS註解

<style type="text/css">
/*<![CDATA[*/
　　body { background-image: url(marble.png) }     
/*]]>*/
</style>

Processing Instructions, PI

允許XML文件包含傳送給應用程式的指令，例如開頭宣告就是PI，PI如同註解，不屬於XML文件內容。

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

Document Type Declarations, DTD

是XML文件的驗證機制，可以檢查XML標籤與文件架構是否正確。

<!DOCTYPE book [
<!ELEMENT book (code, title, author, price)>
<!ELEMENT code (#PCDATA)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (zh-tw_name, zh-en_name)>
<!ELEMENT zh-tw_name (#PCDATA)>
<!ELEMENT zh-en (#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>

一行一行看，不會很難。

<!DOCTYPE book [：book之下包含以下元素
<!ELEMENT book (code, title, author, price)>：元素book之下包含其他子元素
<!ELEMENT code (#PCDATA)>：code元素含文字內容

XHTML

Well-Format(良好格式)的HTML。什麼是Well-Format？

標籤、屬性都是小寫
一定要<html>為根元素
標籤必須有結尾標籤，空元素需以 />結束標籤
巢狀標籤不能重疉
屬性必須有值
屬性值需使用引號
Script需使用CDATA

第三點，標籤必須有結尾標籤，例如，

<-- 有頭有尾 -->
<b>粗體字</b>
<-- 空元素需以 />結束標籤 -->
<input id="name" type="text" />
<br />

第五點，屬性必須有值，例如，

<-- HTML -->
<input type=radio checked>

<-- XHTML -->
<input type="radio" checked="checked" />

Document Object Model, DOM

Document Object Model，XML DOM可以將XML文件視為一棵樹狀結構的節點， XML DOM就是W3C DOM針對XML文件所提供應用程式的標準程式介面，可以透過API來存取各節點物件，將一份結構化文件(XML Document)轉換成一棵節點(Nodes)樹，提供節點的屬性、方法來存取節點內容，或新增、修改、刪除節點內容。例如，

<book>
　　<code>K2010</code>
　　<title>Javascript入門</title>
　　<author>
　　　<zh-tw_name>金剛</zh-tw_name>
　　　<zh-en_name>Bruce</zh-en_name>
　　</author>
</book>

經過DOM剖析器之後，如圖，

圖一：DOM樹

MSXML

在Javascript程式可使用IE內建的MSXML元件來建立XML DOM物件，建立物件使用ProgID字串，但MSXML物件只能在IE使用，要注意相容性問題。

KKBruce提醒：實務上已經很少人使用MSXML來撰寫程式碼，以下只是簡單介紹，大多都已經使用標準AJAX方式(XMLHttpRequest物件)來處理。

JavaScript MSXML DOM版本
版本	DLL名稱	ProgID
2.0	msxml.dll	Microsoft.XMLDOM或MSXML.DOMDocument
2.6	msxml2.dll	MSXML2.DOMDocument
3.0	msxml3.dll	MSXML2.DOMDocument.3.0
4.0	msxml4.dll	MSXML2.DOMDocument.4.0
5.0	msxml5.dll	MSXML2.DOMDocument.5.0
6.0	msxml6.dll	MSXML2.DOMDocument.6.0

範例程式一(IE Only)：

<table border="1">
<script type="text/javascript" >
//<![CDATA[
　　// 建立XML DOM物件, 使用ProgID來建立
　　var xmlDom = new ActiveXObject("MSXML2.DOMDocument.6.0");
　　//async=false，可以保證XML文件能完全載入
　　xmlDom.async = "false";
　　// 載入XML文件
　　xmlDom.load("Books.xml");
　　// 建立文件元素子節點樹
　　var objNode = xmlDom.documentElement.childNodes;
　　// 顯示所有XML節點
　　for ( i=0; i < objNode.length; i++ ) {
   　　　document.write("<tr><td>");
   　　　document.write(objNode.item(i).nodeName + "</td><td>");
   　　　document.write(objNode.item(i).text + "</td></tr>");
　　}
//]]>
</script>
</table>

範例程式二(IE Only)：

>// 字串變數
var strXML = "<book>";
strXML = strXML + "<code>K2012</code>";
...
//載入字串變數
xmlDom.load(strXML);

先建立XMLDOM物件，然後由Books.xml當成資料來源，由XMLDOM物件讀入轉換成節點樹，再將節點讀取顯示出來。

[補充]使用MSXML2.DOMDocument.6.0與MSXML2.DOMDocument.3.0就好。

沒有留言:

張貼留言

感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。

訂閱：張貼留言 (Atom)

KingKong Bruce記事

網頁