เหตุผลที่ไคลเอนต์ใช้ DHTML เป็นหลักในการบรรลุระยะไกลเพียงวางเป็นเอฟเฟกต์ที่ปราศจากการรีเฟรช
ไฟล์: chude.htm
<! doctype html สาธารณะ -// 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; // หมายเลขที่ไม่ซ้ำกันที่เรียกว่าเว็บเซิร์ฟเวอร์
// รับรายการทั้งหมดผ่าน WebService
// จากนั้นจัดรูปแบบเอาต์พุตผ่านฟังก์ชั่นการโทรกลับ ongetItems
ฟังก์ชั่น getItems ()
-
// การเรียกใช้วิธี getItems ของเว็บเซิร์ฟเวอร์
Service.myservice.CallService (ongetItems, getItems);
-
// ฟังก์ชั่นการโทรกลับของเว็บไซต์
ฟังก์ชั่น ongetItems (ผลลัพธ์)
-
if (result.error)
-
การแจ้งเตือน (result.errordetail.code +: + result.errordetail.string);
กลับ ;
-
bbxml.loadxml (result.raw.xml);
var sxml = bbxml.transformnode (bbxsl.xmldocument);
if (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 (นี่);};
cellid.style.cursor = hand;
cellid.title = บันทึกที่เลือก;
var cellitem = row.insertcell ();
cellitem.style.cursor = crosshair;
cellItem.onclick = function () {onItemClick (นี่);};
var celldemo = row.insertcell ();
celldemo.style.cursor = ความช่วยเหลือ;
celldemo.onclick = function () {ondemoclick (this);};
-
// รายการคลิกรายการ
// ฟังก์ชั่นคือการปรากฏขึ้นเลเยอร์จากนั้นรับรายการทั้งหมดผ่านวิธี getItems
// หลังจากการจัดรูปแบบเป็น innerhtml เป็นเลเยอร์ใหม่นี้
ฟังก์ชั่น onitemclick (เซลล์)
-
getItems ();
var odiv = document.createElement (div);
odiv.zindex = 1;
odiv.style.position = สัมบูรณ์;
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 = null;
-
// บันทึกที่เลือก
ฟังก์ชั่น 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 = unselect;
-
-
// ลบปุ่มคลิกเหตุการณ์
// ลบแถวที่เลือกโดยผู้ใช้และจัดลำดับแถวแถวใหม่
ฟังก์ชั่น 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;
-
// เวลาคลิก TD TD ในตาราง
// ฟังก์ชั่นคือการปรากฏหน้าต่างที่มีลวดลายและผู้ใช้จะป้อนค่าหลายค่า
ฟังก์ชั่น ondemoclick (เซลล์)
-
//alert(cell.innerText);
var odemo = window.showmodaldialog (demo.htm, cell.innertext, dialogwidth: 200px; dialogheight: 200px; resizable: ไม่; สถานะ: ไม่; scroll: ไม่);
ถ้า (Odemo! = ไม่ได้กำหนด)
-
cell.innertext = odemo.name + - + odemo.amount;
-
-
// วิธีคลิกที่ปุ่มบันทึก
// วิธีการปัจจุบันคือการโทรหาเว็บเซอร์เพื่อบันทึกแต่ละระเบียนในทางกลับกัน
// จากนั้นล้างระเบียนที่บันทึกผ่านฟังก์ชั่นการโทรกลับ onsaverecords (ผลลัพธ์)
ฟังก์ชั่น onsave ()
-
if (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 + บันทึก ... ;
-
-
-
// บันทึกบันทึก
ฟังก์ชั่น onsavercords (ผลลัพธ์)
-
if (result.error)
-
การแจ้งเตือน (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> </xml>
<xml id = bbxsl src = item1.xsl> </xml>
<br>
<h3 align = center> webservice ตัวอย่าง </h3>
<br>
<br>
<ความกว้างของตาราง = 600 Align = center id = tblmain bgcolor =#000000 cellpacing = 1>
<tr bgcolor =#ffffff>
<td width = 50> number </td>
<td width = 200> รายการ </td>
<td> การสาธิต </td>
</tr>
</table>
<p allign = center>
<อินพุตประเภท = ค่าปุ่ม = เพิ่ม onClick = onAdd ()> <อินพุตประเภท = ค่าปุ่ม = ลบ onClick = onDelete ()>>
<อินพุตประเภท = ค่าปุ่ม = บันทึก onClick = onSave ()>>
</p>
</body>
</html>
HTM ด้านบนใช้เพื่อเข้าถึง Webservice Soap ผ่าน WebService.htc ของ Microsoft มันถูกห่อหุ้มได้ดีมาก งานที่เราต้องทำคือการแยกวิเคราะห์ XML ที่ผ่านมา ฉันใช้ XSL เพื่อแยกวิเคราะห์ ต่อไปนี้เป็นเนื้อหาของไฟล์นี้
ไฟล์ item1.xsl
<? XML เวอร์ชัน = 1.0 การเข้ารหัส = UTF-8?>
<xsl: stylesheet version = 1.0 xmlns: xsl = http: //www.w3.org/1999/xsl/transform xmlns: soap = http: //schemas.xmlsoap.org/soap/envelope/ xmlns: xsi = http: //www.w3.org/2001/xmlschema-instance xmlns: xsd = http: //www.w3.org/2001/xmlschema>
<xsl: วิธีการส่งออก = html/>
<xsl: เทมเพลตการจับคู่ =/>
<xsl: templates applie select = // soap: body/>
</xsl: เทมเพลต>
<xsl: เทมเพลตการจับคู่ = สบู่: ร่างกาย>
<xsl: templates applie select =*[local-name () = 'getItemSresponse']/*[local-name () = 'getItemSresult'] //>
</xsl: เทมเพลต>
<xsl: เทมเพลตการจับคู่ =*[local-name () = 'getItemSresult']>>
<html>
<body>
<table border = 1>
<tr>
<th> ชื่อ </th>
<th> ค่า </th>
</tr>
<xsl: สำหรับการเลือกเลือก =*[local-name () = 'anyType' และ @xsi: type = 'item']>
<XSL: Templates Apply Select =./>
</xsl: สำหรับการสอบ>
</table>
</body>
</html>
</xsl: เทมเพลต>
<xsl: เทมเพลตการจับคู่ =*[local-name () = 'anytype' และ @xsi: type = 'item']>
<tr>
<td style = เคอร์เซอร์: hand onclick = onitemselected (นี่);>
<xsl: ข้อความปิดใช้งาน output-Escaping = ใช่> & nbsp; </xsl: text>
<xsl: value-of select =*[local-name () = 'name']/>>
</td>
<td>
<xsl: ข้อความปิดใช้งาน output-Escaping = ใช่> & nbsp; </xsl: text>
<xsl: value-of select =*[local-name () = 'value']/>>
</td>
</tr>
</xsl: เทมเพลต>
</xsl: Stylesheet>
ตัวอย่างข้างต้นนั้นง่ายมากความยากลำบากหลักอยู่ใน DHTML เหล่านั้น แต่ถ้าคุณขยายมันคุณสามารถทำฟังก์ชั่นมากมายที่คุณต้องใช้กับ ActiveX ก่อน