DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML基礎 >> 用XML數據島解決用戶界面問題 - 2
用XML數據島解決用戶界面問題 - 2
編輯:XML基礎     
把處理過程移到客戶端

  當Web服務器返回網頁後,所有進一步的操作處理都在客戶端進行。我原先認為如果向客戶端發送一個大的數據集會使程序的速度放慢。但後來我卻發現一次性發送所有數據比在客戶與服務器之間來回地進行數據交換快得多。唯一可被注意到的停頓只是在IE5的XML解析器讀取數據時的一個短暫的初始化停頓。

  HTML文件本身包含有4個元素:一個保存州名數據的選擇列表(主列表),XML數據,一個從屬列表的div標記占位符,和兩個腳本。當州名選擇列表的選項發生變化時,第二個腳本就執行(Listing 2)。

  你希望每次用戶選擇一個州時都能從數據島重新得到相應的商店列表。所以你需要一個腳本去處理州名選擇列表的onChange事件:

  

在這個腳本中重新得到了州名選擇列表的值:
  Dim stateCode

  stateCode=document.all.State.value

  接著重新得到所選定州的商店列表。你可以通過兩個方法得到這個列表。第一個辦法就是獲得<XML>標記符的記錄集屬性的引用:

  Dim R

  Set R = xmldata.recordset

通過這個方法得到的記錄集是一個標准的ADO記錄集對象,字段名都與標記符相對應。這個方法只有在每個記錄都有同樣的字段的"簡單"XML數據文件中才能很好地工作。

  第二個方法就比較強大和普遍。IE5把XML數據島象其他HTML元素一樣對待。為了在客戶端訪問XML數據,你只需通過ID來引用該元素。IE5將返回XML樹的根元素(document元素):

  set xml = document.all("xmldata")

  你用這個document元素可以執行Extensible Stylesheet Language (XSL)查詢語句。使用XSL查詢語句,你可以得到某個給定層次上的節點列表,包含指定屬性的節點列表,或以上兩者的任意組合。例如,以下的查詢語句返回所有符合用戶所選州的商店節點:

  Dim nodes

  set nodes = xml.selectNodes ("locations/state[@code='" & stateCode & "']/store")

XSL搜索字符串看起來很象一個文件路徑;它有XML樹相應各層次的值。用"/"分隔每個層次。以"節點=數值"的匹配方式加到相關節點的"[]"中搜索指定數值的節點,在屬性名前加上"@"來搜索包含指定屬性的節點。運行selectNodes方法將返回一個IXMLDOMNodes集合對象。最後,顯示從屬列表。最簡單的方法:根據XSL查詢語句返回的節點列表來改變從屬列表的標
記符的值:

  set aList = document.all("cities")

  aList.options.length = 0

  i = 0

  For Each N In nodes

   anID = N.selectSingleNode("id").text

   aCity = N.selectSingleNode _("city").text

   aList.options.length = _aList.options.length + 1

   aList.options(i).id = anID

   aList.options(i).value = aCity

   aList.options(i).innerText = aCity

   i = i + 1

  Next

  現在你知道了如何利用XML數據島來解決從屬列表問題。注意:這一技巧不適合於大規模的數據-如那些成千上萬的記錄-但如果那樣的話,那主要還是一個如何顯示的問題,而非技術上的問題。如果你發現一個查詢語句可能返回不適合的大組記錄,你即可以限制返回記錄的數目(例如為用戶提供一個"More Record"按鈕),又可以修改用戶界面使用戶可以點擊下一層次的內容,因此而限制了用戶必須選擇的記錄數目。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved