クライアントがDHTMLを使用する理由は、主にリモートを達成するためであり、単純にリフリーの効果として配置するだけです。
ファイル：Study.htm
<！doctype html public - // w3c // dtd html 4.0 transitional // en>
<html>
<head>
<title> </title>
<メタ名=ジェネレーターコンテンツ= Microsoft Visual Studio 7.0>
</head>
<スクリプト言語= jscript>
var otblmain; //メインテーブル
var strhtml =; //一時的にグローバル変数を使用します
var bsavestatus = true; //セーブは成功していますか？
var icallid; // WebServiceを呼び出す一意の番号
// Webサービスを介してすべてのアイテムを取得します
//次に、コールバック関数ongetItemsを介して出力をフォーマットします
関数getItems（）
{
// WebServiceのgetItemsメソッドを呼び出します
service.myservice.callservice（ongetitems、getItems）;
}
// WebServiceコールバック関数
function ongetItems（result）
{
if（result.error）
{
alert（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;
}
}
//ページ初期化
function onload（）
{
// WebServiceの使用の準備
service.useservice（sudy.asmx？wsdl、myservice）;
//レコードテーブルオブジェクトを定義します
otblmain = document.getElementById（tblmain）;
}
//新しいレコードを追加します
//関数はテーブルに新しい行を追加し、3つのTDスタイルとイベントを定義することです
function 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 = hand;
cellid.title = selected record;
var Cellitem = row.insertcell（）;
Cellitem.style.cursor = Crosshair;
Cellitem.onclick = function（）{onitemclick（this）;};
var celldemo = row.insertcell（）;
celldemo.style.cursor = help;
celldemo.onclick = function（）{ondemoclick（this）;};
}
// TDアイテムクリックイベント
//関数はレイヤーをポップアップし、getItemsメソッドを介してすべてのアイテムを取得することです
//この新しいレイヤーとしてinnerhtmlとしてフォーマットした後
関数onitemclick（cell）
{
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グルーブブルー';
odiv.style.overflow = auto;
odiv.innerhtml = strhtml;
//document.body.appendchild(odiv）;
Cell.AppendChild（ODIV）;
}
// TDアイテム選択イベント
function onitemselected（cell）
{
var otr = cell.parentelement;
var otable = otr.parentelement;
var otbody = otable.parentelement;
var odiv = otbody.parentelement;
odiv.style.display = none;
var ocell = odiv.parentelement;
ocell.RemoveChild（ODIV）;
ocell.innertext = cell.innertext;
odiv = null;
}
//選択されたレコード
function onidclick（cell）
{
var tr = cell.parentelement;
if（tr.bgcolor ==＃99ccff）
{
tr.bgcolor = #ffffff;
}
それ以外
{
for（var i = 0; i <otblmain.rows.length; i ++）
{
otblmain.rows [i] .bgcolor = #ffffff;
otblmain.rows [i] .cells [0] .title = selected record;
}
tr.bgcolor =＃99ccff;
cell.title = unselect;
}
}
//ボタンクリックイベントを削除します
//ユーザーが選択した行を削除し、行を変更します
function ondelete（）
{
var i = getSelectedIndex（）;
if（i == 0）
{
アラート（削除するレコードは選択されていません！）;
falseを返します。
}
それ以外
{
otblmain.deletero（i）;
for（var j = 1; j <otblmain.rows.length; j ++）
{
otblmain.rows [j] .cells [0] .innertext = j;
}
}
}
//ユーザーが選択した行を取得します
関数getSelectedIndex（）
{
for（var i = 0; i <otblmain.rows.length; i ++）
{
if（otblmain.rows [i] .bgcolor ==＃99ccff）
{
私を返します。
}
}
0を返します。
}
//テーブル内のデモTDのクリック時間
//関数はパターン化されたウィンドウをポップアップすることであり、ユーザーは複数の値を入力します
機能ondemoclick（セル）
{
//alert(cell.innertext）;
var odemo = window.showmodaldialog（demo.htm、cell.innertext、dialogwidth：200px; dialogheight：200px; resizable：no; status：no; scroll：no）;
if（odemo！=未定義）
{
cell.innertext = odemo.name + - + odemo.amount;
}
}
// [保存]ボタンをクリックする方法
//現在の方法は、各レコードを順番に保存するためにWebサービスを呼び出すことです。
//次に、コールバック関数onsaverecords（結果）を介して保存されたレコードをクリアします
function onsave（）
{
if（otblmain.rows.length <2）
{
アラート（レコードは保存できません！）;
falseを返します。
}
for（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）
{
アラート（すべてのレコードに記入する必要があります）;
falseを返します。
}
それ以外
{
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 +レコード...;
}
}
}
//レコードを保存します
function onsavercords（result）
{
if（result.error）
{
alert（result.errordetail.code +： + result.errordetail.string）;
bsavestatus = false;
戻る ;
}
それ以外
{
if（result.value）
{
window.status = window.status + success！ ;
otblmain.deletero（1）;
}
それ以外
{
bsavestatus = false;
アラート（未知の理由により保存が失敗しました！）;
window.status = window.status + failed！保存を終了します！ ;
}
}
}
</script>
<body onload = onload（）;>
<div id = service style = befivis：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> item </td>
<td> demo </td>
</tr>
</table>
<p align = center>
<入力型=ボタン値= onclick = onadd（）> <入力タイプ=ボタン値= delete onclick = ondelete（）>
<入力型=ボタン値= onclick = onsave（）>を保存します
</p>
</body>
</html>
上記のHTMは、MicrosoftのWebService.htcを介してWebService Soapにアクセスするために使用されます。それは非常によくカプセル化されています。私たちがしなければならない仕事は、渡されたXMLを解析することです。 XSLを使用して解析しました。以下は、このファイルの内容です
ファイルitem1.xsl
<？xmlバージョン= 1.0エンコード= utf-8？>
<XSL：StyleSheetバージョン= 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：output method = html/>
<XSL：テンプレートマッチ=/>
<XSL：apply-templates select = // soap：body/>
</xsl：テンプレート>
<XSL：テンプレートマッチ=石鹸：ボディ>
<xsl：apply-templates select =*[local-name（）= 'getItemsResponse']/*[local-name（）= 'getItemsResult'] //>
</xsl：テンプレート>
<XSL：Template Match =*[local-name（）= 'getItemsResult']>
<html>
<body>
<テーブルボーダー= 1>
<tr>
<th>名前</th>
<th>値</th>
</tr>
<xsl：for-each select =*[local-name（）= 'anytype'および@xsi：type = 'item']>
<XSL：apply-templates select =。/>
</xsl：for-each>
</table>
</body>
</html>
</xsl：テンプレート>
<XSL：Template Match =*[local-name（）= 'anytype'および@xsi：type = 'item']>
<tr>
<td style = cursor：hand onclick = onitemselected（this）;>
<XSL：Text Disable-Output-Escaping = yes>＆nbsp; </xsl：text>
<xsl：value-of select =*[local-name（）= 'name']/>
</td>
<td>
<XSL：Text Disable-Output-Escaping = yes>＆nbsp; </xsl：text>
<xsl：value-of select =*[local-name（）= 'value']/>
</td>
</tr>
</xsl：テンプレート>
</xsl：styleSheet>
上記の例は非常に単純で、主な難しさはそれらのDHTMLにあります。ただし、拡張すると、以前にActiveXを使用して実装する必要がある多くの機能を完了することができます。