DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> 用XML數據島結合Dom制作通訊錄
用XML數據島結合Dom制作通訊錄
編輯:XML詳解     

一般情況下,如果要為網站提供一個通訊錄程序,需要使用CGI結合後台數據庫技術,這對WEB服務器的要求比較高,在很多不提供數據庫功能的虛擬主機上甚至無法實現。當然,我們還可以采用TXT文本替代數據庫,但TXT文本是比較難操作的,我們必須一行一行的讀取判斷,還要用分隔字符串實現字段分離,無法進行復雜運算。
現在,我們可以使用“可擴展的標記語言 (XML)” 來保存通訊錄的數據,從而體現出XML的優點:表現數據的結構化方法,對於保存許多關系型數據結構的文件很有幫助。

一、基本原理:
在Microsoft Internet Explorer 5.0及以後的版本裡,我們可以利用XML元素來創建數據島,數據島就是被HTML頁面引用或包含的XML數據,XML數據可以包含在Html文件內,也可以包含在某外部文件內,利用XML數據島可以讓我們免除編寫復雜腳本的麻煩。DOM可對XML文檔進行解析,文檔中的元素、實體、屬性等所有個體都可以用對象模型表示,整個文檔的邏輯結構類似一棵樹,生成的對象模型就是樹的節點,每個對象同時包含了方法和屬性,DOM提供了許多查找節點的方法。利用DOM,開發人員可以動態地創建XML、遍歷文檔、增加(刪除/修改)文檔內容,DOM提供的API與編程語言無關,所以對一些DOM標准中沒有明確定義的接口,不同解析器的實現方法可能會有所差別。

二、具體流程為:
1、定義XML文件如下所示:
  <?XML version="1.0" encoding="gb2312"?>
    <中國計算機世界出版服務公司通信錄>
      <計算機世界 contactID="2">
        <部門名稱>計算機室</部門名稱>
        <電話號碼>139</電話號碼>
        <電子郵件>[email protected]</電子郵件>
      </計算機世界>
    </中國計算機世界出版服務公司通信錄>
將上述XML文檔保存為tele.xml文件,同時,將上述XML文檔中的字段內容置空,做為初始化框架數據,另存為newid.XML文件。
2、客戶端加載 XML 文檔,在放置通訊錄的表格中通過DATASRC='#xmldso'將XML文件綁定在表格中,DATASRC屬性實際上是通過在要處理的XML元素的ID屬性的前面加上#來實現的,所以我們可以在TD元素中間指定具體需要顯示的字段;
3、使用DOM技術對通訊錄進行增加、刪除記錄操作;
4、通過XMLHTTP協議連接到服務器,保存XML文檔。

三、XML DOM編程簡述:
1、客戶端dom.htm頁面:
<Html><BODY bgColor=#a1bae6>
<XML id=xmldso src="tele.xml"></XML>
<XML id=newid></XML> <!--加載XML數據-->
<SCRIPT Language=Javascript>
newid.async = false;
newid.load("newid.XML");
//增加記錄;
function addID(){
var doc=xmldso.XMLDocument
var rootnode=doc.documentElement
var sortNode = rootnode.selectNodes("//部門名稱")
var currentid = sortNode.length-1
var cc=sortNode.item(currentid).text;
if ((cc=="尚未輸入")||(cc==""))
{
alert("請將最後一行數據填寫完畢後再增加新的記錄!");
}
else

var node= newid.documentElement.childNodes(0).cloneNode(true);
var contactID=parseInt(sortNode.item(currentid).parentNode.getAttribute("contactID"))+1; 
node.setAttribute("contactID",contactID); 
XMLdso.documentElement.appendChild(node);
}
}
//刪除記錄
function delID(whichFld){
var sortNode = XMLdso.selectSingleNode("//計算機世界[@contactID='"+whichFld+"']");
if (sortNode.parentNode.childNodes.length>1) sortNode.parentNode.removeChild(sortNode); 
}
</SCRIPT>
<script language="vbscript">
Sub cc_onmouseup '保存記錄;
Dim objXML, objXSL, objFSO,strFile, strFileName, strXSL,strURL,TheForm
set SaveXMLDoc=xmldso.XMLDocument
strURL="dns2.ASP"
Set objXML = CreateObject("Microsoft.XMLHTTP") '創建MS的XMLHTTP組件;
objXML.Open "post",strURL,false '采用Post提交方式;
objXML.setrequestheader "content-type","application/x-www-form-urlencoded"
objXML.send SaveXMLDoc ' 發送信息,保存XML數據;
'xmlGet = objXML.responsebody '稍等片刻後,得到服務器端傳回來的結果;
msgbox "保存成功!" 
Set objXML = Nothing
end sub 
</SCRIPT>
<center><b>計算機世界----通信錄</b><br><br>
<TABLE id="table" DATASRC='#XMLdso' BORDER CELLPADDING=3>
<!--進行數據綁定-->
<THEAD><TH>編號</TH><TH>部門名稱</TH><TH>電話號碼</TH><TH>電子郵件</TH></THEAD>
<TR>
<TD><acronym title='點擊即可刪除該記錄'><INPUT TYPE=button size=4 DATAFLD="contactID" onclick="delID(this.value)"></acronym></TD>
<TD><INPUT TYPE=TEXT DATAFLD="部門名稱"></TD>
<TD><INPUT TYPE=TEXT DATAFLD="電話號碼"></TD> 
<TD><INPUT TYPE=TEXT DATAFLD="電子郵件"></TD>
</TR>
</TABLE>
<INPUT TYPE=BUTTON name=dd id=dd VALUE="增加記錄" onmouSEOver="this.focus()" onmousedown="addID();">
<INPUT TYPE=BUTTON name=cc id=cc VALUE="保存"></center></BODY></Html>

