邪恶八进制信息安全团队技术讨论组 » 脚本程序设计{ All Kinds of Scripts } » [转载]HTML中的数据绑定 [查看完整版本]

金州 2006-1-31 08:37

[转载]HTML中的数据绑定

<P>信息来源：Wayne_Deng的专栏</P>
<P>有没想过在java script中使用recordset？原来在客户端操作数据也可以这样简单，定义一个数据源，将数据绑定在各种tag上，实现应用程序般的效果，酷毙了！（首先申明一点，文章的内容全部来自msdn，不过用我自己的话总结而已。）<BR><BR>先看看这样两个例子：<BR><A href="http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm">[url]http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm[/url]</A><BR><A href="http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm">[url]http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm[/url]</A><BR>不得不又一次佩服微软。<BR><BR>这个是DataBinding的架构：<BR><BR><IMG alt=架构 hspace=0 src="http://msdn.microsoft.com/workshop/graphics/dbarch.gif" align=baseline border=0><BR><BR><BR>当然实现数据绑定有下面几步：<BR><BR><FONT size=6><STRONG>第一步，定义数据源<BR></STRONG></FONT>从IE4.0起，就支持下面四种数据源：<BR><BR></P>
<H2><A name=ch_databind_tdc_intro></A>Tabular Data Control (TDC)</H2>
<P>TDC提供了一个简单的访问带有格式的文本数据的方法，一般是csv文件。<BR>下面是一个简单的示例：</P><PRE class=clsCode AUTOHILITE="1"><OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
    ID=dsoComposer WIDTH=0 HEIGHT=0>
    <PARAM NAME="DataURL" VALUE="composer.csv">
