DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> Web設計中如何使用XML數據源對象(2)
Web設計中如何使用XML數據源對象(2)
編輯:XML詳解     

使用外部XML文件提取數據

  為了使用XML-DSO加載一個外部XML文件,你必須顯式的包含這個對象並且使用一些JavaScript。

  首先創建一個XML-DSO對象,使用ID myXML。添加寬度和高度屬性到<OBJECT>標記中,然後設置它們的值為0。這保證XML-DSO對象不會占據你的Web頁面的任何空間。

  其次,使用datasrc創建一個象myXML一樣的表--類似於代碼列表2中一樣。代碼使用<DIV>標記(在TD標記之)提取數據,使用datafld作為第一欄的信息,並且使用URL作為第二欄。添加<SCRIPT>標記,因為在這裡,外部的XML使用Java腳本顯式地聲明你想要加載的XML文件。

  設置變量xmlDso為myXML.XMLDocument。myXML引用你已經創建的對象。接下來,使用XML-DSO的load()方法加載example3.xml。文件example3.xml連接到對象myXML上。

  <!-- example3.XML -->
<?XML version="1.0" ?>
<ticker>
<item>
<message>JavaScript Ticker using XML DSO</message>
<URL>http://someURL.com</URL>
</item>
</ticker>

  現在,研究一下下面的Html頁面:

  <!-- example3.htm -->
<Html>
<head>
<title>XML DSO-example3.htm</title>
<script language="JavaScript">
function load() {
var xmlDso=myXML.XMLDocument;
xmlDso.load("example3.XML");
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="load()">

  <object id="myXML" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>

<table datasrc="#myXML" border="1">
<thead>
<th>Message</th>
<th>URL</th>
</thead>
<tr>
<td><div datafld="message"></div></td>
<td><div datafld="URL"></div></td>
</tr>
</table>

  </body>
</Html>

  輸出應是:

  Message URL
   JavaScript Ticker using XML DSO http://someURL.com

  上面的腳本非常特殊化。下面給出一個更一般的腳本:

  <script language="JavaScript">
var XMLDso;
function load(XMLFile, objName) {
eval('xmlDso='+objName+'.XMLDocument');
xmlDso.load(XMLFile);
}
</script>
Now, to load any XML file use:
load("SomeXMLFile.xml","anyXMLDsoObject");

  使用XML-DSO和JavaScript

  假設你有一個包含姓名、電子郵件地址和電話號碼的XML文件。你想使用它構建一個應用程序,顯示每個人的檔案--一次顯示一個。用戶將使用"Next"和"Previous"按鈕浏覽每個人的數據。Javascript可以幫助你實現這個目的。

  下面的代碼使用記錄集方法把文件中所有的數據保存到一個變量memberSet中。moveNext()方法指向下一個數據項(下一行)。腳本然後載入XML文件example4.XML,把記錄保存到變量memberSet中。第一個記錄將被顯示,但是memberSet.moveNext()指向文件中相對於前一個指定數據的下一個記錄。

  <!-- example4.XML -->
<?XML version="1.0" ?>
<myDB>
<member>
<name>Premshree Pillai</name>
<sex>male</sex>
</member>
<member>
<name>Vinod</name>
<sex>male</sex>
</member>
<member>
<name>Santhosh</name>
<sex>male</sex>
</member>
</myDB>

 這裡是相應的Html文件:

  <!-- example4.htm -->
<Html>
<head>
<title>XML DSO-example4.htm</title>
<script language="JavaScript">
function load() {
var xmlDso=myDB.XMLDocument;
xmlDso.load("example4.XML");

  /* Get the complete record set */
var memberSet=myDB.recordset;

  /* Go to next data */
memberSet.moveNext();
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="load()">

  <object id="myDB" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>

  <span datasrc="#myDB" datafld="name"></span>

  </body>
</Html>

  輸出應是:

  Vinod

  下面給出更多使用JavaScript操作XML-DSO的方法:

  · movePrevious(): 指向前一個數據項。

  · moveFirst(): 指向第一個數據項。

  · moveLast(): 指向最後一個數據項。

  · EOF: 這個屬性用來檢測我們是否已經到達數據記錄的底部。

  使用XML-DSO和JavaScript

  假設你有一個包含姓名、電子郵件地址和電話號碼的XML文件。你想使用它構建一個應用程序,顯示每個人的檔案--一次顯示一個。用戶將使用"Next"和"Previous"按鈕浏覽每個人的數據。Javascript可以幫助你實現這個目的。

  下面的代碼使用記錄集方法把文件中所有的數據保存到一個變量memberSet中。moveNext()方法指向下一個數據項(下一行)。腳本然後載入XML文件example4.XML,把記錄保存到變量memberSet中。第一個記錄將被顯示,但是memberSet.moveNext()指向文件中相對於前一個指定數據的下一個記錄。

 <!-- example4.XML -->
<?XML version="1.0" ?>
<myDB>
<member>
<name>Premshree Pillai</name>
<sex>male</sex>
</member>
<member>
<name>Vinod</name>
<sex>male</sex>
</member>
<member>
<name>Santhosh</name>
<sex>male</sex>
</member>
</myDB> 

  這裡是相應的Html文件:

  <!-- example4.htm -->
<Html>
<head>
<title>XML DSO-example4.htm</title>
<script language="JavaScript">
function load() {
var xmlDso=myDB.XMLDocument;
xmlDso.load("example4.XML");

  /* Get the complete record set */
var memberSet=myDB.recordset;

  /* Go to next data */
memberSet.moveNext();
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="load()">

  <object id="myDB" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>

  <span datasrc="#myDB" datafld="name"></span>

  </body>
</Html>

  輸出應是:

  Vinod

  下面給出更多使用JavaScript操作XML-DSO的方法:

  · movePrevious(): 指向前一個數據項。

  · moveFirst(): 指向第一個數據項。

  · moveLast(): 指向最後一個數據項。

  · EOF: 這個屬性用來檢測我們是否已經到達數據記錄的底部。

  initTicker()首先檢查是否有IE 4+。如果浏覽器是IE4+,這個XML文件被作為一個參數被傳遞並載入。如果定時器失敗了,那麼調用xmlDsoTicker()函數。xmlDsoTicker()除了xmlFile參數以外,和initTicker()有相同的參數,因為XML文件已經被載入。XMLDsoTicker()檢查變量counter(初始值為maxMsgs)是否小於maxMsgs-1。如果是,moveNext()方法指向tickerSet中下一個數據項。

  Html頁面的BODY包含下面的代碼:

  <a href="" datasrc="#ticker" datafld="URL" class="tickerStyle">
<span datasrc="#ticker" datafld="message"></span>
</a>


圖1:定時器應用程序顯示輸出。
  在這段代碼中,<A>標記把XML文件的URL作為它的datafld。<SPAN>標記把XML文件的信息作為它的datafld。這個信息在<SPAN>元素中顯示,然後整個信息可以通過這段信息相應的URL連接。
  這樣,<A>和<SPAN>元素包含下一個數據項(URL和信息)。在一段延遲以後,<A>和<SPAN>指向下一個數據。只要counter<maxMsgs-1(計數器每次遞增),這個操作就會發生。如果counter<maxMsgs-1是假,計數器就被設置為0,然後指向tickerSet中的第一個數據項。

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