首页 > 代码库 > 数据岛运用示例，列车查询系统

数据岛运用示例，列车查询系统

2024-08-09 19:59:49   221人阅读

本例是一个列车查询系统

有关列车信息存储在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=http://www.mamicode.com/"./styles.css">-->>

参考资料：
下面我们来看看在 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 进行自动赋值。这种方式也蛮简单方便的。


数据岛运用示例，列车查询系统


联系
我们