HTML 数据绑定(Data Bind)技术的基本原理是页面中提供一个显示数据的数据源对象DSO（data source object),页面的元素通过绑定这个数据源得到数据。绝大多少HTML元素，甚至IE内置的一些ActiveX控件都提供了绑定的功能,包括 a, button, div, img, frame, iframe, label, marquee, span等标签 。关于数据源对象DSO,通常用到的有XML标签<XML></XML>。
XML 标签仅在IE5以上版本支持.其功能是在HTML页面上定义一个XML的数据岛（data island）
例如：
<XML ID="oMetaData">
<METADATA>
<AUTHOR>John Smith</AUTHOR>
<GENERATOR>Visual Notepad</GENERATOR>
<PAGETYPE>Reference</PAGETYPE>
<ABSTRACT>Specifies a data island</ABSTRACT>
</METADATA>
</XML>
XML 数据岛中的数据可以很方便的绑定。也可以很方便的用IE内置的一些ActiveXObject进行操作。下面主要介绍一下HTML的绑定。
绑定用到的两个属性是DATASRC和DATAFLD ,DATASRC 用于制定一个数据源。如：DATASRC="#oMetaData" oMetaData为DSO的ID.微软说ID前面必须加一个#,所以必须要加，要不让设置无效。
DATAFLD 这个地方要设置一个绑定的字段.如：DATAFLD = "AUTHOR"
<SPAN DATASRC="#oMetaData" DATAFLD = "AUTHOR"></SPAN> 这个在页面中显示的是John Smith
HTML表单元素支持的绑定略有不同。以下是一个演示的例子：
testbind.html
---------------------
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<xml src=xx.xml id="kk"></xml>
<INPUT TYPE="text" NAME="fd" datasrc="#kk" datafld="crop">
<BR>
<INPUT TYPE="checkbox" NAME="aa" datasrc="#kk" datafld="check1" value=1>
<INPUT TYPE="checkbox" NAME="aa" datasrc="#kk" datafld="check2" value=2>
<INPUT TYPE="checkbox" NAME="aa" datasrc="#kk" datafld="check3" value=3>
<INPUT TYPE="checkbox" NAME="a" datasrc="#kk" datafld="check4" value=4>
<INPUT TYPE="checkbox" NAME="a" datasrc="#kk" datafld="check5" value=5>
<BR>
<INPUT TYPE="radio" NAME="b" datasrc="#kk" datafld="radio" value=1>
<INPUT TYPE="radio" NAME="b" datasrc="#kk" datafld="radio" value=2>
<INPUT TYPE="radio" NAME="b" datasrc="#kk" datafld="radio" value=3>
<INPUT TYPE="radio" NAME="b" datasrc="#kk" datafld="radio" value=4>
<INPUT TYPE="radio" NAME="b" datasrc="#kk" datafld="radio" value=5>
<INPUT TYPE="radio" NAME="b" datasrc="#kk" datafld="radio" value=6>
<INPUT TYPE="radio" NAME="b" datasrc="#kk" datafld="radio" value=7>
<BR>
<SELECT datasrc="#kk" datafld="select" >
<option value=1>S公司</option>
<option value=2>K公司</option>
<option value=3>L公司</option>
<option value=4>J公司</option>
<option value=5>B公司</option>
<option value=6>M公司</option>
</SELECT>
<BR>
<TEXTAREA NAME="" ROWS="5" COLS="20" datasrc="#kk" datafld="textarea"></TEXTAREA>
<BR><INPUT TYPE="reset" datasrc="#kk" datafld="reset" onclick="kk.src='xx2.xml'">
<INPUT TYPE="reset" datasrc="#kk" datafld="reset" onclick="kk.src='xx.xml'">
<div datasrc="#kk" datafld="div"></div>
</BODY>
</HTML>
---------------------
XML数据。
xx.xml
-----------------------
<?xml version="1.0" encoding="gb2312"?>
<root>
<row><crop>4</crop>
<name>xxxx</name>
<pass>yyyyy</pass>
<check1>true</check1>
<check2>false</check2>
<check3>true</check3>
<check4>false</check4>
<check5>true</check5>
<radio>3</radio>
<select>3</select>
<textarea>文本的内容</textarea>
<reset>绑定的按钮的值</reset>
<div>DIV内的值</div></row>
</root>
---------------------
XML数据。
xx2.xml
-----------------------
<?xml version="1.0" encoding="gb2312"?>
<root>
<crop>5</crop>
<name>yyyyyyyy</name>
<pass>bbbbb</pass>
<check1>false</check1>
<check2>false</check2>
<check3>true</check3>
<check4>false</check4>
<check5>true</check5>
<radio>5</radio>
<select>2</select>
<textarea>文本的内容222222</textarea>
<reset>绑定的按钮的值222222</reset>
<div>DIV内的值222222222</div>
</root>
大家实际操作一下就知道效果了。不再多说。
在本系统中，XML数据是通过每个页面的PAGEID，查询数据库取得一个XML数据流进行绑定的(/common/getPageLanguage.aspx)。原理上和以上例子是一样的。
演示例子下载：bind.rar
以上是HTML的数据绑定技术的初级应用，更多的查询微软的MSDN的资料。
参考文档：
http://msdn.microsoft.com/workshop/author/databind/dataconsumer.asp
本文地址：http://com.8s8s.com/it/it30942.htm