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

powerwind · 发表于 2005-4-22 11:20

最近有点空,不知大家喜欢不,在此我想就HTML,JAVASCRIPT,XML一同讲讲,以完成一个小小的有查询功能的一个网页为例.
这里我以一个同学录为例.

<html>
<head>
<title>My title</title>
</head>
<body>
My body
</body>
</html>

上面是基本的一个网页,一般分为两部分,<head></head>部分通常加入一些脚本,<body></body>就是我们网页的内容了(当然也可以在此加入脚本)
上面的文件保存为后缀.HTM或HTML就可以了.这是一个只有Mybody内容的网页.

下面介绍几个常用的HTML标记.
<P> 是段落
如上面例子中,在MY body 中加入<P> 成为MY<BR> body 显示就成为
MY
body
<BR> 是换行,效果同上,可是它们不同,可以自己体会
<HR> 是横线,就是产出一条线,可以控制用(<HR SIZE="2">)大小用(<HR SIZE="2" COLOR="RED">)颜色
<IMG SRC="图片的位置">插入图片如<IMG SRC="E:/SUN.JPG">也可用相对路径
<TABLE><TR><TD>这三个是表格的,可以这样理解,<tr>是表格的行<td>是表格的列
:<TABEL><TR><TD>NAME</TD><TD>SEX</TD></TR><TR><TD>TOM</TD><TD>M</TD></TR></TABLE>
可自己看结果
<FORM>是表单,关于数据的,或者说反馈用
<INPUT TYPE="(有几种可选,后面会说)"> 一般放在<FORM>内的,
<SELECT><OPTION> 后面用到再说

上面基本知识可以做一个网页,虽然没多少技术,可以有图片有文字

待续

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

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

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

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

浏览过的版块