| 上面所說有關HTML的內容非常少又簡單,但對已經瞭解的人來說就是沒用的. 如有問題可到權威網 http://www.html.com/ 上查看 以下開始說說關於XML的一些知識. XML也是標記語言,可它是自定義的,沒有已給定格式.不具體說它,給出例子就可明瞭. 如 <NAME>TOM</NAME> <SEX>M</SEX> 以上內容的<NAME>和<SEX>沒有像HTML的<P>或<BR>等那樣有固定顯示格式,你可以用你喜歡的詞來標記,如<姓名><性別>等等.(注意:XML是區分大小寫)至於如何使XML文檔格式化輸出,限於篇幅,不談. 下面做一個通訊錄的XML數據文檔 <?xml version=/"1.0/" encoding=/"gb2312/"?> <通訊錄> <聯繫人> <姓名>張三</姓名> <性別>男</性別> <住址>北京</住址> <電話號碼>123456789</電話號碼> </聯繫人> <聯繫人> <姓名>李四</姓名> <性別>女</性別> <住址>廣州</住址> <電話號碼>8587288</電話號碼> </聯繫人> <聯繫人> <姓名>王五</姓名> <性別>男</性別> <住址>上海</住址> <電話號碼>0745-522555</電話號碼> </聯繫人> </通訊錄> 上面只以三人爲例,可以自行加入其它人 <?xml version=/"1.0/" encoding=/"gb2312/"?>//這是頭部必需的聲明,其中version=/"1.0/"是版本聲明,現在都是1.0 encoding=/"gb2312/"是指定爲中文的gb2312編碼. 注意非常嚴格的格式要求,空格也不能有多有少 保存爲*.XML文檔,用IE瀏覽器打開可以看到是一個有節點的樹型結構 <通訊錄></通訊錄>包含了全部的元素,所以它是根元素,是唯一的必須的. 其它元素都必須包含在它的裏面,如<性別>等. XML數據文檔已經準備好了.先來做一個簡單的表單 <html> <head> <title> 我的通訊錄 </title> </head> <body> <form name=/"form1/"> 請輸入查詢人的姓名 <input type=/"text/" name=/"text1/"> <input type=/"button/" name=/"button1/" value=/"查詢/"> </form> </body> </html> 基本上這樣就做好了一個框架,具體實現要用javascript來處理動作,實現查詢. (如想了解XML技術,可到 http://www.xml.com/ ) |
現在我們應該寫點JAVASCRIPT代碼了.
JAVASCRIPT是一種腳本語言,基本語法和JAVA和C都很像.不過它還有一種叫VAR的變量,可以是所有的類型.想了解多一些,可訪問http://www.javascript.com
我覺得對於已學過任何一種編程語言的人來說,都應可以看懂簡單的JAVASCRIPT程序(或者說函數)所以我直接寫出來.
function check()
{
var s=/"/"; //用來存儲信息的字符串
var XDoc = new ActiveXObject(/"Microsoft.xmldom/");//定義DOM對象
XDoc.load(/"A.xml/"); //加載XML文檔(這裏文件名是A.XML)
var XML_root=XDoc.documentElement; //取得文檔的元素
nodes2=XML_root.childNodes; //文檔的子節點(即<通訊錄>)
node2=nodes2.nextNode(); //節點的下一個(<聯繫人>)
var n=this.document.form1.name.value; //這個值是在網頁輸入的
for(var i=0;i<nodes2.length;i++) //找所有的<聯繫人>
{
nodes3=node2.childNodes; //所有的<聯繫人>下的子元素
node3=nodes3.nextNode(); //<聯繫人>的下一個子元素<姓名>(張三)
if(node3.text==n)//node3.text是<姓名>*</姓名>的/"*/"(*是文字),找到相應姓名.
{
for(var j=0;j<nodes3.length;j++)//從<姓名>到<電話號碼>全部存儲
{
s=s+/" /"+node3.text;//<姓名>的值存在S字符串
node3=nodes3.nextNode();//移到<性別>
}
}
//往下找(下是指<聯繫人>)
node2=nodes2.nextNode();//移到下一個<聯繫人>
}
div1.innerText=s; //這是HTML中一個用法(要慢慢體會)
}
以上註解都是指第一次循環時,用心看就可在心中模擬出全過程.
s=s+/" /"+node3.text;中的+號是字符串連接.
網頁文件應該是這樣
<html>
<head><title>我的通訊錄</title>
<script language=/"javascript/">
<!--
這裏是上面的javascript代碼
//-->
</script></head>
<body>
<form name=/"form1/">
請輸入查詢姓名
<input type=/"text/" name=/"name/">
<input type=/"button/" value=/"查詢/" οnclick=/"check()/">
</form>
<hr>
<p><div id=/"div1/"></div>
</body>
</html>
只要那個XML文件名和JAVASCRIPT代碼中加載文件的一樣就可以了.
大家可能覺得這個非常不好的通訊錄,其實它是還要更改的,比如輸出很不好看,最好是用列表形式.還有,如果你按Enter鍵,是不行的,一定要用鼠標按那個/"查詢/"等等.要完善它(續待
)
下面略談一些改變,比如實現按Enter鍵就可提交表單.
<form name=/"form1/">
請輸入查詢人的姓名
<input type=/"text/" name=/"text1/" οnkeydοwn=/"javascript:if(event.keycode==13)Check();return false;/">
<input type=/"button/" name=/"button1/" value=/"查詢/">
</form>
還有,我們可以選擇多種形式的查詢,可按姓名,性別,住址,電話號碼.
這就要一個<select></select>
<form name=/"form1/">
請輸入查詢人的姓名
<select name=/"select1/">
<option value=/"n/">姓名</option>
<option value=/"s/">性別</option></select> //這裏只用姓名和性別
<input type=/"text/" name=/"text1/" οnkeydοwn=/"javascript:if(event.keycode==13)Check();return false;/">
<input type=/"button/" name=/"button1/" value=/"查詢/">
</form>
多了這些,就要在JAVASCRIPT代碼中作相應改變了,
要判斷使用的是哪種查詢,
if(this.document.form1.select1.value=/"n/")
這裏還要注意的是,如果選姓名查詢和原先的一樣,但若選性別查詢就要改變一些JAVASCRIPT了.
若用性別,由於XML文檔中,性別是處在姓名的下一個位置,則原來
nodes3=node2.childNodes; //所有的<聯繫人>下的子元素
node3=nodes3.nextNode(); //<聯繫人>的下一個子元素<姓名>(張三)
要改爲
nodes3=node2.childNodes; //所有的<聯繫人>下的子元素
node3=nodes3.nextNode(); //<聯繫人>的下一個子元素<姓名>(張三)
node3=nodes3.nextNode(); //再下一個,到了<性別>元素
那麼只要用if else就可以了,但要多一些選擇就要麻煩些,通過自行測試更改,就可以了.
下面說說實現表格輸出,
上次用innerText只是文本輸出,這回用innerHTML就可實現表格輸出了.
在原來的JAVASCRIPT中加上一個變量,
var table1=/"<table boder=/'1/'><tr><td>姓名</td><td>性別</td><td>住址</td><td>電話號碼</td></tr>/"+/"<tr>/";
原來
s=s+/" /"+node3.text;
變爲
s=s+/"<td>/"+node3.text+/"</td>/";
在 node2=nodes2.nextNode();//移到下一個<聯繫人>
後面加上 s=s+/"</tr>/";
原來
div1.innerText=s;
改爲
s=table1+s+/"</table>/"; div1.innerHTML=s;
這樣就可以實現表格輸出了.
其實它有這樣的輸出已經很不錯了,如果你想有一個漂亮的界面,就要自己做一個好看的網頁,再把這個表單加上去就行了.
就這樣,你就滿意嗎?
其實,有時候我們輸入查詢的時候常常會輸入多餘的空格,還有,當它找不到時會輸出上面的頭(姓名,性別,住址,電話號碼),沒內容.
如何處理這些呢?
精益求精的人,就會去想加辦法的.