ربط البيانات في HTML

هل فكرت يومًا في استخدام سجلات السجلات في JavaScript؟ اتضح أن بيانات التشغيل على العميل يمكن أن تكون بسيطة للغاية. تحديد مصدر البيانات ، وربط البيانات بعلامات مختلفة ، وتحقيق تأثيرات تشبه التطبيق. إنه رائع جدًا! (أولاً وقبل كل شيء ، يأتي محتوى المقالة من MSDN ، لكنه مجرد ملخص بكلماتي الخاصة.)

لنلقي نظرة على مثالين:

http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm

http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm

لا بد لي من الإعجاب Microsoft مرة أخرى.

هذه هي بنية ربط البيانات:

بالطبع ، هناك الخطوات التالية لتنفيذ ربط البيانات:

الخطوة الأولى هي تحديد مصدر البيانات

منذ IE4.0 ، تم دعم مصادر البيانات الأربعة التالية:

التحكم في البيانات الجدولية (TDC)

يوفر TDC طريقة بسيطة للوصول إلى البيانات النصية بتنسيق ، بشكل عام ملف CSV.

هنا مثال بسيط:

<Object ClassId = clsid: 333C7BC4-460F-11D0-BC04-0080C7055A83

المعرف = عرض Dsocomposer = 0 الارتفاع = 0>

<param name = dataurl value = composer.csv>

</object>

خدمة البيانات البعيدة (RDS)

خدمة البيانات عن بُعد ، والوصول مباشرة إلى البيانات على جانب الخادم البعيد ، Internet Explorer 4.0. يتم تنفيذ RDS من خلال OLE-DB أو اتصال قاعدة البيانات المفتوحة (ODBC).

مثال:

<object classid = clsid: bd96c556-65a3-11d0-983a-00c04fc29e33

المعرف = ارتفاع Dsocomposer = 0 عرض = 0>

<param name = server value = http: // musicserver>

<param name = connect value = dsn = music ؛ uid = guest ؛ pwd =>

<param name = sql value = حدد compsr_name من الملحن>

</object>

لكنه يشعر بقضية أمان ، لأن العميل يمكنه رؤية هذا الرمز.

مصدر بيانات XML

لن أقول الكثير عن XML ، أستخدمه مثل هذا في IE4.0:

<applet

الكود = com.ms.xml.dso.xmldso.class

معرف = xmldso

العرض = 0

الارتفاع = 0

mayscript = true>

<param name = url value = composer.xml>

</applet>

يمكن أن يكون Internet Explorer 5 أو أعلى هكذا:

<!-[إذا gte ie 5]>

<xml id = xml1>

<special-info>

<page-type> المرجع </page-type>

<member-type> الخاصية </member-type>

<servent-name> AccessKey </perfectivent-name>

<runtime-name readable = 1 crinable = 1> AccessKey </runtime-name>

<ucction> يقوم بتعيين أو استرداد مفتاح التسريع للكائن. </Abstract>

</topic-info>

</sml>

<! [endif]->

بالإضافة إلى ذلك ، يوفر IE أيضًا مفهوم جزيرة بيانات XML: جزر بيانات XML.

مصدر بيانات MSHTML

مثال على صفحة بيانات HTML:

<h1 id = compsr_first> هيكتور </h1>

<marquee id = compsr_last> berlioz </marquee>

<div id = compsr_birth> 1803 </viv>

<h2 id = compsr_first> متواضع </h2>

<h3 id = compsr_last> moussorgsky </h3>

<button id = compsr_birth> 1839 </utton>

<TextArea id = compsr_first> franz </sextarea>

<xmp id = compsr_last> liszt </smp>

<span id = compsr_birth> 1811 </span>

بمجرد تحديدها ، يمكنك الوصول إليها مثل هذا:

<كائن معرف = htmlcomposer data = compdata.htm height = 0 width = 0>

</object>

.step 2: ربط البيانات بعنصر HTML

بشكل عام ، يرتبط من خلال DataSrc و DataFLD في العلامات. على سبيل المثال:

<type type = textbox dataSrc =#dsocorting datafld = compsr_last>

و

<جدول DataSrc =#dsocomposer>

<tr>

<td> <div datafld = compsr_first> </viv> </td>

</r>

</table>

هذا مثال على جداول الربط:

http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm

من بينهم ، مصدر البيانات:

<كائن معرف = 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 = teadqualifier value = '>

</object>

طاولة مضطربة

<جدول DataSrc =#tdccomposers>

<Thead> <tr style = font-weight: Bold>

<td> أولاً </td> <td> last </td> <td> الولادة </td> <td> Death </td> <td> Origin </td>

</tr> </head>

<tbody>

<tr>

<td> <div datafld = compsr_first> </viv> </td>

