标签：javascript 技术 脚本语言 浏览器 xml
本例是一个列车查询系统
有关列车信息存储在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" onclick="show_onclick()"/>
<input type="button" value="清空" name="reset" onclick="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 onclick="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 进行自动赋值。这种方式也蛮简单方便的。标签：javascript 技术 脚本语言 浏览器 xml
原文地址：http://blog.csdn.net/jj88888/article/details/42143565
