日期:2012-04-13  浏览次数:20506 次

有没想过在javascript中使用recordset?原来在客户端操作数据也可以这样简单,定义一个数据源,将数据绑定在各种tag上,实现应用程序般的效果,酷毙了!(首先申明一点,文章的内容全部来自msdn,不过用我自己的话总结而已。)

先看看这样两个例子:
http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm
http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm
不得不又一次佩服微软。

这个是DataBinding的架构:




当然实现数据绑定有下面几步:

第一步,定义数据源
从IE4.0起,就支持下面四种数据源:


Tabular Data Control (TDC)
TDC提供了一个简单的访问带有格式的文本数据的方法,一般是csv文件。
下面是一个简单的示例:

<OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
ID=dsoComposer WIDTH=0 HEIGHT=0>
<PARAM NAME="DataURL" VALUE="composer.csv">
</OBJECT>


Remote Data Service (RDS)
远程数据服务,直接访问远程服务器端的数据,Internet Explorer 4.0. RDS 通过OLE-DB 或 Open Database Connectivity (ODBC)来实现。

示例:

<OBJECT classid="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33"
ID=dsoComposer HEIGHT=0 WIDTH=0>
<PARAM NAME="Server" VALUE="http://musicserver">
<PARAM NAME="Connect" VALUE="dsn=music;uid=guest;pwd=">
<PARAM NAME="SQL" VALUE="select compsr_name from composer">
</OBJECT>
不过感觉有点安全性的问题,因为客户端能看到这段代码。

XML Data Source
XML就不多说了,在IE4.0中这样使用:
<APPLET
CODE="com.ms.xml.dso.XMLDSO.class"
ID="xmldso"
WIDTH="0"
HEIGHT="0"
MAYSCRIPT="true">
<PARAM NAME="URL" VALUE="composer.xml">
</APPLET>

Internet Explorer 5以上可以这样:

<!--[if gte IE 5]>
<XML ID="xml1">
<topic-info>
<page-type>reference</page-type>
<member-type>property</member-type>
<persistent-name>ACCESSKEY</persistent-name>
<runtime-name readable="1" writeable="1">accessKey</runtime-name>
<abstract>Sets or retrieves the accelerator key for the object.</abstract>
</topic-info>
</XML>
<![endif]-->

另外IE还提供了一个XML数据岛的概念:XML Data Islands.


MSHTML Data Source
html数据页示例:
<H1 ID=COMPSR_FIRST>Hector</H1>
<MARQUEE ID=COMPSR_LAST>Berlioz</MARQUEE>
<DIV ID=COMPSR_BIRTH>1803</DIV>
<H2 ID=COMPSR_FIRST>Modest</H2>
<H3 ID=COMPSR_LAST>Moussorgsky</H3>
<BUTTON ID=COMPSR_BIRTH>1839</BUTTON>
<TEXTAREA ID=COMPSR_FIRST>Franz</TEXTAREA>
<XMP ID=COMPSR_LAST>Liszt</XMP>
<SPAN ID=COMPSR_BIRTH>1811</SPAN>

一旦定义可以这样访问:

<OBJECT ID=htmlComposer DATA="compdata.htm" HEIGHT=0 WIDTH=0>
</OBJECT>
.第二步:绑定数据到HTML元素上
一般都是通过tag中的datasrc和datafld实现绑定的。例如:
<INPUT TYPE=TEXTBOX DATASRC="#dsoComposers" DATAFLD="compsr_last">

<TABLE DATASRC=#dsoComposer>
<TR>
<TD><DIV DATAFLD=compsr_first></DIV></TD>
</TR>
</TABLE>
这个是绑定表格的示例:
http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm

其中数据来源:
<OBJECT id="tdcComposers" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="http://msdn.microsoft.com/workshop/samples/author/databind/composer.csv">
<PARAM NAME="UseHeader" VALUE="True">
<PARAM NAME="TextQualifier" VALUE="'">
</OBJECT>
绑定的table
<TABLE datasrc=#tdcComposers>
<THEAD><TR STYLE="font-weight:bold">
<TD>First</TD><TD>Last</TD><TD>Birth</TD>&