السبب في أن العميل يستخدم DHTML هو تحقيق جهاز التحكم عن بُعد بشكل أساسي ، ببساطة وضعه كأثر خالٍ من التحديث.
ملف: study.htm
<! doctype html public -// w3c // dtd html 4.0 transitional // en>
<html>
<head>
<title> </title>
<meta name = Generator Content = Microsoft Visual Studio 7.0>
</head>
<لغة البرنامج النصي = jscript>
var otblmain ؛ // الجدول الرئيسي
var strhtml = ؛ // استخدم المتغيرات العالمية مؤقتًا
var bsavestatus = true ؛ // هل الحفظ ناجح؟
var icallid ؛ // الرقم الفريد الذي يدعو خدمة الويب
// احصل على جميع العناصر من خلال خدمة الويب
// ثم تنسيق الإخراج من خلال وظيفة رد الاتصال ongetItems
وظيفة getItems ()
{
// استدعاء طريقة GetItems لخدمة الويب
service.myservice.callservice (ongetItems ، getItems) ؛
}
// وظيفة رد الاتصال على WebService
وظيفة ongetItems (نتيجة)
{
if (result.error)
{
ALERT (result.ERRORDETAIL.CODE +: + result.ERRORDETAIL.STRING) ؛
يعود ؛
}
bbxml.loadxml (result.raw.xml) ؛
var sxml = bbxml.transformNode (bbxsl.xmldocument) ؛
إذا (bbxml.parseerror.reason ==)
{
strhtml = sxml ؛
}
آخر
{
strhtml = bbxml.parseerror.reason ؛
}
}
// تهيئة الصفحة
وظيفة onload ()
{
// الاستعداد لاستخدام خدمة الويب
service.useservice (study.asmx؟ wsdl ، myService) ؛
// تحديد كائن جدول السجل
otblmain = document.getElementById (tblmain) ؛
}
// أضف سجلًا جديدًا
// الوظيفة هي إضافة صف جديد إلى الجدول وتحديد 3 أنماط وحدث TD
وظيفة onadd ()
{
var row = otblmain.inserTrow () ؛
row.bgColor = #ffffff ؛
var cellid = row.insertcell () ؛
cellId.innerhtml = otblmain.rows.length - 1 ؛
cellId.onclick = function () {onIdClick (this) ؛} ؛
cellid.style.cursor = اليد ؛
CellId.title = سجل محدد ؛
var cellItem = row.insertcell () ؛
cellitem.style.cursor = crosshair ؛
cellitem.onclick = function () {onItemClick (this) ؛} ؛
var celldemo = row.insertcell () ؛
celldemo.style.cursor = مساعدة ؛
celldemo.onclick = function () {onDemoclick (this) ؛} ؛
}
// TD Item ، انقر فوق الحدث
// تتمثل الوظيفة في ظهور طبقة ثم الحصول على جميع العناصر من خلال طريقة getItems
// بعد التنسيق كـ innerhtml مثل هذه الطبقة الجديدة
وظيفة OnItemClick (الخلية)
{
getItems () ؛
var odiv = document.createElement (div) ؛
Odiv.zindex = 1 ؛
Odiv.Style.position = aboort ؛
Odiv.Style.Height = 200 ؛
Odiv.Style.Width = 300 ؛
Odiv.Style.Left = cell.style.left ؛
Odiv.Style.top = cell.style.top ؛
Odiv.Style.BackgroundColor = #99EEFF ؛
Odiv.Style.Border = '0.1cm Groove Blue' ؛
Odiv.Style.Overflow = Auto ؛
odiv.innerhtml = strhtml ؛
//document.body.appendchild(odiv) ؛
cell.appendchild (ODIV) ؛
}
// حدث اختيار عنصر TD
وظيفة OnItemselected (الخلية)
{
var otr = cell.parentElement ؛
var otable = otr.parentElement ؛
var otbody = otable.parentElement ؛
var odiv = otbody.parentElement ؛
Odiv.Style.Display = لا شيء ؛
var ocell = odiv.parentElement ؛
OCELL.REMOVECHILD (ODIV) ؛
ocell.innertext = cell.innertext ؛
ODIV = فارغة ؛
}
// سجل محدد
وظيفة OnIdclick (الخلية)
{
var tr = cell.parentElement ؛
if (tr.bgColor == #99CCFF)
{
tr.bgcolor = #ffffff ؛
}
آخر
{
لـ (var i = 0 ؛ i <otblmain.rows.length ؛ i ++)
{
otblmain.rows [i] .bgColor = #ffffff ؛
otblmain.rows [i] .cells [0] .title = سجل محدد ؛
}
tr.bgcolor = #99ccff ؛
cell.title = unlecect ؛
}
}
// حذف الزر انقر فوق حدث
// حذف الصف المحدد من قبل المستخدم وإعادة ترقيم الصف
وظيفة onDelete ()
{
var i = getSelectedIndex () ؛
إذا (i == 0)
{
تنبيه (لا يتم تحديد أي سجل يتم حذفه!) ؛
العودة كاذبة
}
آخر
{
otblmain.deletero (i) ؛
لـ (var j = 1 ؛ j <otblmain.rows.length ؛ j ++)
{
otblmain.rows [j] .cells [0] .innertext = j ؛
}
}
}
// احصل على الخط المحدد من قبل المستخدم
وظيفة getSelectedIndex ()
{
لـ (var i = 0 ؛ i <otblmain.rows.length ؛ i ++)
{
if (otblmain.rows [i] .bgColor == #99CCFF)
{
العودة أنا.
}
}
العودة 0 ؛
}
// نقر وقت العرض التوضيحي في الجدول
// الوظيفة هي الظهور على نافذة منقوشة ويدخل المستخدم قيمًا متعددة
وظيفة OnDemoclick (الخلية)
{
//alert(cell.innertext) ؛
var odemo = window.showmodaldialog (demo.htm ، cell.innertext ، dialogwidth: 200px ؛ dialogheight: 200px ؛ resizable: no ؛ الحالة: no ؛ التمرير: لا) ؛
إذا (Odemo! = غير محدد)
{
cell.innertext = odemo.name + - + odemo.amount ؛
}
}
// كيفية النقر فوق الزر "حفظ"
// الطريقة الحالية هي استدعاء خدمة الويب لحفظ كل سجل بدوره.
// ثم امسح السجلات المحفوظة من خلال وظيفة رد الاتصال OnSavereCords (النتيجة)
وظيفة onSave ()
{
إذا (otblmain.rows.length <2)
{
تنبيه (لا يمكن حفظ سجل!) ؛
العودة كاذبة
}
لـ (var i = 1 ؛ i <otblmain.rows.length && bsavestatus ؛ i ++)
{
var Stritemname ؛
var Strdemoname ؛
var intdemoAmount ؛
stritemname = otblmain.rows [i] .cells [1] .innertext ؛
var arr = otblmain.rows [i] .cells [2] .innertext.split (-) ؛
إذا (arr.length! = 2)
{
تنبيه (يجب ملء كل سجل) ؛
العودة كاذبة
}
آخر
{
StrDemoname = arr [0] ؛
intdemoAmount = arr [1] ؛
// ALERT (Stritemname + ، + StrDemoname + ، + IntDemoAmount) ؛
window.status = ؛
icallid = service.myservice.callservice (onSavercords ، SaveVercord ، Stritemname ، Strdemonname ، Parseint (intdemoamount ، 10)) ؛
window.status = حفظ + i + record ... ؛
}
}
}
// حفظ السجل
وظيفة onSavercords (نتيجة)
{
if (result.error)
{
ALERT (result.ERRORDETAIL.CODE +: + result.ERRORDETAIL.STRING) ؛
bsavestatus = false ؛
يعود ؛
}
آخر
{
if (result.value)
{
window.status = window.status + النجاح! ؛
otblmain.deletero (1) ؛
}
آخر
{
bsavestatus = false ؛
التنبيه (حفظ فشل لأسباب غير معروفة!) ؛
window.status = window.status + فشل! إنهاء حفظ! ؛
}
}
}
</script>
<body onload = onload () ؛>
<div id = service style = السلوك: url (webservice.htc)>
<xml id = bbxml> </sml>
<xml id = bbxsl src = item1.xsl> </sml>
<br>
<h3 align = center> webservice مثال </h3>
<br>
<br>
<عرض الجدول = 600 محاذاة = معرف المركز = tblmain bgcolor =#000000 cellpacing = 1>
<tr bgcolor =#ffffff>
<td width = 50> الرقم </td>
<td width = 200> العنصر </td>
<td> التجريبي </td>
</r>
</table>
<p align = center>
<type type = button value = add onclick = onadd ()> <input type = button value = delete onClick = onDelete ()>
<نوع الإدخال = قيمة الزر = حفظ OnClick = onSave ()>
</p>
</body>
</html>
يتم استخدام HTM أعلاه للوصول إلى صابون WebService من خلال Microsoft's WebService.htc. يتم تغليفه بشكل جيد للغاية. العمل الذي يتعين علينا القيام به هو تحليل XML الذي تم تمريره. لقد استخدمت XSL لتحليله. ما يلي هو محتوى هذا الملف
ملف item1.xsl
<؟ نسخة XML = 1.0 الترميز = UTF-8؟>
أقل Xmlns: XSI = http: //www.w3
<XSL: طريقة الإخراج = html/>
<XSL: قالب قالب =/>
<xsl: تطبيق templates select = // soap: body/>
</xsl: قالب>
<XSL: قالب قالب = الصابون: الجسم>
<xsl: تطبيق templates select =*[local-name () = 'getItemSresponse']/*[local-name () = 'getItemSresult'] //>
</xsl: قالب>
<xsl: قالب قالب =*[name-name () = 'getItemSresult']>
<html>
<body>
<جدول الحدود = 1>
<tr>
<h> الاسم </th>
<th> القيمة </th>
</r>
<xsl: for-each select =*[local-name () = 'anytype' و xsi: type = 'item']>
<xsl: تطبيق templates select =./>
</xsl: for-ECH>
</table>
</body>
</html>
</xsl: قالب>
<xsl: قالب قالب =*[name-name () = 'anytype' و @xsi: type = 'item']>
<tr>
<td style = المؤشر: hand onclick = onItemSelected (this) ؛>
<XSL: Text Disable-Output-escaping = yes> & nbsp ؛ </xsl: text>
<xsl: قيمة select =*[local-name () = 'name']/>
</td>
<td>
<XSL: Text Disable-Output-escaping = yes> & nbsp ؛ </xsl: text>
<xsl: قيمة select =*[local-name () = 'value']/>
</td>
</r>
</xsl: قالب>
</xsl: ورقة الأنماط>
المثال أعلاه بسيط للغاية ، تكمن الصعوبة الرئيسية في تلك DHTML. ولكن إذا قمت بتوسيعه ، فيمكنك إكمال الكثير من الوظائف التي كان عليك تنفيذها مع ActiveX من قبل.