附两个以下用到的xml文档:
a.DsoData.xml< students >
< stu >
< name > 张三 </ name >
< age > 15 </ age >
< class > 1班 </ class >
</ stu >
< stu >
< name > 李四 </ name >
< age > 14 </ age >
< class > 1班 </ class >
</ stu >
< stu >
< name > 王五 </ name >
< age > 14 </ age >
< class > 1班 </ class >
</ stu >
< stu >
< name > 刘六 </ name >
< age > 15 </ age >
< class > 2班 </ class >
</ stu >
< stu >
< name > 小明 </ name >
< age > 15 </ age >
< class > 2班 </ class >
</ stu >
</ students >
b.ClassData.xml
< classes >
< class >
< id > 1 </ id >
< name > 一班 </ name >
</ class >
< class >
< id > 2 </ id >
< name > 二班 </ name >
</ class >
< class >
< id > 3 </ id >
< name > 三班 </ name >
</ class >
</ classes >
2.如果是一打开html页面就把xml当作数据源加载的话,那么就直接在代码中嵌入以下标签就可以了。
<XML id="stuData" src="DsoData.xml"></XML>
可要记住它的id,这个id是可以自定义的,它是在javascript中操作的标示,有点类似与asp.net的服务器控件啊。
3.如果你只想当在html中激发某个事件时才加载xml数据,那么你首先需要在html中放置一个DSO的容器,以便用来存放xml数据。
<object id="ClassData" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
这里这个id的意义和上面的一样。如果要加载多个xml,那么你就要放置多个这样的标签。
4.那么在javascript中怎么加载呢?function loadXml2Dso()
{
xmlDoc = ClassData.XMLDocument;
xmlDoc.load("ClassData.xml");
}
注意这个ClassData.XMLDocument的ClassData实际上是前面放置的标签<object id="ClassData" 中的id。这和asp.net的服务器控件多么像。
5.怎么把这些数据源中的数据展示到html中呢?
a.绑定到table中,请看下面的代码:
< caption >
学生数据
</ caption >
< thead >
< tr >
< th scope ="col" > 姓名 </ th >
< th scope ="col" > 年龄 </ th >
< th scope ="col" > 班级 </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >< span datafld ="name" ></ span ></ td >
< td >< span datafld ="age" ></ span ></ td >
< td >< span datafld ="class" ></ span ></ td >
</ tr >
</ tbody >
</ table >
这里大家重点关注以下两个标签:
datasrc="#stuData"
datafld="name"
一个是datasrc,它表明该table使用哪个数据源,后面是"#stuData",这个#是一个标示,后面呢则是<XML id="stuData" 中的id,表明table用的是这个数据源。而datafld表明它绑定的是xml文档中元素名。如果遇到属性名和子元素名一样的情况,在元素名前加上“!”进行区分。
b.除了绑定到table中,还可以绑定到许多标签中,如A、APPLET、BUTTON、DIV、FRAME、IFRAME、 IMG、INPUT (此处类型是:CHECKBOX、HIDDEN、 LABEL、PASSWORD、RADIO和TEXT)、LABEL、 MARQUEE、SELECT、SPAN、TABLE和 TEXTAREA。
绑定的方法类似,关键是指定以上两个属性。
6.仅仅是只能绑定,肯定是不够灵活的,而javascript确可以让我们灵活的展现它们。因为DSO是一个类似于recordset的对象,那么它就有:
· moveNext(): 指向后一个数据项。
· movePrevious(): 指向前一个数据项。
· moveFirst(): 指向第一个数据项。
· moveLast(): 指向最后一个数据项。
· EOF: 这个属性用来检测我们是否已经到达数据记录的底部。
具体的操作代码如下:
var theSet = ClassData.recordset;
theSet.moveNext();
那么在html中绑定了数据的非table标签,如单独的span标签,那么就会随着moveNext而变化,在这点上,table就像asp.net中的gridView,而只绑定单值的就是detailView。这时候你一不小心,还以为是和服务器在交互呢。
除此之外,还能使用变量对这个recordset中的值取出,如:
var theName = theSet("name");
当然你也可以通过:
document.getElementById("###").innerHTML=theSet("name");
显示到指定的位置。
还有获取记录集中的个数:
var count = theSet.RecordCount ;
7.还可以对记录集进行快速查询、排序、编辑等操作。还有对这个recordset中的记录进行增加删除修改,也是同样有效的。只是你别期望能修改xml文件,原因就不用我讲了。这些具体操作的办法和asp中的recordset对象都是相似的。
8.对于xml+DSO,其实我们可以把它看作是一个分布式的离线数据库,可以首先一次性从服务器端下载客户端操作所需的xml数据,然后通过DSO进行操作,这中间的业务便不需要与服务器端交互了,而是等都操作完毕了,再可以一次性提交到服务器端。这就有点像.net中的dataset了。不过这个暂时只是我的一个想法,存在的问题肯定也是有的。
附:完整html中的代码
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
<!-- Author:hongjuesir@gmail.com Share happily ! -->
< title > DSO示例 </ title >
</ head >
< script language ="javascript" >
var xmlDoc;
function loadXml2Dso()
{
xmlDoc = ClassData.XMLDocument;
xmlDoc.load("ClassData.xml");
}
function moveDso()
{
var theSet = ClassData.recordset;
theSet.moveNext();
/**//*· movePrevious(): 指向前一个数据项。
· moveFirst(): 指向第一个数据项。
· moveLast(): 指向最后一个数据项。
· EOF: 这个属性用来检测我们是否已经到达数据记录的底部。*/
}
</ script >
< XML id ="stuData" src ="DsoData.xml" ></ XML >
< object id ="ClassData" CLASSID ="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width ="0" height ="0" ></ object >
< body >
< table width ="80%" datasrc ="#stuData" border ="1" cellspacing ="0" cellpadding ="0" >
< caption >
学生数据
</ caption >
< thead >
< tr >
< th scope ="col" > 姓名 </ th >
< th scope ="col" > 年龄 </ th >
< th scope ="col" > 班级 </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >< span datafld ="name" ></ span ></ td >
< td >< span datafld ="age" ></ span ></ td >
< td >< span datafld ="class" ></ span ></ td >
</ tr >
</ tbody >
</ table >
< p >
< label > 获取班级xml到Dso并绑定到table
< input type ="submit" name ="Submit" value ="获取" onclick ="loadXml2Dso();" />
</ label >
</ p >
< table datasrc ="#ClassData" border ="1" >
< tr >
< td >< input type ="text" datafld ="id" /></ td >
< td >< span datafld ="name" ></ span ></ td >
</ tr >
</ table >
< p >
< label > 移动DSO的RecordSet
< input type ="submit" name ="Submit" value ="移动" onclick ="moveDso();" />
</ label >
</ p >
< div >
< span datasrc ="#ClassData" datafld ="id" style ="margin-right:20px; background-color:#0099FF" ></ span >
< span datasrc ="#ClassData" datafld ="name" style ="background-color:#99CC00" ></ span >
</ div >
</ body >
</ html >