2、服務器端dns2.ASP程序比較簡單,在接收到XML數據後,創建文件對象,保存到tele.XML即可:
<
Set ReceivedDoc = CreateObject("Microsoft.XMLDOM") '創建 XML DOM實例;
ReceivedDoc.async=False
ReceivedDoc.load Request '接收XML數據;
Set files=Server.CreateObject("Scripting.FileSystemObject")
Set numtxt=files.CreateTextFile(Server.MapPath("tele.XML"),True)
numtxt.WriteLine(replace(ReceivedDoc.xml,"?>"," encoding=""gb2312""?>")) '將XML數據寫入文件
numtxt.Close
response.write ReceivedDoc.XML
>

3、實際使用過程中,還需要增加一個顯示通訊錄的網頁index.htm,其實就是上面dom.htm的簡化版,去除所有增加、刪除、修改和保存功能,只在表格單元格中用LABEL顯示數據:
<Html><BODY bgColor=#a1bae6>
<XML id=xmldso src="tele.xml"></XML>
<center><b>計算機世界----通信錄</b><br><br>
<TABLE id="table" DATASRC='#XMLdso' BORDER CELLPADDING=3>
<THEAD><TH>編號</TH><TH>部門名稱</TH><TH>電話號碼</TH><TH>電子郵件</TH>
</THEAD>
<TR>
<TD><label DATAFLD="contactID"></label></TD>
<TD><label DATAFLD="部門名稱"></label></TD>
<TD><label DATAFLD="電話號碼"></label></TD> 
<TD><label DATAFLD="電子郵件"></label></TD>
</TR>
</TABLE>
</center></BODY></Html>

四、使用XML數據島結合Dom技術的優點:
1、首先,當然是XML本身帶來的好處。XML打破了標記定義的壟斷,你可以自定義字段名稱,在本文所用的XML文件中,連字段名都可以為中文,數據非常地簡單明晰,因為它所攜帶的信息不是顯示上的描述,而是信息的語意,極大的加強了文檔的可讀性。使用XML也便於不同系統之間信息的傳輸。
2、XML數據島允許用戶在客戶端訪問與操控數據集,不必頻繁的與服務器交互,這對於減輕服務器的負荷很有幫助。同時,由於XML數據島本身的特點,使得在客戶端的數據操作十分簡便,減少了編程量。
3、DOM強制使用樹模型來訪問XML文檔中的信息,由於XML本質上就是一種分層結構,所以這種描述方法是相當有效的。通過DOM接口,應用程序可以在任何時候訪問XML文檔中的任何一部分數據,控制起來相當靈活。
4、采用xmlhttp對象傳送XML數據到服務器,客戶端頁面無閃爍刷新現象。

本程序在基於Windows2000平台的IIS5.0和IE5.0上運行通過。在實際運用過程中,還可使用DOM結合XSL技術為通訊錄增加排序、格式轉換和數據查找等功能,使用XML數據島的datapagesize屬性以及previousPage、nextPage函數為通訊錄增加分頁功能,使用DTD與XML Schema動態驗證通訊錄數據。

 

------------------------THE END----------------------

 


