Comme je le disais il y a peu, je suis dans le développement d’une application Java nécessitant un peu de Java. En gros, le principe est simple: j’ai un tableau qui contient des lignes (logique …). Chaque ligne correspond à une adresse IP (donc une machine …). L’idée est de pinguer à la suite et en boucle toutes les machines et de changer la couleur de fond de chaque ligne en fonction du statut de la machine (rouge: injoignable, vert: ça pingue). Pour des raisons évidentes, il y aura un temps de pause entre chaque ping.
Le ping en lui-même est géré par un bundle OSGI coté serveur. Coté client, un ping se traduit par l’appel à une URL qui répond en XML. En gros, on répond
ok . Bref, quelque chose d’assez simple de nos jours.
< Seulement, j'ai commencé à coder ça totalement à la main (comme d'habitude)... Mais le fonctionnement ne me plaisait pas trop (bref, ça fonctionnait de façon bancale). Et puis je suis tombé sur un article de Développez concernant Prototype, un framework Ajax. Pour moi framework AJAX était synonyme de grosse librairie bien lourde pour pas grand chose.
Et bien là: non ! Prototype est plutôt léger et ce qu’il fait vaut vraiment le coup. Je ne vais pas vous faire une présentation complète de celui-ci (les autres les font très bien, voir les liens en bas). Je vais juste vous montrer un petit comparatif de mon code avec et sans prototype …
Sans Prototype
var hostsList = new Array();
var iListHosts= 0;
function pingHost(hostId)
{
callRemotePage("ajaxPing.do?hostid="+hostId, pingHostOrsc, true);
var containerCont = document.getElementById("host-"+hostId);
}
function pingAllHostsCycle()
{
hostPing(hostsList[iListHosts]);
iListHosts ++;
if(iListHosts >=hostsList.length) {iListHosts = 0;}
}
function getAllHostsIds(tableId)
{
var table = document.getElementById(tableId);
var trs = table.getElementsByTagName("tr");
for (var i=0; i
<trs.length; i++)
{
var tr = trs[i];
var id = tr.id;
var reg=new RegExp("[-]", "g");
id = id.split(reg);
hostsList.push(id[1]);
}
}
function callRemotePage(url, orscFunction, assync)
{
if (window.XMLHttpRequest)
{
// Les vrais navigateurs
req = new XMLHttpRequest();
req.onreadystatechange = orscFunction;
req.open("GET", url, assync);
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.send(null);
}
else if (window.ActiveXObject)
{
// IE
req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = orscFunction;
req.open("GET", url, true);
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.send();
}
else
{
return; // Navigateur non compatible Non-IE browsers... C'est rare !
}
}
function pingHostOrsc()
{
if (req.readyState == 4 && req.status == 200)
{
var docxml = req.responseXML;
if(docxml != null)
{
var id = docxml.getElementsByTagName('id').item(0);
if(id.textContent != "null")
{
var containerCont = document.getElementById("host-"+id.textContent);
var code = docxml.getElementsByTagName('code').item(0);
if(code.textContent == "ok")
{
var ping = docxml.getElementsByTagName('ping').item(0);
if(ping.textContent == "ok")
{
containerCont.style.backgroundColor = "green";
}
else
{
containerCont.style.backgroundColor = "red";
}
setTimeout('pingAllHosts()',1000*1);
}
}
}
}
} |
Avec Prototype
var hostsList = new Array();
var iListHosts= 0;
function hostPing(hostId)
{
req = new Ajax.Request
(
"ajaxPing.do?hostid="+hostId,
{
onSuccess: hostUpdate
}
)
}
function hostUpdate(resp)
{
XML = resp.responseXML;
if(XML != null)
{
var id = XML.getElementsByTagName('id').item(0);
if(id.textContent != "null")
{
var containerCont = document.getElementById("host-"+id.textContent);
var code = XML.getElementsByTagName('code').item(0);
if(code.textContent == "ok")
{
var ping = XML.getElementsByTagName('ping').item(0);
if(ping.textContent == "ok")
{
containerCont.style.backgroundColor = "green";
}
else
{
containerCont.style.backgroundColor = "red";
}
}
}
}
setTimeout('pingAllHostsCycle()',1000*1);
}
function pingAllHostsCycle()
{
hostPing(hostsList[iListHosts]);
iListHosts ++;
if(iListHosts >=hostsList.length) {iListHosts = 0;}
}
function getAllHostsIds(tableId)
{
var table = document.getElementById(tableId);
var trs = table.getElementsByTagName("tr");
for (var i=0; i
<trs.length; i++)
{
var tr = trs[i];
var id = tr.id;
var reg=new RegExp("[-]", "g");
id = id.split(reg);
hostsList.push(id[1]);
}
} |
C’est tout de suite plus clair / court ! Et en plus, ça marche au poil. Bref, je suis maintenant conquis par Prototype. J’avoue que je ne l’utilise pas ici dans la totalité de ses capacités. J’en avais besoin pour un point précis. Mais je sens que je vais me repencher un peu plus sur la documentation d’ici quelques jours.
Bonjour, je viens de tomber sur ton blog et comme toi je suis à SUPINFO à Lyon (labo web’n'dev).
Concernant ta pratique, il y a plein de chose que tu devrais essayer et changer dans ton code. Comme par exemple :
Le document.getElementById(‘monId’) par $(‘monId’) .
Le containerCont.style.backgroundColor = « green »; par containcerCont.setStyle({background-color:’green’})
Ce bout de code est pas mal
et aussi, il vaut mieux envoyer les données en POST c’est plus « classe » et plus « secure » (même si on peu envoyer du POST de l’extérieur).
Clément
Bonjour,
Effectivement le code présenté ici est loin d’utiliser tout ce que Prototype propose. Il me fallait quelque chose de fonctionnel et très rapidement (c’était pour le projet de groupe). Mais j’ai prévu de me pencher sérieusement sur le framework d’ici peu de temps.
Merci pour les critiques constructives !