| 上面所说有关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;
这样就可以实现表格输出了.
其实它有这样的输出已经很不错了,如果你想有一个漂亮的界面,就要自己做一个好看的网页,再把这个表单加上去就行了.
就这样,你就满意吗?
其实,有时候我们输入查询的时候常常会输入多余的空格,还有,当它找不到时会输出上面的头(姓名,性别,住址,电话号码),没内容.
如何处理这些呢?
精益求精的人,就会去想加办法的.