html中的数据岛：利用DSO和javascript在html中动态加载和浏览xml数据
?
附两个以下用到的xml文档：
a.DsoData.xml
<?xml?version="1.0"?encoding="gb2312"?><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><?xml?version="1.0"?encoding="gb2312"?><classes><class><id>1</id><name>一班</name></class><class><id>2</id><name>二班</name></class><class><id>3</id><name>三班</name></class></classes><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中怎么加载呢？??var?xmlDoc;??function?loadXml2Dso()
??{
?????xmlDoc?=?ClassData.XMLDocument;?????xmlDoc.load("ClassData.xml");
???}5.怎么把这些数据源中的数据展示到html中呢？
a.绑定到table中，请看下面的代码：
<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>这里大家重点关注以下两个标签：
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了。不过这个暂时只是我的一个想法，存在的问题肯定也是有的。
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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>