附:(全部源程序)
****************************************************************************
一、index.htm(顯示通訊錄):
<Html><BODY bgColor=#a1bae6>
<XML id=xmldso src="tele.xml"></XML>
<center><b>計算機世界----通迅錄</b><br><br>
<TABLE id="table" DATASRC='#XMLdso' BORDER CELLPADDING=3>
<THEAD><TH>編號</TH><TH>部門名稱</TH><TH>電話號碼</TH><TH>電子郵件</TH>
</THEAD>
<TR>
<TD><label DATAFLD="contactID"></label></TD>
<TD><label DATAFLD="部門名稱"></label></TD>
<TD><label DATAFLD="電話號碼"></label></TD> 
<TD><label DATAFLD="電子郵件"></label></TD>
</TR>
</TABLE>
</center></BODY></Html>
****************************************************************************
二、dom.htm(在線編輯通訊錄):
<Html><BODY bgColor=#a1bae6>
<XML id=xmldso src="tele.xml"></XML>
<XML id=newid></XML>
<SCRIPT Language=JavaScript>
newid.async = false;
newid.load("newid.XML");
function addID(){
var doc=xmldso.XMLDocument
var rootnode=doc.documentElement
var sortNode = rootnode.selectNodes("//部門名稱")
var currentid = sortNode.length-1
var cc=sortNode.item(currentid).text;
if ((cc=="尚未輸入")||(cc==""))
{
alert("請將最後一行數據填寫完畢後再增加新的記錄!");
}
else

var node= newid.documentElement.childNodes(0).cloneNode(true);
var contactID=parseInt(sortNode.item(currentid).parentNode.getAttribute("contactID"))+1; 
node.setAttribute("contactID",contactID); 
XMLdso.documentElement.appendChild(node);
}
}
function delID(whichFld){
var sortNode = XMLdso.selectSingleNode("//計算機世界[@contactID='"+whichFld+"']");
if (sortNode.parentNode.childNodes.length>1) sortNode.parentNode.removeChild(sortNode); 
}
</SCRIPT>
<script language="vbscript">
Sub cc_onmouseup '當點擊“保存”按鈕時觸發;
Dim objXML, objXSL, objFSO,strFile, strFileName, strXSL,strURL,TheForm
set SaveXMLDoc=xmldso.XMLDocument
strURL="dns2.ASP"
Set objXML = CreateObject("Microsoft.XMLHTTP") '創建MS的XMLHTTP組件;
objXML.Open "post",strURL,false '采用Post提交方式;
objXML.setrequestheader "content-type","application/x-www-form-urlencoded"
objXML.send SaveXMLDoc ' 發送信息
'xmlGet = objXML.responsebody '稍等片刻後,得到服務器端傳回來的結果;
msgbox "保存成功!" 
Set objXML = Nothing
end sub 
</SCRIPT>
<center><b>計算機世界----通信錄</b><br><br>
<TABLE id="table" DATASRC='#XMLdso' BORDER CELLPADDING=3>
<THEAD>
<TH>編號</TH>
<TH>部門名稱</TH>
<TH>電話號碼</TH>
<TH>電子郵件</TH>
</THEAD>
<TR>
<TD><acronym title='點擊即可刪除該記錄'><INPUT TYPE=button size=4 DATAFLD="contactID" onclick="delID(this.value)"></acronym></TD>
<TD><INPUT TYPE=TEXT DATAFLD="部門名稱"></TD>
<TD><INPUT TYPE=TEXT DATAFLD="電話號碼"></TD> 
<TD><INPUT TYPE=TEXT DATAFLD="電子郵件"></TD>
</TR>
</TABLE>
<INPUT TYPE=BUTTON name=dd id=dd VALUE="增加記錄" onmouSEOver="this.focus()" onmousedown="addID();">
<INPUT TYPE=BUTTON name=cc id=cc VALUE="保存"></center></BODY></Html>
****************************************************************************
三、dns2.ASP(後台保存通訊錄):
<%
Set ReceivedDoc = CreateObject("Microsoft.XMLDOM")
ReceivedDoc.async=False
ReceivedDoc.load Request
Set files=Server.CreateObject("Scripting.FileSystemObject")
Set numtxt=files.CreateTextFile(Server.MapPath("tele.XML"),True)
numtxt.WriteLine(replace(ReceivedDoc.XML,"?>"," encoding=""gb2312""?>"))
numtxt.Close
response.write ReceivedDoc.XML
%>
****************************************************************************
四、tele.xml(通訊錄XML文檔):
<?XML version="1.0" encoding="gb2312"?>
<中國計算機世界出版服務公司通信錄>
<計算機世界 contactID="1">
<部門名稱>電話總機</部門名稱>
<電話號碼>010-68130909</電話號碼>
<電子郵件>[email protected]</電子郵件>
</計算機世界>
</中國計算機世界出版服務公司通信錄>
****************************************************************************
五、newid.xml(通訊錄XML初始化文檔):
<?XML version="1.0" encoding="gb2312"?>
<中國計算機世界出版服務公司通信錄>
<計算機世界 contactID="1">
<部門名稱>尚未輸入</部門名稱>
<電話號碼>保密</電話號碼>
<電子郵件>保密</電子郵件>
</計算機世界>
</中國計算機世界出版服務公司通信錄>

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