Avez-vous déjà pensé à utiliser Recordset dans JavaScript? Il s'avère que les données de fonctionnement sur le client peuvent être si simples. Définissez une source de données, liez les données à diverses balises et obtenez des effets de type application. C'est tellement cool! (Tout d'abord, le contenu de l'article vient de MSDN, mais ce n'est qu'un résumé dans mes propres mots.)
Jetons un coup d'œil à deux exemples:
http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm
http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm
Je dois admirer à nouveau Microsoft.
Ceci est l'architecture de données:
Bien sûr, il existe les étapes suivantes pour implémenter la liaison des données:
La première étape consiste à définir la source de données
Depuis IE4.0, les quatre sources de données suivantes ont été prises en charge:
Contrôle des données tabulaires (TDC)
TDC fournit un moyen simple d'accéder aux données de texte avec le format, généralement un fichier CSV.
Voici un exemple simple:
<Object Classid = CLSID: 333C7BC4-460F-11D0-BC04-0080C7055A83
id = dsocomposer width = 0 height = 0>
<param name = dataUrl Value = Composer.csv>
</ objet>
Service de données distantes (RDS)
Service de données distant, accédant directement aux données du côté serveur distant, Internet Explorer 4.0. RDS est implémenté via OLE-DB ou Open Database Connectivity (ODBC).
Exemple:
<Object Classid = CLSID: BD96C556-65A3-11D0-983A-00C04FC29E33
id = dsocomposer height = 0 width = 0>
<param name = server valeur = http: // musicserver>
<param name = connect value = dsn = music; uid = invité; pwd =>
<param name = sql value = select compsr_name dans composer>
</ objet>
Mais cela semble un peu un problème de sécurité, car le client peut voir ce code.
Source de données XML
Je ne dirai pas grand-chose sur XML, je l'utilise comme ceci dans IE4.0:
<applet
Code = com.ms.xml.dso.xmldso.class
id = xmldso
largeur = 0
hauteur = 0
mayscript = true>
<param name = url value = composer.xml>
</pplet>
Internet Explorer 5 ou plus peut être comme ceci:
<! - [Si gte IE 5]>
<xml id = xml1>
<Sujet-Info>
<Page-Type> Référence </ Page-Type>
<ype-type> Propriété </ membre-type>
<Sersent-name> AccessKey </s persistant-name>
<runtime-name liseable = 1 writeable = 1> AccessKey </ runtime-name>
<scustrait> Définit ou récupère la touche Accelerator pour l'objet. </craStract>
</ topic-info>
</XML>
<! [endif] ->
De plus, IE fournit également le concept d'une île de données XML: les îles de données XML.
source de données MSHTML
Exemple de page de données HTML:
<h1 id = compsr_first> hector </h1>
<Marquee id = compsr_last> berlioz </ Marquee>
<div id = compsr_birth> 1803 </div>
<h2 id = compsr_first> modeste </h2>
<h3 id = compsr_last> moussorgsky </h3>
<Button id = compsr_birth> 1839 </futton>
<TextArea id = compsr_first> franz </ textarea>
<xmp id = compsr_last> liszt </xmp>
<span id = compsr_birth> 1811 </span>
Une fois défini, vous pouvez y accéder comme ceci:
<objet id = htmlcomposer data = compdata.htm height = 0 width = 0>
</ objet>
.Step 2: lier les données à l'élément HTML
Généralement, il est lié via DataSrc et DataFLD dans les balises. Par exemple:
<input type = textbox dataSrc = # dsocompose datafld = compsr_last>
et
<table dataSrc = # dsocomposer>
<tr>
<td> <div datafld = compsr_first> </div> </td>
</tr>
</ table>
Ceci est un exemple de tables de liaison:
http://msdn.microsoft.com/workshop/samples/author/databind/dbable.htm
Parmi eux, la source de données:
<objet id = TDCCOMPOSERS CLASDID = CLSID: 333C7BC4-460F-11D0-BC04-0080C7055A83>
<param name = dataUrl value = http: //msdn.microsoft.com/workshop/samples/author/databind/composer.csv>
<param name = us useHeader = true>
<param name = textqualifier value = '>
</ objet>
Table à bordeaux
<table dataSrc = # tdccomposers>
<Thead> <tr style = Font-Weight: Bold>
<Td> First </td> <Td> Dernier </td> <TD> Birth </TD> <TD> Death </td> <Td> Origin </td>
</tr> </ head>
<tbody>
<tr>
<td> <div datafld = compsr_first> </div> </td>
<td> <div datafld = compsr_last> </div> </td>
<td> <div datafld = compsr_birth> </div> </td>
<td> <div datafld = compsr_death> </div> </td>
<td> <div datafld = origine> </div> </td>
</tr>
</tbody>
</ table>
C'est l'effet:
Première dernière origine de mort d'anniversaire
Hector Berlioz 1803 1869 France
Modest Moussorgsky 1839 1881 Russie
Franz Liszt 1811 1886 France
Antonio Vivaldi 1678 1741 Italie
Johann Sebastian Bach 1685 1750 Allemagne
Ludwig van Beethoven 1770 1827 Allemagne
Wolfgang Amadeus Mozart 1756 1791 Autriche
Joseph Haydn 1732 1809 Allemagne
Claude Debussy 1862 1918 France
Étape 3: Ajout dynamique, suppression, etc. des données (modèle d'objet)
Bien sûr, la liaison peut être dynamique:
Dans Script:
span1.datasrc = #dsocomposer;
span1.datafld = compsr_first;
Le HTML ressemble à ceci:
<span dataSrc = # dsocomposer datafld = compsr_first> </span>
Et vous pouvez accéder à la source de données ADO:
var orcordSet = dsocomposer.recordSet;
Naturellement, il y a OrcordSet .MoVeNext et ainsi de suite.
comme:
<ID d'entrée = cmdnavfirst type = Button Value = <<
onClick = tdcComposes.recordSet.moveFirst ()>
<ID d'entrée = cmdnavprev Type = Button Value = <
onClick = TDCCOMOSS.RecordSet.MovePrevious ();
if (tdccomposers.recordset.bof)
tdccomposers.recordSet.moveFirst ();>
<ID de saisie = cmdnavnext type = Button Value =>
onClick = TDCCOMOSS.RecordSet.MoVeNExt ();
if (tdccomposers.recordset.eof)
tdccomposers.recordSet.movelast ();>
<ID de saisie = cmdnavlast type = Button Value = >>
onClick = tdcComposes.recordSet.movelast ()>
Il peut également être utilisé comme ceci:
<Script Language = VBScript>
pour chaque objfld dans rsattenes. champs
Document.Write (le nom du champ est & objfld.name & <br>)
document.write (la valeur du champ est & objfld.value & <br>)
suivant
</cript>
L'ajout des enregistrements et de suppression est: OrcordSet.AddNew () et OrcordSet.Delete ().
Étape 3: Répondre à divers événements de données (modèle d'événement)
Comment effectuer le traitement correspondant après les changements de données?
La méthode fournie dans MSDN est la suivante:
<script pour = cbosort (nom de source de données) événement = onChange (nom de l'événement)>
...
</cript>
Ce sont la liste des noms de l'événement:
Événements Bubbles Applications annulables à introduire dans Internet Explorer Version
onBeforeupdate True True Bound Elements 4.0
Onafterupdate True False Bound Elements 4.0
onrowenter true false dso 4.0
onrowexit True True DSO 4.0
onbeforeunload false false fenêtre 4.0
ondataavailable True Faux DSO 4.0
OndatasetComplete True Faux DSO 4.0
ondatasetchged True Faux DSO 4.0
onérrorupdate True True Bound Elements 4.0
onreadystatechange True False DSO 4.0
oncellchange vrai faux dso 5.0
onrowsinserted True False DSO 5.0
onrowsdelete true false dso 5.0
Et ça?
Je pense que http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm est un exemple relativement complet d'application. Si vous l'étudiez attentivement, vous gagnerez quelque chose.
Il existe de nombreux exemples d'utilisation de la liaison des données pour implémenter la pagination sur Internet. En fait, la liaison des données peut faire plus de choses, non? Il devrait y avoir de très grandes applications dans le client riche, comme la fabrication de données de données très complexes.
Ce que je veux mieux comprendre, c'est comment réaliser facilement la synchronisation avec le côté serveur, car la liaison des données du client n'a aucun impact du côté serveur (vous pouvez générer des sources de données du côté du serveur, mais le fonctionnement du client ne reviendra pas automatiquement au serveur). Le MSDN a dit que RDS est OK, mais cette méthode est trop maladroite et dangereuse.