Pernah berpikir untuk menggunakan Recordset di JavaScript? Ternyata data operasi pada klien bisa sangat sederhana. Tentukan sumber data, mengikat data ke berbagai tag, dan mencapai efek seperti aplikasi. Ini sangat keren! (Pertama -tama, konten artikel berasal dari MSDN, tetapi itu hanya ringkasan dengan kata -kata saya sendiri.)
Mari kita lihat dua contoh:
http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm
http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm
Saya harus mengagumi Microsoft lagi.
Ini adalah arsitektur basis data:
Tentu saja, ada langkah -langkah berikut untuk mengimplementasikan pengikatan data:
Langkah pertama adalah mendefinisikan sumber data
Sejak IE4.0, empat sumber data berikut telah didukung:
Tabular Data Control (TDC)
TDC menyediakan cara sederhana untuk mengakses data teks dengan format, umumnya file CSV.
Berikut adalah contoh sederhana:
<Object ClassID = CLSID: 333C7BC4-460F-11D0-BC04-0080C7055A83
id = dsocomposer lebar = 0 tinggi = 0>
<param name = dataUrl value = composer.csv>
</boject>
Remote Data Service (RDS)
Layanan Data Jarak Jauh, secara langsung mengakses data di sisi server jarak jauh, Internet Explorer 4.0. RDS diimplementasikan melalui OLE-DB atau Open Database Connectivity (ODBC).
Contoh:
<Object ClassID = CLSID: BD96C556-65A3-11D0-983A-00C04FC29E33
id = dsocomposer tinggi = 0 lebar = 0>
<Param name = nilai server = http: // musicserver>
<param name = connect value = dsn = musik; uid = tamu; pwd =>
<param name = nilai sql = pilih compsr_name dari composer>
</boject>
Tapi rasanya sedikit masalah keamanan, karena klien dapat melihat kode ini.
Sumber Data XML
Saya tidak akan banyak bicara tentang XML, saya menggunakannya seperti ini di IE4.0:
<applet
kode = com.ms.xml.dso.xmldso.class
id = xmldso
lebar = 0
tinggi = 0
mayscript = true>
<name param = nilai url = composer.xml>
</applet>
Internet Explorer 5 atau lebih dari ini bisa seperti ini:
<!-[Jika GTE IE 5]>
<xml id = xml1>
<Popic-Info>
<page-Type> Referensi </page-Type>
<poure-Type> Properti </sgan-type>
<spistent-name> AccessKey </persistent-name>
<runtime-name dapat dibaca = 1 writeable = 1> accessKey </runtime-name>
<strak abstrak> mengatur atau mengambil kunci akselerator untuk objek.
</opic-info>
</xml>
<! [Endif]->
Selain itu, IE juga menyediakan konsep pulau data XML: pulau data XML.
Sumber data MSHTML
Contoh Halaman Data HTML:
<h1 id = compsr_first> hector </h1>
<marquee id = compsr_last> berlioz </sarquee>
<Div ID = compsr_birth> 1803 </div>
<h2 id = compsr_first> sederhana </h2>
<h3 id = compsr_last> moussorgsky </h3>
<tombol id = compsr_birth> 1839 </button>
<TextArea ID = compsr_first> franz </textarea>
<xmp id = compsr_last> liszt </xmp>
<span id = compsr_birth> 1811 </span>
Setelah ditentukan, Anda dapat mengaksesnya seperti ini:
<objek id = htmlcomposer data = compdata.htm tinggi = 0 lebar = 0>
</boject>
Langkah 2: Bind data ke elemen HTML
Secara umum, itu terikat melalui DATASRC dan Datafld dalam tag. Misalnya:
<input type = textbox dataasrc =#dsocomposes datafld = compsr_last>
Dan
<Table Dataasrc =#dsocomposer>
<tr>
<td> <Div Datafld = compsr_first> </div> </td>
</tr>
</boable>
Ini adalah contoh tabel pengikat:
http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm
Di antara mereka, sumber data:
<Object ID = TDCComposers classID = CLSID: 333C7BC4-460F-11D0-BC04-0080C7055A83>
<param name = dataUrl value = http: //msdn.microsoft.com/workshop/samples/author/databind/composer.csv>
<name param = nilai UseHeader = true>
<Param name = nilai TextQualifier = '>
</boject>
Binded Table
<Table Dataasrc =#tdccomposers>
<Thead> <tryte = font-weight: Bold>
<td> pertama </td> <td> terakhir </td> <td> lahir </td> <td> kematian </td> <td> asal </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 = Origin> </Div> </td>
</tr>
</tbody>
</boable>
Inilah efeknya:
Asal kematian ulang tahun terakhir terakhir
Hector Berlioz 1803 1869 Prancis
Moussorgsky sederhana 1839 1881 Rusia
Franz Liszt 1811 1886 Prancis
Antonio Vivaldi 1678 1741 Italia
Johann Sebastian Bach 1685 1750 Jerman
Ludwig Van Beethoven 1770 1827 Jerman
Wolfgang Amadeus Mozart 1756 1791 Austria
Joseph Haydn 1732 1809 Jerman
Claude Debussy 1862 1918 Prancis
Langkah 3: Penambahan Dinamis, Penghapusan, dll. Data (Model Objek)
Tentu saja ikatannya bisa dinamis:
Dalam skrip:
span1.datasrc = #dsocomposer;
span1.datafld = compsr_first;
HTML terlihat seperti ini:
<span dataasrc =#dsocomposer datafld = compsr_first> </span>
Dan Anda dapat mengakses ADO sumber data:
var orcordset = dsocomposer.recordset;
Secara alami, ada orcordset .movenext dan sebagainya.
menyukai:
<Input ID = CMDNAVFIRST TYPE = Tombol Nilai = <<
OnClick = tdccomposes.recordset.movefirst ()>
<input id = cmdnavprev type = nilai tombol = <
onClick = tdccomposes.recordset.moveprevious ();
if (tdccomposers.recordset.bof)
tdccomposers.recordset.movefirst ();>
<input id = cmdnavNext type = tombol nilai =>
onClick = tdccomposes.recordset.movenext ();
if (tdccomposers.recordset.eof)
tdccomposers.recordset.movelast ();>
<input id = cmdnavlast type = tombol nilai = >>
OnClick = tdccomposes.recordset.movelast ()>
Ini juga dapat digunakan seperti ini:
<bahasa skrip = vbscript>
untuk setiap objfld di rsattendees.fields
Document.write (Nama lapangan adalah & objfld.name & <br>)
Document.write (Nilai bidang adalah & objfld.Value & <br>)
Berikutnya
</script>
Menambahkan dan catatan penghapusan adalah: orcordset.addnew () dan orcordset.delete ().
Langkah 3: Menanggapi berbagai acara data (model acara)
Bagaimana cara membuat pemrosesan yang sesuai setelah perubahan data?
Metode yang disediakan dalam MSDN adalah sebagai berikut:
<Script for = cboSort (nama sumber data) Event = Onchange (nama acara)>
...
</script>
Ini adalah daftar nama acara:
Acara Bubbles Aplikasi yang dapat dibatalkan untuk diperkenalkan dalam versi Internet Explorer
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 Window 4.0
ondatavailable true false dso 4.0
ondatasetComplete true false dso 4.0
OnDataSetchanged True False DSO 4.0
OnErrorupdate True True Bound Elements 4.0
OnReadyStateChange True False DSO 4.0
OncellChange True False DSO 5.0
Onrowserted True False DSO 5.0
OnrowsDelete True False DSO 5.0
Bagaimana dengan itu?
Saya pikir http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm adalah contoh aplikasi yang relatif komprehensif. Jika Anda mempelajarinya dengan cermat, Anda akan mendapatkan sesuatu.
Ada banyak contoh menggunakan pengikatan data untuk mengimplementasikan paging di internet. Faktanya, pengikatan data dapat melakukan lebih banyak hal, bukan? Harus ada aplikasi yang sangat besar di klien kaya, seperti membuat datagrid yang sangat kompleks.
Yang ingin saya pahami lebih lanjut sekarang adalah bagaimana dengan mudah mencapai sinkronisasi dengan sisi server, karena pengikatan data klien tidak berdampak pada sisi server (Anda dapat menghasilkan sumber data dari sisi server, tetapi pengoperasian klien tidak akan secara otomatis kembali ke server). MSDN mengatakan bahwa RDS baik -baik saja, tetapi metode ini terlalu canggung dan tidak aman.