</OBJECT></PRE>
<P></P>
<H2><A name=ch_databind_rds_intro></A>Remote Data Service (RDS)</H2>
<P>远程数据服务，直接访问远程服务器端的数据，Internet Explorer 4.0. RDS 通过OLE-DB或 Open Database Connectivity (ODBC)来实现。</P>
<P>示例：</P><PRE class=clsCode AUTOHILITE="1"><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></PRE>
<P>不过感觉有点安全性的问题，因为客户端能看到这段代码。</P>
<H2><A name=ch_databind_xml_intro></A>XML Data Source</H2>
<P>XML就不多说了，在IE4.0中这样使用：<BR><APPLET<BR> CODE="com.ms.xml.dso.XMLDSO.class"<BR> ID="xmldso"<BR> WIDTH="0"<BR> HEIGHT="0"<BR> MAYSCRIPT="true"><BR> <PARAM NAME="URL" VALUE="composer.xml"><BR></APPLET></P>
<P>Internet Explorer 5以上可以这样：</P>
<P><!--[if gte IE 5]><BR><XML ID="xml1"><BR><topic-info><BR> <page-type>reference</page-type><BR> <member-type>property</member-type><BR> <persistent-name>ACCESSKEY</persistent-name><BR> <runtime-name readable="1" writeable="1">accessKey</runtime-name><BR> <abstract>Sets or retrieves the accelerator key for the object.</abstract><BR></topic-info><BR></XML><BR><![endif]--></P>
<P>另外IE还提供了一个XML数据岛的概念：<A href="http://msdn.microsoft.com/library/en-us/xmlsdk30/htm/xmconxmldataislands.asp" target=_top>XML Data Islands</A>.</P>
<H3><A name=Additional_XML_resou></A></H3>
<H2><A name=ch_databind_mshtml_intro></A>MSHTML Data Source</H2>
<P>html数据页示例：<BR><H1 ID=COMPSR_FIRST>Hector</H1><BR><MARQUEE ID=COMPSR_LAST>Berlioz</MARQUEE><BR><DIV ID=COMPSR_BIRTH>1803</DIV><BR><H2 ID=COMPSR_FIRST>Modest</H2><BR><H3 ID=COMPSR_LAST>Moussorgsky</H3><BR><BUTTON ID=COMPSR_BIRTH>1839</BUTTON><BR><TEXTAREA ID=COMPSR_FIRST>Franz</TEXTAREA><BR><XMP ID=COMPSR_LAST>Liszt</XMP><BR><SPAN ID=COMPSR_BIRTH>1811</SPAN></P>
<P>一旦定义可以这样访问：</P><PRE class=clsCode AUTOHILITE="1"><OBJECT ID=htmlComposer DATA="compdata.htm" HEIGHT=0 WIDTH=0>
</OBJECT></PRE>
<P><FONT size=6><STRONG>.第二步：绑定数据到HTML元素上<BR></STRONG><FONT size=3>一般都是通过tag中的datasrc和datafld实现绑定的。例如：<BR><INPUT TYPE=TEXTBOX DATASRC="#dsoComposers" DATAFLD="compsr_last"><BR>和<BR><TABLE DATASRC=#dsoComposer><BR><TR><BR><TD><DIV DATAFLD=compsr_first></DIV></TD><BR></TR><BR></TABLE><BR>这个是绑定表格的示例：<BR><A href="http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm">[url]http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm[/url]</A><BR><BR>其中数据来源：<BR><OBJECT id="tdcComposers" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"><BR><PARAM NAME="DataURL" VALUE="<A href="http://msdn.microsoft.com/workshop/samples/author/databind/composer.csv">[url]http://msdn.microsoft.com/workshop/samples/author/databind/composer.csv[/url]</A>"> <BR><PARAM NAME="UseHeader" VALUE="True"><BR><PARAM NAME="TextQualifier" VALUE="'"><BR></OBJECT><BR>绑定的table<BR><TABLE datasrc=#tdcComposers><BR><THEAD><TR STYLE="font-weight:bold"><BR> <TD>First</TD><TD>Last</TD><TD>Birth</TD><TD>Death</TD><TD>Origin</TD><BR> </TR></THEAD><BR><TBODY><BR><TR><BR> <TD><DIV datafld="compsr_first"></DIV></TD><BR> <TD><DIV datafld="compsr_last"></DIV></TD><BR> <TD><DIV datafld="compsr_birth"></DIV></TD><BR> <TD><DIV datafld="compsr_death"></DIV></TD><BR> <TD><DIV datafld="origin"></DIV></TD><BR></TR><BR></TBODY><BR></TABLE><BR>这就是效果了：<BR>
<TABLE dataSrc=#tdcComposers>
<THEAD>
<TR style="FONT-WEIGHT: bold">
<TD>First</TD>
<TD>Last</TD>
<TD>Birth</TD>
<TD>Death</TD>
<TD>Origin</TD></TR></THEAD>
<TBODY>
<TR>
<TD>
<DIV dataFld=compsr_first>Hector</DIV></TD>
<TD>
<DIV dataFld=compsr_last>Berlioz</DIV></TD>
<TD>
<DIV dataFld=compsr_birth>1803</DIV></TD>
<TD>
<DIV dataFld=compsr_death>1869</DIV></TD>
<TD>
<DIV dataFld=origin>France</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=compsr_first>Modest</DIV></TD>
<TD>
<DIV dataFld=compsr_last>Moussorgsky</DIV></TD>
<TD>
<DIV dataFld=compsr_birth>1839</DIV></TD>
<TD>
<DIV dataFld=compsr_death>1881</DIV></TD>
<TD>
<DIV dataFld=origin>Russia</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=compsr_first>Franz</DIV></TD>
<TD>
<DIV dataFld=compsr_last>Liszt</DIV></TD>
<TD>
<DIV dataFld=compsr_birth>1811</DIV></TD>
<TD>
<DIV dataFld=compsr_death>1886</DIV></TD>
<TD>
<DIV dataFld=origin>France</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=compsr_first>Antonio</DIV></TD>
<TD>
<DIV dataFld=compsr_last>Vivaldi</DIV></TD>
<TD>
<DIV dataFld=compsr_birth>1678</DIV></TD>
<TD>
<DIV dataFld=compsr_death>1741</DIV></TD>
<TD>
<DIV dataFld=origin>Italy</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=compsr_first>Johann Sebastian</DIV></TD>
<TD>
<DIV dataFld=compsr_last>Bach</DIV></TD>
<TD>
<DIV dataFld=compsr_birth>1685</DIV></TD>
<TD>
<DIV dataFld=compsr_death>1750</DIV></TD>
<TD>
<DIV dataFld=origin>Germany</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=compsr_first>Ludwig van</DIV></TD>
<TD>
<DIV dataFld=compsr_last>Beethoven</DIV></TD>
<TD>
<DIV dataFld=compsr_birth>1770</DIV></TD>
<TD>
<DIV dataFld=compsr_death>1827</DIV></TD>
<TD>
<DIV dataFld=origin>Germany</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=compsr_first>Wolfgang Amadeus</DIV></TD>
<TD>
<DIV dataFld=compsr_last>Mozart</DIV></TD>
<TD>
<DIV dataFld=compsr_birth>1756</DIV></TD>
<TD>
<DIV dataFld=compsr_death>1791</DIV></TD>
<TD>
<DIV dataFld=origin>Austria</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=compsr_first>Joseph</DIV></TD>
<TD>
<DIV dataFld=compsr_last>Haydn</DIV></TD>
<TD>
<DIV dataFld=compsr_birth>1732</DIV></TD>
<TD>
<DIV dataFld=compsr_death>1809</DIV></TD>
<TD>
<DIV dataFld=origin>Germany</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=compsr_first>Claude</DIV></TD>
<TD>
<DIV dataFld=compsr_last>Debussy</DIV></TD>
<TD>
<DIV dataFld=compsr_birth>1862</DIV></TD>
<TD>
<DIV dataFld=compsr_death>1918</DIV></TD>
<TD>
<DIV dataFld=origin>France</DIV></TD></TR></TBODY></TABLE><BR><BR><STRONG><FONT size=6>第三步：数据的动态添加，删除等等（对象模型）</FONT></STRONG><BR>当然绑定可以是动态的：<BR><FONT style="BACKGROUND-COLOR: #d3d3d3"><FONT style="BACKGROUND-COLOR: #ffffff">在script中：</FONT><BR>span1.dataSrc = "#dsoComposer";<BR>span1.dataFld = "compsr_first";</FONT></P>
<P><FONT style="BACKGROUND-COLOR: #d3d3d3"><FONT style="BACKGROUND-COLOR: #ffffff">html是这样的：<BR></FONT><SPAN DATASRC="#dsoComposer" DATAFLD="compsr_first"></SPAN></FONT><BR>而且可以访问数据源的ado：<BR><FONT style="BACKGROUND-COLOR: #d3d3d3">var oRecordSet = dsoComposer.recordset;<BR></FONT>自然就有<FONT style="BACKGROUND-COLOR: #d3d3d3">oRecordSet .MoveNext</FONT><FONT style="BACKGROUND-COLOR: #ffffff">等等。<BR><BR>如：<BR></FONT><FONT style="BACKGROUND-COLOR: #d3d3d3"><INPUT ID=cmdNavFirst TYPE=BUTTON VALUE="<<"<BR> onclick="tdcComposers.recordset.MoveFirst()"><BR><INPUT ID=cmdNavPrev TYPE=BUTTON VALUE=" < "<BR> onclick="tdcComposers.recordset.MovePrevious();<BR> if (tdcComposers.recordset.BOF)<BR> tdcComposers.recordset.MoveFirst();"><BR><INPUT ID=cmdNavNext TYPE=BUTTON VALUE=" > "<BR> onclick="tdcComposers.recordset.MoveNext();<BR> if (tdcComposers.recordset.EOF)<BR> tdcComposers.recordset.MoveLast();"><BR><INPUT ID=cmdNavLast TYPE=BUTTON VALUE=">>"<BR> onclick="tdcComposers.recordset.MoveLast()"><BR><BR><FONT style="BACKGROUND-COLOR: #ffffff">还可以这样用：</FONT><BR><FONT style="BACKGROUND-COLOR: #d3d3d3"><SCRIPT Language="VBScript"><BR>For Each objFld in rsAttendees.Fields<BR> document.write("The field name is " & objFld.Name & "<BR>")<BR> document.write("The field value is " & objFld.Value & "<BR>")<BR>Next<BR></SCRIPT><BR><BR></FONT><FONT style="BACKGROUND-COLOR: #ffffff">添加删除记录就是：oRecordSet.AddNew()以及oRecordSet.Delete()。<BR></FONT><BR><FONT style="BACKGROUND-COLOR: #ffffff" size=6><STRONG>第三步：响应各种数据事件（事件模型）<BR></STRONG><FONT size=3>如何在数据更改后做出相应的处理？<BR>msdn中提供的方法是这样的：<BR><FONT style="BACKGROUND-COLOR: #d3d3d3"><SCRIPT FOR=cboSort（数据源名） EVENT=onchange（事件名）><BR> ……<BR></SCRIPT><BR></FONT><FONT style="BACKGROUND-COLOR: #ffffff">这些是事件名列表：<BR><BR>
<TABLE class=clsStd dataSrc=#tdcEvents border=1>
<THEAD>
<TR>
<TH>Event</TH>
<TH>Bubbles</TH>
<TH>Cancelable</TH>
<TH>Applies to</TH>
<TH>Introduced In Internet Explorer Version</TH></TR></THEAD>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>onbeforeupdate</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>True</DIV></TD>
<TD>
<DIV dataFld=applies>bound elements</DIV></TD>
<TD>
<DIV dataFld=vers>4.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>onafterupdate</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>False</DIV></TD>
<TD>
<DIV dataFld=applies>bound elements</DIV></TD>
<TD>
<DIV dataFld=vers>4.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>onrowenter</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>False</DIV></TD>
<TD>
<DIV dataFld=applies>DSO</DIV></TD>
<TD>
<DIV dataFld=vers>4.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>onrowexit</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>True</DIV></TD>
<TD>
<DIV dataFld=applies>DSO</DIV></TD>
<TD>
<DIV dataFld=vers>4.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>onbeforeunload</DIV></TD>
<TD>
<DIV dataFld=bubbles>False</DIV></TD>
<TD>
<DIV dataFld=cancancel>False</DIV></TD>
<TD>
<DIV dataFld=applies>window</DIV></TD>
<TD>
<DIV dataFld=vers>4.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>ondataavailable</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>False</DIV></TD>
<TD>
<DIV dataFld=applies>DSO</DIV></TD>
<TD>
<DIV dataFld=vers>4.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>ondatasetcomplete</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>False</DIV></TD>
<TD>
<DIV dataFld=applies>DSO</DIV></TD>
<TD>
<DIV dataFld=vers>4.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>ondatasetchanged</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>False</DIV></TD>
<TD>
<DIV dataFld=applies>DSO</DIV></TD>
<TD>
<DIV dataFld=vers>4.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>onerrorupdate</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>True</DIV></TD>
<TD>
<DIV dataFld=applies>bound elements</DIV></TD>
<TD>
<DIV dataFld=vers>4.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>onreadystatechange</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>False</DIV></TD>
<TD>
<DIV dataFld=applies>DSO</DIV></TD>
<TD>
<DIV dataFld=vers>4.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>oncellchange</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>False</DIV></TD>
<TD>
<DIV dataFld=applies>DSO</DIV></TD>
<TD>
<DIV dataFld=vers>5.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>onrowsinserted</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>False</DIV></TD>
<TD>
<DIV dataFld=applies>DSO</DIV></TD>
<TD>
<DIV dataFld=vers>5.0</DIV></TD></TR></TBODY>
<TBODY>
<TR>
<TD>
<DIV dataFld=event>onrowsdelete</DIV></TD>
<TD>
<DIV dataFld=bubbles>True</DIV></TD>
<TD>
<DIV dataFld=cancancel>False</DIV></TD>
<TD>
<DIV dataFld=applies>DSO</DIV></TD>
<TD>
<DIV dataFld=vers>5.0</DIV></TD></TR></TBODY></TABLE></FONT></FONT></FONT></FONT></FONT></FONT></P>
<P><BR>怎么样？<BR>我觉得<A href="http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm">[url]http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm[/url]</A>算是一个应用比较综合的例子了，好好研究一下，必有收获。<BR><BR>网上有不少利用数据绑定实现分页的示例，其实数据绑定还可以做更多的事情吧？应该在rich client里面有非常大的应用，例如制作非常复杂的datagrid。<BR><BR>现在想进一步搞清楚的是如何简便实现与服务器端的同步，因为客户端的数据绑定是对服务器端没有影响的（你可以从服务器端生成数据源，但是在客户端的操作不会自动返回服务器），msdn上说RDS可以，但是这种方法太笨拙了吧，又不安全。<BR></P>

查看完整版本: [转载]HTML中的数据绑定

© 1999-2008 EvilOctal Security Team