JavaScript - XML DOM簡介

Asynchronous JavaScript And XML, AJAX

  1. HTML/XHTML與CSS:顯示UI與相關資料
  2. XML:伺服端非同步傳遞的資料
  3. XML DOM:當Browser非同步取得XML資料後,可進一步使用Javascript和XML DOM取出所需資訊
  4. 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實體參考
實體參考代表符號
&lt;<
&gt;>
&amp;&
&apos;'
&quot;"

註解(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?

  1. 標籤、屬性都是小寫
  2. 一定要<html>為根元素
  3. 標籤必須有結尾標籤,空元素需以 />結束標籤
  4. 巢狀標籤不能重疉
  5. 屬性必須有值
  6. 屬性值需使用引號
  7. 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樹
圖一:DOM樹


MSXML

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

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

JavaScript MSXML DOM版本
版本DLL名稱ProgID
2.0msxml.dllMicrosoft.XMLDOM或MSXML.DOMDocument
2.6msxml2.dllMSXML2.DOMDocument
3.0msxml3.dllMSXML2.DOMDocument.3.0
4.0msxml4.dllMSXML2.DOMDocument.4.0
5.0msxml5.dllMSXML2.DOMDocument.5.0
6.0msxml6.dllMSXML2.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就好。

沒有留言:

張貼留言

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