[原创]HTML+Javascript+XML=???

wool王 · 发表于 2005-4-22 12:03

用js可以select xml吗?

MJ名字不要太长 · 发表于 2005-4-22 12:06

可以

powerwind · 发表于 2005-4-22 14:42

上面所说有关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/ )

待续

powerwind · 发表于 2005-4-22 21:39

现在我们应该写点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">

</script></head>
<body>
<form name="form1">
请输入查询姓名
<input type="text" name="name">
<input type="button" value="查询" onclick="check()">
</form>
<hr>
<p><div id="div1"></div>
</body>
</html>
只要那个XML文件名和JAVASCRIPT代码中加载文件的一样就可以了.
大家可能觉得这个非常不好的通讯录,其实它是还要更改的,比如输出很不好看,最好是用列表形式.还有,如果你按Enter键,是不行的,一定要用鼠标按那个"查询"等等.要完善它(续待)

wool王 · 发表于 2005-4-23 11:28

不错。。。学到野。。。

用xml做缓存而且在客户端做select动作可以减少服务器负担。。。

不过弊端在于数据安全性。。。

受用，，，谢谢楼主。。。

powerwind · 发表于 2005-4-23 14:39

下面略谈一些改变,比如实现按Enter键就可提交表单.

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

yolk · 发表于 2005-4-29 16:44

高手,我有问题:
如上有xml文件:
<?xml version="1.0" encoding="gb2312"?>
<通讯录>
<联系人>
<姓名>张三</姓名>
<性别>男</性别>
<住址>北京</住址>
<电话号码>123456789</电话号码>
</联系人>
<联系人>
<姓名>李四</姓名>
<性别>女</性别>
<住址>广州</住址>
<电话号码>8587288</电话号码>
</联系人>
<联系人>
<姓名>王五</姓名>
<性别>男</性别>
<住址>上海</住址>
<电话号码>0745-522555</电话号码>
</联系人>
</通讯录>
上面你已经实现了查询联系人的功能,下面如果
我需要把查询结果,比如联系人王五从xml里面删除请问用如何编写删除脚本?
谢谢,多多指教。

[ Last edited by yolk on 2005-4-29 at 16:47 ]

wool王 · 发表于 2005-4-29 22:47

关注8楼问题。js操作xml文件的功能能否作得好像java那般强大。

火眼 · 发表于 2005-4-29 23:03

旺才,厉害哦

wool王 · 发表于 2005-4-30 00:05

楼上是谁？

wool王 · 发表于 2005-4-30 00:05

知道了。啊福

powerwind · 发表于 2005-4-30 14:34

其实上面的讨论都是指客户端实现.并不能进行写的操作.
配制IIS信息服务,用ASP可以实现写的操作.
比如读入XML文件时,是这样的:
set xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load(Server.MapPath("A.xml"))
至于具体如何实现,对于这个例子我没有想过.
只要有兴趣,多多了解DOM的接口,是不难实现的.

另说明:其实用DOM的方式实现一般只对较小的XML文件.
因为它是一下子读入整个文件,
如果文件太大,内存会不够.

wool王 · 发表于 2005-4-30 23:07

楼上这么说就是这么读取xml对客户端也会照成负担咯。如此说来这个方法价值不大咯。楼主你觉得用在哪种地方会比较适合？

还有，asp中一般不会有人操作xml的吧？Microsoft.XMLDOM好像不是asp的内置组件吧？我孤陋寡闻，asp中用得较多是fso，尽管知道xml在信息缓存方面比纯文本文件强得多。。。

powerwind · 发表于 2005-5-1 01:41

http://training.gbdirect.co.uk/c ... erview_seminar.html

http://xml.apache.org/

http://www.w3schools.com/xml/default.asp

http://www.ftponline.com/china/XmlFile.aspx?ID=208

其实我什么都不懂, 我是一边学习一边在此乱说话

wool王 · 发表于 2005-5-1 11:09

我一看e文就头疼。。。上次为了查一个API的用法在apache耗了半个锺的说。。。

wool王 · 发表于 2005-5-12 11:11

好耐无人来了哦。顶下先。

用程序诠释生命 · 发表于 2005-8-18 15:21

离AJAX就差一点了，楼主努力！

wool王 · 发表于 2005-8-18 21:47

楼上怎么最近对阿贾克斯这么有兴趣？在做什么大搞做？偷偷告诉我。

用程序诠释生命 · 发表于 2005-8-19 01:01

大啊，超大。。做完这个我就可以收山了。

wool王 · 发表于 2005-8-19 10:39

哇。。。这么花精力啊？？？做完就瓜了啊？

		自动登录	找回密码
密码			加入后院

[原创]HTML+Javascript+XML=???

相关帖子

浏览过的版块