<td> <div datafld = compsr_last> </viv> </td>

<td> <div datafld = compsr_birth> </viv> </td>

<td> <div datafld = compsr_death> </viv> </td>

<td> <div datafld = Origin> </viv> </td>

</r>

</tbody>

</table>

هذا هو التأثير:

أول أصل موت عيد الميلاد الأخير

هيكتور بيرليوز 1803 1869 فرنسا

Moussorgsky متواضع 1839 1881 روسيا

فرانز ليزت 1811 1886 فرنسا

أنطونيو فيفالدي 1678 1741 إيطاليا

يوهان سيباستيان باخ 1685 1750 ألمانيا

لودفيج فان بيتهوفن 1770 1827 ألمانيا

Wolfgang Amadeus Mozart 1756 1791 Austria

جوزيف هايدن 1732 1809 ألمانيا

كلود ديبوس 1862 1918 فرنسا

الخطوة 3: إضافة ديناميكية ، حذف ، إلخ. من البيانات (نموذج الكائن)

بالطبع يمكن أن يكون الربط ديناميكيًا:

في السيناريو:

span1.datasrc = #dsocomposer ؛

span1.datafld = compsr_first ؛

يبدو أن HTML مثل هذا:

<span datasrc =#dsocomposer datafld = compsr_first> </span>

ويمكنك الوصول إلى ADO مصدر البيانات:

var orcordset = dsocomposer.recordset ؛

وبطبيعة الحال ، هناك orcordset .movenext وهلم جرا.

يحب:

<معرف الإدخال = cmdnavfirst type = button value = <<

onClick = tdccomposes.recordset.movefirst ()>

<معرف الإدخال = cmdnavprev type = button value = <

onclick = tdccomposes.RecordSet.moveprevious () ؛

if (tdccomposers.recordset.bof)

tdccomposers.recordset.movefirst () ؛>

<معرف الإدخال = cmdnavnext type = button value =>

onClick = tdccomposes.RecordSet.movenext () ؛

إذا (tdccomposers.recordset.eof)

tdccomposers.recordset.movelast () ؛>

<معرف الإدخال = cmdnavlast type = button value = >>

onClick = tdccomposes.recordset.movelast ()>

يمكن أيضًا استخدامه مثل هذا:

<لغة البرنامج النصي = vbscript>

لكل OBJFLD في rsattendees.fields

document.write (اسم الحقل IS & objfld.name & <br>)

document.write (قيمة الحقل IS & objfld.value & <br>)

التالي

</script>

سجلات إضافة وحذف هي: orcordset.addnew () و orcordset.delete ().

الخطوة 3: الرد على مختلف أحداث البيانات (نموذج الأحداث)

كيفية إجراء المعالجة المقابلة بعد تغييرات البيانات؟

الطريقة المقدمة في MSDN هي كما يلي:

<script for = cbosort (اسم مصدر البيانات) الحدث = onChange (اسم الحدث)>

...

</script>

هذه هي قائمة اسم الحدث:

تطبيقات فقاعات الأحداث القابلة للإلغاء لتقديمها في إصدار Internet Explorer

onbeforeupdate true true elements 4.0

onafterupdate true false bound elements 4.0

onRowenter حقيقي خطأ DSO 4.0

onRowexit الحقيقي الحقيقي DSO 4.0

onbeforeunload نافذة كاذبة كاذبة 4.0

OnDataavailaivial True False DSO 4.0

OnDatasetComplete حقيقي خطأ DSO 4.0

ondatasetchanged الحقيقي dso 4.0

onerrorupdate true regle bound elements 4.0

onReadyStateChange True False DSO 4.0

OncellChange True False DSO 5.0

onRowsInserted حقيقي dso 5.0

onRowsDelete True False DSO 5.0

ماذا عن ذلك؟

أعتقد أن http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm مثال شامل نسبيًا على التطبيق. إذا درستها بعناية ، فستحصل على شيء ما.

هناك العديد من الأمثلة على استخدام ربط البيانات لتنفيذ الترحيل على الإنترنت. في الواقع ، يمكن لربط البيانات أن يفعل المزيد من الأشياء ، أليس كذلك؟ يجب أن يكون هناك تطبيقات كبيرة جدًا في العميل الغني ، مثل صنع بيانات معقدة للغاية.

ما أريد أن أفهمه الآن هو كيفية تحقيق التزامن بسهولة مع جانب الخادم ، لأن ربط البيانات للعميل ليس له أي تأثير على جانب الخادم (يمكنك إنشاء مصادر بيانات من جانب الخادم ، لكن تشغيل العميل لن يعود تلقائيًا إلى الخادم). قال MSDN أن RDS على ما يرام ، ولكن هذه الطريقة خرقاء وغير آمنة للغاية.