1. Asynchronous JavaScript And XML
    1. HTML/XHTML與CSS
      1. 顯示UI與相關資料
    2. XML
      1. 伺服端非同步傳遞的資料
    3. XML DOM
      1. 當Browser非同步取得XML資料後，可進一步使用Javascript和XML DOM取出所需資訊
    4. XMLHttpRequest物件
      1. Javascript透過XMLHttpRequest物件來建立非同步HTTP請求
  2. XML
    1. Extensible Markup Language
      1. 利用特殊的標示語言(Markup Language)，建立XML文件(XML Document)
    2. XML Document
      1. XML Document是由元素(Elements)組成
      2. 標籤(Tags)
        1. XML能自己定義標籤，如：<book>、<title>…
      3. 元素(Elements)
        1. 元素是一個完整項目：<book code="K2010">Javascipt入門</book> 開始標籤、屬性、文字內容、結尾標籤
        2. 屬性
          1. 屬性值需要使用引號(單、雙皆可)括起
        3. 實體參考(Entity Reference)
          1. XML本身有一些保留符號，如文件內需要使用這些符號，請使用實體參考。
          2. Entity Reference
          3. &lt;
          4. <
          5. &gt;
          6. >
          7. &amp;
          8. &
          9. &apos;
          10. '
          11. &quot;
          12. "
        4. 註解(Comment)
          1. 與HTML相同
          2. <!-- 註解內容 -->
        5. PCDATA
          1. 文字內容稱PCDATA
          2. <book code="K2010">Javascipt入門</book>
          3. PCDATA --> Javascript入門
        6. CDATA
          1. Character Data
          2. 表示XML在剖析文件時不用處理此區塊的內容
          3. <script type="text/javascript"> <![CDATA[ function a(){ ... } ]]> </script>
          4. CDATA的註解
          5. 在HTML解析器(Browser)是不承認CDATA開始"<![CDATA["與結束"(]]>"標籤，也不認識HTML實體參考(Entity Reference)， 可能導致會把問題顯示在Browser，並可能產生"跨網站腳本"問題，所以在HTML會建議註解CDATA
          6. JS註解
          7. <script type="text/javascript"> // <![CDATA[ 　　document.write("<"); // ]]> </script>
          8. CSS註解
          9. <style type="text/css"> /*<![CDATA[*/ 　　body { background-image: url(marble.png) } /*]]>*/ </style>
        7. PI
          1. Processing Instructions
          2. 允許XML文件包含傳送給應用程式的指令，例如開頭宣告就是PI，PI如同註解，不屬於XML文件內容
          3. <?xml version="1.0" encoding="utf-8" ?>
        8. DTD
          1. Document Type Declarations
          2. 是XML文件的驗證機制，可以檢查XML標籤與文件架構是否正確
          3. <!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)> ]>
          4. 一行一行看，不會很難
          5. <!DOCTYPE book [
          6. book之下包含以下元素
          7. <!ELEMENT book (code, title, author, price)>
          8. 元素book之下包含其他子元素
          9. <!ELEMENT code (#PCDATA)>
          10. code元素含文字內容
  3. XHTML
    1. Well-Format(良好格式)的HTML
      1. 標籤、屬性都是小寫
      2. 一定要<html>為根元素
      3. 標籤必須有結尾標籤
        1. <br></br>或<br />
        2. 空元素需以 />結束標籤，<input id="name" type="text" />
      4. 巢狀標籤不能重疉
      5. 屬性必須有值
        1. html
          1. <input type=radio checked>
        2. xhtml
          1. <input type="radio" checked="checked" />
      6. 屬性值需使用引號
      7. Script需使用CDATA
  4. DOM
    1. Document Object Model，XML DOM可以將XML文件視為一棵樹狀結構的節點， XML DOM就是W3C DOM針對XML文件所提供應用程式的標準程式介面， 可以透過API來存取各節點物件，將一份結構化文件(XML Document)轉換成一棵節點(Nodes)樹， 提供節點的屬性、方法來存取節點內容，或新增、修改、刪除節點內容
    2. <book> 　　<code>K2010</code> 　　<title>Javascript入門</title> 　　<author> 　　　<zh-tw_name>金剛</zh-tw_name> 　　　<zh-en_name>Bruce</zh-en_name> 　　</author> </book>
      1. DOM剖析器
        1. book
          1. code
          2. K2010
          3. title
          4. Javascript入門
          5. author
          6. zh-tw_name
          7. 金剛
          8. zh-en_name
          9. Bruce
  5. MSXML
    1. 在Javascript程式可使用IE內建的MSXML元件來建立XML DOM物件，建立物件使用ProgID字串，但MSXML物件只能在IE使用，要注意相容性問題
    2. MSXML DOM
      1. 2.0
        1. msxml.dll
        2. Microsoft.XMLDOM或MSXML.DOMDocument
      2. 2.6
        1. msxml2.dll
        2. MSXML2.DOMDocument
      3. 3.0
        1. msxml3.dll
        2. MSXML2.DOMDocument.3.0
      4. 4.0
        1. msxml4.dll
        2. MSXML2.DOMDocument.4.0
      5. 5.0
        1. msxml5.dll
        2. MSXML2.DOMDocument.5.0
      6. 6.0
        1. msxml6.dll
        2. MSXML2.DOMDocument.6.0
    3. Example Code(IE Only)
      1. <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>
      2. // 字串變數 var strXML = "<book>"; strXML = strXML + "<code>K2010</code>"; ... //載入字串變數 xmlDom.load(strXML);
      3. 先建立XMLDOM物件，然後由Books.xml當成資料來源，由XMLDOM物件讀入轉換成節點樹，再將節點讀取顯示出來
      4. 參考資料
        1. 使用MSXML2.DOMDocument.6.0與MSXML2.DOMDocument.3.0就好