本例是一个列车查询系统
有关列车信息存储在XML文件trains.xml
有关查询用脚本语言实现,程序嵌在train_find.html网页中
trains.xml
<?xml version="1.0" encoding="gb2312"?>
<trains>
<train>
<id>K222</id>
<from>广州</from>
<to>深圳</to>
<lefttime>12:23</lefttime>
</train>
<train>
<id>E244</id>
<from>杭州</from>
<to>苏州</to>
<lefttime>1:20</lefttime>
</train>
<train>
<id>K001</id>
<from>广州</from>
<to>北京</to>
<lefttime>23:23</lefttime>
</train>
<train>
<id>K123</id>
<from>广州</from>
<to>西安</to>
<lefttime>10:15</lefttime>
</train>
</trains>
trains_find.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>train_fin.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<div style="border: 1px solid black;padding: 3px 3px 3px 3px;width: 400px;">
<xml id="train" src="trains.xml"></xml>
<h3 style="color: blue;text-align: center;">火车车次查询</h3>
<p style="color: blue;font-weight: bold;">
车次:<input type="text" size="18" name="t1"/>
<input type="button" value="提交" name="show" οnclick="show_onclick()"/>
<input type="button" value="清空" name="reset" οnclick="reset_onclick()"/>
</p>
<hr/>
<p style="color: blue;font-weight: bold;">起点站:<input type="text" size="30" name="t2" id="t2"/></p>
<p style="color: blue;font-weight: bold;">终点站:<input type="text" size="30" name="t3" id="t3"/></p>
<p style="color: blue;font-weight: bold;">发车时间:<input type="text" size="28" name="t4" id="t4"/></p>
</div>
</body>
</html>
<script type="text/javascript">
function show_onclick(){
var isHave=false;
var xmlDao=train.XMLDocument;
var aaa= train.documentElement.childNodes;
for(var i=0;i<aaa.length;i++){
var checi=train.documentElement.childNodes.item(i).childNodes.item(0).text;//获取车次
if((t1.value.toLocaleLowerCase())==(checi.toLocaleLowerCase())){//判断车次是否相等
t2.value=train.documentElement.childNodes.item(i).childNodes.item(1).text;
t3.value=train.documentElement.childNodes.item(i).childNodes.item(2).text;
t4.value=train.documentElement.childNodes.item(i).childNodes.item(3).text;
isHave=true;
}
}
if(!isHave){
t2.value="";
t3.value="";
t4.value="";
alert('无此车次的信息,请重新输入条件查询!');
}
}
function reset_onclick(){
t1.value="";
t2.value="";
t3.value="";
t4.value="";
}
</script>
参考资料:
下面我们来看看在 javascript 中怎样通过DOM访问数据岛中的数据
xmldoc = island; // 取数据岛
var rootElement = xmldoc.documentElement.firstChild; // 取根元素
// 实现打印出数据岛中第一个元素的值
if (rootElement.hasChildNodes())
alert (rootElement.firstChild.text) ;
// 创建一个新的元素,添加到数据岛中
var test = xmldoc.createElement_x( 'test' );
var testTxt = xmldoc.createTextNode( "This is a test!" );
test.a(testTxt);
rootElement.a(test);
alert (rootElement.lastChild.text) ;
// 删除数据岛中的一个元素
rootElement.removeChild(rootElement.lastChild) ;
// 修改数据岛中的一个元素的值
rootElement.firstChild.text= "new value" ;
//查找xml元素 使用getElementsByTagName返回一个element的数组
rootElement.getElementsByTagName_r("name")(0).text
//测试数据岛绑定的效果
在页面中定义<button οnclick="testDSO()">testDSO</button>
function testDSO()
{
rootElement.getElementsByTagName_r("name")(0).text="modefied name";
}
//点击按钮后就会发现页面上的Name的值也随之改变
XML 数据岛的应用很容易和其他的技术进行结合。我当前做的一个项目中,就是和 HTC 以及 XmlHttp 技术进行结合。 htc 做了一些功能强大的控件(比如Tree非常好用),底层通过XmlHttp 与后台的服务器进行交互,可以达到无刷新提交页面。前台通过js来操纵页面中的数据岛和发送数据到后台的java类,项目的 框架支持在js调用后台 java 类的方法,有点类似于 DWR 。后台的 java 类返回 XML 数据到前台的 js , js 再将xml数据注入到页面的数据岛中。
项目采用的框架是国内的一家公司的商业产品, 通过几个月的实际使用,虽然还有一些问题,但是这个框架确实是大大提高了开发效率。
最后总结一下 xml 数据岛的最大优点是可以和html元素进行绑定,修改数据岛中的数据,与之绑定的html元素的值也会随之改变。但是也要看到它的缺点:
1.只能在 IE 下运行,firefox等其他的浏览器下无法使用。
2.安全性, xml 数据岛可以通过查看 html 的源代码获取。
另:在 DWR 中,提供有一些便捷的 js 函数,可以将后台 java 方法传回的 json 格式的 js 对象的属性值,赋给 html页面中的 html 元素, dwr 会根据 html 元素的 id 进行自动赋值。这种方式也蛮简单方便的。