Alasan mengapa klien menggunakan DHTML terutama untuk mencapai jarak jauh, cukup katakan sebagai efek bebas refresh.
File: stear.htm
<! Doctype html public -// w3c // dtd html 4.0 transisi // en>
<Html>
<head>
<title> </title>
<meta name = generator konten = Microsoft Visual Studio 7.0>
</head>
<bahasa skrip = jscript>
var otblmain; // tabel utama
var strhtml =; // untuk sementara menggunakan variabel global
var bsavestatus = true; // Apakah simpan berhasil?
var icallid; // nomor unik yang memanggil WebService
// Dapatkan semua item melalui WebService
// Kemudian format output melalui fungsi callback ongetItems
fungsi getItems ()
{
// Memanggil metode GetItems dari WebService
service.myservice.callservice (ongetitems, getItems);
}
// Webservice Callback Function
fungsi ongetitems (hasil)
{
if (result.error)
{
alert (result.errordetail.code +: + result.errordetail.string);
kembali ;
}
bbxml.loadxml (result.raw.xml);
var sxml = bbxml.transformnode (bbxsl.xmldocument);
if (bbxml.parseeRror.reason ==)
{
strhtml = sxml;
}
kalau tidak
{
strhtml = bbxml.parseeRror.reason;
}
}
// Inisialisasi halaman
fungsi onload ()
{
// Mempersiapkan menggunakan WebService
service.useService (study.asmx? wsdl, myservice);
// Tentukan objek tabel rekaman
otblmain = document.getElementById (tblmain);
}
// Tambahkan catatan baru
// fungsinya adalah menambahkan baris baru ke tabel dan mendefinisikan 3 gaya dan acara TD
fungsi onadd ()
{
var row = otblmain.InserTrow ();
row.bgcolor = #FFFFFFF;
var cellId = row.insertcell ();
cellid.innerHtml = otblmain.rows.length - 1;
cellId.onClick = function () {onIdClick (this);};
cellid.style.cursor = tangan;
CellID.Title = Catatan yang Dipilih;
var cellitem = row.insertcell ();
cellitem.style.cursor = crosshair;
cellitem.onClick = function () {onItemClick (this);};
var cellDemo = row.insertcell ();
CellDemo.Style.Cursor = BANTUAN;
cellDemo.onClick = function () {ontDemoclick (this);};
}
// td item klik acara
// fungsinya adalah untuk memunculkan lapisan dan kemudian mendapatkan semua item melalui metode getItems
// Setelah memformat sebagai innertml seperti lapisan baru ini
Fungsi OnItemClick (sel)
{
getItems ();
var odiv = document.createElement (div);
odiv.zindex = 1;
odiv.style.position = absolute;
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 alur biru';
odiv.style.overflow = auto;
odiv.innerHtml = strhtml;
//document.body.Appendchild(odiv);
sel.AppendChild (ODIV);
}
// acara pemilihan item TD
Fungsi OnItems Selected (sel)
{
var otr = cell.parentelement;
var otable = otr.parentElement;
var otbody = oTable.parentElement;
var odiv = otbody.parentelement;
odiv.style.display = tidak ada;
var ocell = odiv.parentelement;
ocell.removechild (ODIV);
ocell.innerText = cell.innertext;
odiv = null;
}
// Catatan yang dipilih
fungsi onidclick (sel)
{
var tr = cell.parentElement;
if (tr.bgcolor == #99ccff)
{
tr.bgcolor = #ffffff;
}
kalau tidak
{
untuk (var i = 0; i <otblmain.rows.length; i ++)
{
otblmain.rows [i] .bgcolor = #ffffff;
otblmain.rows [i] .cells [0] .title = catatan yang dipilih;
}
tr.bgcolor = #99ccff;
Cell.Title = Unselect;
}
}
// Hapus tombol klik tombol
// Hapus baris yang dipilih oleh pengguna dan memberi nomor ulang baris
fungsi ondelete ()
{
var i = getSelectedIndex ();
if (i == 0)
{
Peringatan (tidak ada catatan yang akan dihapus dipilih!);
mengembalikan false;
}
kalau tidak
{
otblmain.deletero (i);
untuk (var j = 1; j <otblmain.rows.length; j ++)
{
otblmain.rows [j] .cells [0] .innerText = j;
}
}
}
// Dapatkan baris yang dipilih oleh pengguna
fungsi getSelectectedIndex ()
{
untuk (var i = 0; i <otblmain.rows.length; i ++)
{
if (otblmain.rows [i] .bgcolor == #99ccff)
{
Kembalikan i;
}
}
kembali 0;
}
// Waktu klik demo td di tabel
// fungsinya adalah untuk memunculkan jendela berpola dan pengguna memasukkan beberapa nilai
fungsi ondeMoclick (sel)
{
//alert(cell.innerText);
var odemo = window.showmodaldialog (demo.htm, cell.innertext, dialogwidth: 200px; dialogheight: 200px; dapat dipredikasikan: tidak; status: tidak; gulir: tidak);
if (odemo! = tidak terdefinisi)
{
cell.innertext = odemo.name + - + odemo.amount;
}
}
// Cara mengklik tombol Simpan
// Metode saat ini adalah menghubungi WebService untuk menyimpan setiap catatan secara bergantian.
// Kemudian hapus catatan yang disimpan melalui fungsi callback Onsaverecords (hasil)
fungsi onsave ()
{
if (otblmain.rows.length <2)
{
waspada (tidak ada catatan yang dapat disimpan!);
mengembalikan false;
}
untuk (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 (-);
if (arr.length! = 2)
{
waspada (setiap catatan harus diisi);
mengembalikan false;
}
kalau tidak
{
strdemoname = arr [0];
intdemoamount = arr [1];
// peringatan (stritemname +, + strdemoname +, + intdemoamount);
window.status =;
icallid = service.myservice.callservice (Onsavercords, savevercord, stritemname, strdemonname, parseint (intdemoamount, 10));
window.status = menyimpan + i + merekam ...;
}
}
}
// Simpan catatan
fungsi onsavercords (hasil)
{
if (result.error)
{
alert (result.errordetail.code +: + result.errordetail.string);
bsavestatus = false;
kembali ;
}
kalau tidak
{
if (result.value)
{
window.status = window.status + sukses! ;
otblmain.deletero (1);
}
kalau tidak
{
bsavestatus = false;
peringatan (Simpan gagal karena alasan yang tidak diketahui!);
window.status = window.status + gagal! Hentikan Simpan! ;
}
}
}
</script>
<body onload = onload ();>
<Div ID = Gaya Layanan = Perilaku: URL (WebService.htc)>
<xml id = bbxml> </xml>
<xml ID = bbxsl src = item1.xsl> </xml>
<br>
<H3 Align = Center> Contoh Layanan Web -Webse </h3>
<br>
<br>
<Lebar Tabel = 600 Align = ID tengah = TBLMAIN BGCOLOR =#000000 CellPacing = 1>
<tr bgcolor =#ffffff>
<td width = 50> angka </td>
<td width = 200> item </td>
<td> demo </td>
</tr>
</boable>
<p align = center>
<Input type = tombol nilai = Tambahkan OnClick = onAdd ()> <input type = tombol nilai = hapus onclick = ontDelete ()>
<Input Type = Tombol Nilai = Simpan OnClick = OnSave ()>
</p>
</body>
</html>
HTM di atas digunakan untuk mengakses sabun WebService melalui Microsoft's WebService.htc. Itu dienkapsulasi dengan sangat baik. Pekerjaan yang harus kita lakukan adalah mengurai XML yang lewat. Saya menggunakan XSL untuk parsing. Berikut ini adalah konten dari file ini
File item1.xsl
<? Versi XML = 1.0 Encoding = UTF-8?>
<xsl: stylesheet versi = 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: metode output = html/>
<xsl: Template Match =/>
<XSL: Terapkan Templates SELECT = // SOAP: BODY/>
</xsl: Template>
<XSL: Template Match = SOAP: BODY>
<xsl: apply-templates select =*[local-name () = 'getItemsResponse']/*[local-name () = 'getItemsResult'] //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
</xsl: Template>
<xsl: Template Match =*[local-name () = 'getItemsResult']>
<Html>
<body>
<Border Table = 1>
<tr>
<th> nama </t>
<th> nilai </t>
</tr>
<xsl: for-each select =*[local-name () = 'anyType' dan @xsi: type = 'item']>
<XSL: Terapkan Templates SELECT =./>
</xsl: for-each>
</boable>
</body>
</html>
</xsl: Template>
<XSL: Template Match =*[local-name () = 'anyType' dan @xsi: type = 'item']>
<tr>
<td style = kursor: hand onClick = onitemselected (this);>
<xsl: teks nonaktifkan-output-escaping = yes> & nbsp; </xsl: text>
<xsl: value-of select =*[local-name () = 'name']/>
</td>
<td>
<xsl: teks nonaktifkan-output-escaping = yes> & nbsp; </xsl: text>
<xsl: value-of select =*[local-name () = 'value']/>
</td>
</tr>
</xsl: Template>
</xsl: stylesheet>
Contoh di atas sangat sederhana, kesulitan utama terletak pada DHTML tersebut. Tetapi jika Anda memperluasnya, Anda dapat menyelesaikan banyak fungsi yang harus Anda terapkan dengan ActiveX sebelumnya.