클라이언트가 DHTML을 사용하는 이유는 주로 원격을 달성하기위한 것입니다.
파일 : study.htm
<! doctype html public- // w3c // dtd html 4.0 Transitional // en>
<html>
<헤드>
<제목> </title>
<메타 이름 = 발전기 컨텐츠 = Microsoft Visual Studio 7.0>
</head>
<script language = 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);
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 (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 항목 이벤트를 클릭하십시오
// 함수는 레이어를 팝업 한 다음 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 = #99eef;
odiv.style.border = '0.1cm 그루브 블루';
odiv.style.overflow = 자동;
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.poderElement;
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;
}
또 다른
{
for (var i = 0; i <otblmain.rows.length; i ++)
{
otblmain.rows [i] .bgcolor = #ffffff;
otblmain.rows [i] .cells [0] .title = 선택된 레코드;
}
tr.bgcolor = #99ccff;
cell.title = 셀렉트;
}
}
// 버튼 삭제 이벤트를 클릭하십시오
// 사용자가 선택한 행을 삭제하고 행을 rebumb합니다.
기능 ondelete ()
{
var i = getSelectedIndex ();
if (i == 0)
{
경고 (삭제 될 레코드가 선택되지 않음!);
거짓을 반환합니다.
}
또 다른
{
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)
{
반환 i;
}
}
반환 0;
}
// 테이블에서 데모 TD의 클릭 시간
// 함수는 패턴 화 된 창을 팝업하고 사용자가 여러 값을 입력하는 것입니다.
기능 ondemoclick (셀)
{
//alert(cell.innertext);
var odemo = wind
if (odemo! = 정의되지 않은)
{
cell.innertext = odemo.name + - + odemo.amount;
}
}
// 저장 버튼을 클릭하는 방법
// 현재 방법은 웹 서비스를 호출하여 각 레코드를 차례로 저장하는 것입니다.
// 그런 다음 콜백 함수 onsaverecords (결과)를 통해 저장된 레코드를 지우십시오.
onsave () 함수
{
if (otblmain.rows.length <2)
{
경고 (레코드를 저장할 수 없습니다!);
거짓을 반환합니다.
}
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)
{
경고 (모든 레코드를 채워야 함);
거짓을 반환합니다.
}
또 다른
{
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)
{
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 + 실패! 세이브를 종료하십시오! ;
}
}
}
</스크립트>
<바디 onload = onload ();>
<div id = service style = 동작 : url (webservice.htc)>
<xml id = bbxml> </xml>
<xml id = bbxsl src = item1.xsl> </xml>
<br>
<h3 align = center> 웹 서비스 예 </h3>
<br>
<br>
<테이블 width = 600 align = center id = tblmain bgcolor =#000000 셀 팩핑 = 1>
<tr bgcolor =#ffffff>
<td width = 50> 번호 </td>
<td width = 200> 항목 </td>
<td> 데모 </td>
</tr>
</테이블>
<p align = center>
<입력 유형 = 버튼 값 = onclick = onadd ()> <입력 유형 = 버튼 값 = 삭제 onclick = ondelete ()>
<입력 유형 = 버튼 값 = onclick = onsave ()> 저장
</p>
</body>
</html>
위의 HTM은 Microsoft의 WebService.htc를 통해 웹 서비스 비누에 액세스하는 데 사용됩니다. 아주 잘 캡슐화됩니다. 우리가해야 할 일은 전달 된 XML을 구문 분석하는 것입니다. 파싱을 위해 XSL을 사용했습니다. 다음은이 파일의 내용입니다
파일 item1.xsl
<? XML 버전 = 1.0 인코딩 = UTF-8?>
<xsl : 스타일 시트 버전 = 1.0 xmlns : xsl = http : //www.w30 xmlns : xsi = http : //www.w3.org/2001/xmlschema-instance xmlns : xsd = http : //www.w3.org/2001/xmlschema>
<xsl : 출력 메소드 = 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>
</테이블>
</body>
</html>
</xsl : 템플릿>
<xsl : template match =*[local-name () = 'anytype'및 @xsi : type = 'item']>
<tr>
<td style = cursor : hand onclick = onitemselected (this);>
<xsl : 텍스트 비활성화 출력-스케이프 = 예> & nbsp; </xsl : text>
<xsl : select value-of select =*[local-name () = 'name']/>
</td>
<td>
<xsl : 텍스트 비활성화 출력-스케이프 = 예> & nbsp; </xsl : text>
<xsl : select =*[local-name () = 'value']/>
</td>
</tr>
</xsl : 템플릿>
</xsl : 스타일 시트>
위의 예는 매우 간단합니다. 주요 난이도는 DHTML에 있습니다. 그러나 확장하면 이전에 ActiveX로 구현 해야하는 많은 기능을 완료 할 수 있습니다.