La raison pour laquelle le client utilise le DHTML est principalement pour réaliser à distance, le mettez simplement comme un effet sans rafraîchissement.
Fichier: étude.htm
<! doctype html public - // w3c // dtd html 4.0 transitional // en>
<html>
<adal>
<Title> </Title>
<meta name = Generator Content = Microsoft Visual Studio 7.0>
</ head>
<Script Language = JScript>
var otblmain; // table principale
var strhtml =; // utiliser temporairement les variables globales
var bsavestatus = true; // La sauvegarde est-elle réussie?
var icallid; // le numéro unique qui appelle le service Web
// obtient tous les articles via le service Web
// Formatez ensuite la sortie via la fonction de rappel sur ONGETITEMS
fonction getItems ()
{
// Appel de la méthode GetItems du WebService
Service.MyService.CallService (ongetItems, getItems);
}
// Fonction de rappel du service Web
fonction ongetItems (résultat)
{
if (result.error)
{
alert (result.errorDetail.code +: + result.errorDetail.string);
retour ;
}
bbxml.loadxml (result.raw.xml);
var sxml = bbxml.transformNode (bbxsl.xmldocument);
if (bbxml.parseerror.reason ==)
{
strhtml = sxml;
}
autre
{
strhtml = bbxml.parseerror.reason;
}
}
// Initialisation de la page
fonction onload ()
{
// Préparation à l'utilisation de WebService
Service.USESERVICE (Study.AmmX? WSDL, MyService);
// Définissez l'objet de table d'enregistrement
otblmain = document.getElementById (tblmain);
}
// Ajouter un nouvel enregistrement
// La fonction consiste à ajouter une nouvelle ligne à la table et à définir 3 styles TD et événement
fonction 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 = main;
CellId.Title = enregistrement sélectionné;
var CellItem = row.insertCell ();
CelLitem.style.cursor = Crosshair;
CellItem.OnClick = function () {onItemClick (this);};
var celldemo = row.insertCell ();
Celldemo.style.cursor = Aide;
Celldemo.OnClick = function () {onDemoClick (this);};
}
// TD Article Cliquez sur l'événement
// La fonction consiste à faire apparaître une couche, puis à obtenir tous les éléments via la méthode GetItems
// après avoir formaté comme innerhtml comme cette nouvelle couche
fonction ONITEMCLICK (cellule)
{
getItems ();
var odIv = document.CreateElement (div);
odiv.zindex = 1;
odiv.style.position = absolu;
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,1 cm groove bleu';
odiv.style.overflow = auto;
odiv.innerhtml = strhtml;
//Document.body.ApendChild(odiv);
Cell.ApendChild (ODIV);
}
// Événement de sélection des articles TD
fonction onitemselected (cellule)
{
var otr = cell.parerentelement;
var otable = otr.parerentelement;
var otbody = otable.pare-centeLilement;
var odiv = otbody.pare-lelement;
odiv.style.display = aucun;
var ocell = oDIV.parerentelement;
ocell.removechild (odiv);
Ocell.InnerText = Cell.InnerText;
odiv = null;
}
// Enregistrement sélectionné
fonction onidclick (cellule)
{
var tr = cell.pare-centeLilement;
if (tr.bgcolor == # 99ccff)
{
tr.bgColor = #ffffff;
}
autre
{
pour (var i = 0; i <otblmain.Rows.length; i ++)
{
otblmain.Rows [i] .bgColor = #ffffff;
otblmain.Rows [i] .Cells [0] .Title = enregistrement sélectionné;
}
tr.bgColor = # 99ccff;
Cell.title = unselect;
}
}
// Supprimer l'événement de clic du bouton
// Supprimer la ligne sélectionnée par l'utilisateur et renuméroter la ligne
fonction ondelete ()
{
var i = getSelectedIndex ();
si (i == 0)
{
alerte (aucun enregistrement à supprimer n'est sélectionné!);
retourne false;
}
autre
{
otblmain.deletero (i);
pour (var j = 1; j <otblmain.Rows.length; j ++)
{
otblmain.Rows [J] .Cells [0] .InnerText = J;
}
}
}
// Faites sélectionner la ligne par l'utilisateur
fonction getSelectedIndex ()
{
pour (var i = 0; i <otblmain.Rows.length; i ++)
{
if (otblmain.Rows [i] .bgColor == # 99ccff)
{
retour i;
}
}
retour 0;
}
// le temps de clic de la démo TD dans le tableau
// La fonction consiste à apparaître une fenêtre à motifs et l'utilisateur entre plusieurs valeurs
fonction ondemoclick (cellule)
{
//alert(cell.innerText);
var odemo = window.showmodaldialog (Demo.htm, Cell.innerText, DialogWidth: 200px; DialogHeight: 200px; resibiliable: no; status: no; défilement: no);
if (Odemo! = Undefined)
{
Cell.InnerText = Odemo.Name + - + Odemo.amount;
}
}
// Comment cliquer sur le bouton Enregistrer
// La méthode actuelle consiste à appeler le service Web pour enregistrer chaque enregistrement tour à tour.
// Effacer ensuite les enregistrements enregistrés via la fonction de rappel ONSAveRecords (résultat)
fonction Onsave ()
{
if (otblmain.Rows.length <2)
{
alerte (aucun enregistrement ne peut être enregistré!);
retourne false;
}
pour (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)
{
alerte (chaque dossier doit être rempli);
retourne false;
}
autre
{
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 = enregistrer + i + enregistrement ...;
}
}
}
// Enregistrer l'enregistrement
fonction onSavercords (résultat)
{
if (result.error)
{
alert (result.errorDetail.code +: + result.errorDetail.string);
bsavestatus = false;
retour ;
}
autre
{
if (result.value)
{
window.status = window.status + succès! ;
otblmain.deletero (1);
}
autre
{
bsavestatus = false;
alerte (sauvegarde a échoué pour des raisons inconnues!);
window.status = window.status + a échoué! Terminez la sauvegarde! ;
}
}
}
</cript>
<body onload = onload ();>
<div id = service style = comportement: url (WebService.htc)>
<xml id = bbxml> </ xml>
<xml id = bbxsl src = item1.xsl> </ xml>
<br>
<h3 Align = Center> Exemple de service Web </H3>
<br>
<br>
<table largeur = 600 align = ID central = 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 = centre>
<entrée type = Button Value = Add OnClick = onAdd ()> <Type de saisie = Button Value = Delete OnClick = OnDelete ()>
<Type d'entrée = Button Value = Enregistrer OnClick = ONSAVE ()>
</p>
</docy>
</html>
Le HTM ci-dessus est utilisé pour accéder au SOAP WebService via WebService.htc de Microsoft. Il est très bien encapsulé. Le travail que nous devons faire est d'analyser le XML réalisé. J'ai utilisé XSL pour l'analyser. Ce qui suit est le contenu de ce fichier
Élément de fichier1.xsl
<? xml version = 1.0 Encoding = UTF-8?>
<xsl: version de style styles = 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: méthode de sortie = html />
<xsl: modèle correspondant = />
<xsl: appliquez-les pour sélections = // SOAP: Body />
</ xsl: modèle>
<xsl: modèle correspondant = savon: corps>
<xsl: application-Templates select = * [local-name () = 'getItemsResponse'] / * [local-name () = 'getItemsResult'] //>
</ xsl: modèle>
<xsl: modèle match = * [local-name () = 'getItemsResult']>
<html>
<body>
<Table Border = 1>
<tr>
<th> nom </th>
<th> valeur </th>
</tr>
<xsl: for-each select = * [local-name () = 'anyType' et @xsi: type = 'item']>
<xsl: appliquez des timplates sélectionnés =. />
</ xsl: for-out>
</ table>
</docy>
</html>
</ xsl: modèle>
<xsl: Template Match = * [local-name () = 'anyType' et @xsi: type = 'item']>
<tr>
<td style = curseur: hand onclick = onItemSelected (this);>
<xsl: text disable-sorti-escaping = oui> & nbsp; </ xsl: text>
<xsl: valeur de select = * [local-name () = 'name'] />
</td>
<TD>
<xsl: text disable-sorti-escaping = oui> & nbsp; </ xsl: text>
<xsl: valeur de sélection = * [local-name () = 'value'] />
</td>
</tr>
</ xsl: modèle>
</ xsl: feuille de style>
L'exemple ci-dessus est très simple, la principale difficulté réside dans ces DHTML. Mais si vous le développez, vous pouvez remplir de nombreuses fonctions que vous avez dû implémenter avec ActiveX auparavant.