Firefox 1.5 中的 XML，第 3 部分：利用 JavaScript 處理 Firefox 中的 XML_

Firefox 1.5 中的 XML，第 3 部分：利用 JavaScript 處理 Firefox 中的 XML__Java

最後更新：2018-07-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這是 “ Firefox 1.5 中的 XML” 系列中的第三篇文章，您將學習在 Mozilla Firefox 中使用 JavaScript 實現處理 XML。在前兩篇文章 Firefox 1.5 中的 XML，第 1 部分：XML 屬性概述和 Firefox 1.5 中的 XML，第 2 部分：基本 XML 處理中，我們瞭解了 Mozilla Firefox 中各種與 XML 相關的工具，以及 XML 解析的基本概念、階層式樣式表（CSS）和 XSLT 樣式表調用。

瞭解了 XML 在 Firefox 瀏覽器中的基本顯示和樣式後，下一個要關注的功能就是指令碼。本文中，我將展示利用 JavaScript 代碼處理 XML 這一基本概念。本文包含的所有程式碼範例和螢幕截圖都是在 Ubuntu Linux® 系統中使用 Firefox 1.5.0.4 建立和測試的，設定檔沒有修改過（即沒有擴充，保留了安裝時的預設選項）。如果要編寫用於 XML 處理的跨瀏覽器代碼，可能必須使用其他的瀏覽器嗅探技術，但是，我沒有在本文介紹這些技術。

載入 XML 檔案

您可以使用 Web 頁面內嵌的 JavaScript 代碼載入 XML 文檔。我將從一個 HTML Web 頁面樣本入手，該頁面載入一個簡單的 XML 郵件清單格式用於動態更新，要載入的 XML 文檔如清單 1 所示（labels.xml）。
清單 1.（labels.xml）地址標籤 XML

<?xml version="1.0" encoding="iso-8859-1"?>
<labels>
  <label id='ep' added="2003-06-10">
    <name>Ezra Pound</name>
    <address>
      <street>45 Usura Place</street>
      <city>Hailey</city>
      <province>ID</province>
    </address>
  </label>
  <label id='tse' added="2003-06-20">
    <name>Thomas Eliot</name>
    <address>
      <street>3 Prufrock Lane</street>
      <city>Stamford</city>
      <province>CT</province>
    </address>
  </label>
  <label id="lh" added="2004-11-01">
    <name>Langston Hughes</name>
    <address>
      <street>10 Bridge Tunnel</street>
      <city>Harlem</city>
      <province>NY</province>
    </address>
  </label>
  <label id="co" added="2004-11-15">
    <name>Christopher Okigbo</name>
    <address>
      <street>7 Heaven's Gate</street>
      <city>Idoto</city>
      <province>Anambra</province>
    </address>
  </label>
</labels>

清單 2 是僅包括一個連結的 HTML 頁面，連結顯示 “Click here to load addresses”。單擊連結，地址標籤的資訊被添加到頁面中。
清單 2. HTML 頁面利用 JavaScript 載入 XML 用於動態更新

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <title>Address book</title>
    <script type="application/javascript">
var ELEMENT_NODE = 1
//TEXT_NODE

function loadAddresses()
{
  xmlDoc = document.implementation.createDocument("", "", null);
  xmlDoc.onload = writeList;
  xmlDoc.load("labels.xml");
}

function writeList()
{
  var labels = xmlDoc.getElementsByTagName('label');
  var ol = document.createElement('OL');

  for (i=0; i < labels.length; i++)
  {
    var li = document.createElement('LI');
    for (j=0; j < labels[i].childNodes.length; j++)
    {
      if (labels[i].childNodes[j].nodeType != ELEMENT_NODE) continue;
      var cdata = document.createTextNode(
        labels[i].childNodes[j].firstChild.nodeValue);
      li.appendChild(cdata);
    }
    var labelId = document.createTextNode('(' +
      labels[i].getAttribute('id') + ')');
    li.appendChild(labelId);
    ol.appendChild(li);
  }
  document.getElementById('updateTarget').appendChild(ol);
}
    </script>
  </head>
  <body id='updateTarget'>
    <p>
      <a href="javascript:loadAddresses()">Click here to load addresses</a>
    </p>
  </body>
</html>

script 元素體現動態特性，定義一個 JavaScript 函數 loadAddresses，這個函數將被 HTML 中的連結調用。該函數建立一個空文檔執行個體，然後使用 load 函數讀入清單 1（labels.xml）。load 函數是非同步執行的，因此，在 XML 文檔讀入的同時，指令碼可跳到下一行執行，使您能夠在 XML 載入開始後就使用一個觸發函數開始運行。因此，我為一個獨立的函數 writeList 設定 onload 屬性。該函數使用方便的文件物件模型（Document Object Model, DOM）的 getElementsByTagName 方法遍曆標籤。如果 XML 文檔使用名稱空間，那麼要使用 getElementsByTagNameNS 表單而不是上面的方法，並將名稱空間指定為第一個參數。在下一節中，您將會看到一個這樣的例子。在清單 2 中，只使用 DOM 的基本層（叫做 DOM Level 1）進行 XML 處理。對於支援名稱空間的應用程式，需要使用 DOM Level 2，它擴充了許多 Level 1 方法，可以支援名稱空間。清單 2 建立了一個表示有序列表的子樹，將 HTML 主文件作為工廠（factory）來建立節點。這樣，產生的子樹可以插入到 HTML 主文件中。清單 2 使用普通模式讀取源 XML 樹，然後將相應的節點添加到輸出 HTML 子樹中。

對每個 label 元素執行迴圈語句 labels[i].childNodes，尋找 name 和 address 子節點。為避免對文本節點的子節點執行操作，使用 nodeType 測試。使用 firstChild.nodeValue 方法進行訪問獲得 name 元素的子文本。對 address 元素來說，第一個子節點是空格。您不能訪問 address 的子節點的任何常值內容。使用 getAttribute 方法可以訪問 ID。將收集到的所有文本添加到清單項目中。編譯完所有的清單項目元素之後，使用 appendChild 方法更新包含子樹的 HTML 文檔。可以使用 updateTarget ID 標記將添加該子樹的元素（body）。當第一次在 Firefox 中載入該 HTML 時，只能看到如圖 1 所示的連結。
圖 1. 載入清單 2 之後的瀏覽器顯示

本文轉自IBM Developerworks中國

請點擊此處查看全文

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Firefox 1.5 中的 XML，第 3 部分：利用 JavaScript 處理 Firefox 中的 XML__Java

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support