[AJAX] appels de Javascript avec XMLHttpRequest aléatoire

Version imprimable

Bonsoir à tous,

j'aurais besoin de votre aide sur une partie de mon code qui ne fonctionne pas correctement...
j'ai pas mal modifié de choses et je dois avoir fait quelque chose de travers mais impossible de m'y retrouver !

voici les explications...
j'ai une page JSP qui a 3 div différent qui appellent chacun une fonction de mon fichier .js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<div id="alarms" align="left"> 
	<script type="text/JavaScript">
	checkForCapteurs();
	</script>
</div>
 
<div id="messages" align="left">
	<script type="text/JavaScript">
	checkForMessages();
	</script>
</div>
 
<div id="commandes" align="left">
	<script type="text/JavaScript">
	checkForCommandes();
	</script>
</div>

les trois commandes sont à peu près identiques, elle envoient un tag spécifique à une Servlet qui renvoit des données d"une base de données au Javascript.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
var req;
 
function initRequest(url) {
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } 
    else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
}
 
function checkForMessages() {
    var url = "http://192.168.0.10:8080/EMI/ModulePooling/messages";
    initRequest(url);
    req.onreadystatechange = processReqMessages;
    req.open("GET", url, true);
    req.send(null);
}
 
// callback
function processReqMessages() {
	var select = window.document.getElementById("messages");
	if (req.readyState == 4) {
        if (req.status == 200) {
        	select.innerHTML = "";
        	var message = "";
			var elements = req.responseXML.getElementsByTagName("message");
			for(var i=0;i<elements.length;i++){
				message += elements[i].firstChild.nodeValue+ "<br />";
			}
			select.innerHTML += message + "<br />";
        }
        else{
         select.innerHTML += "Erreur de reception <br />";
        }
		// sleep de 5s et on repart
        setTimeout("checkForMessages()", 5000);
    }
}
 
function checkForCapteurs() {
    var url = "http://192.168.0.10:8080/EMI/ModulePooling/capteurs";
    initRequest(url);
    req.onreadystatechange = processReqCapteurs;
    req.open("GET", url, true);
    req.send(null);
}
 
// callback
function processReqCapteurs() {
	var select = window.document.getElementById("alarms");
	if (req.readyState == 4) {
        if (req.status == 200) {
        	select.innerHTML = "";
        	var message = "";
        	var elements = req.responseXML.getElementsByTagName("capteur");
			for(var i=0;i<elements.length;i++){
				message += "<tr><td>"+elements[i].firstChild.nodeValue+"</td></tr>";
			}
			select.innerHTML = "<table class=\"t2\"><tbody>" + message + "</tbody></table>";
        }
        else{
         select.innerHTML += "Erreur de reception <br />";
        }
		// sleep de 5s et on repart
        setTimeout("checkForCapteurs()", 5000);
    }
}
 
function checkForCommandes() {
    var url = "http://192.168.0.10:8080/EMI/ModulePooling/commandes";
    initRequest(url);
    req.onreadystatechange = processReqCommandes;
    req.open("GET", url, true);
    req.send(null);
}
 
// callback
function processReqCommandes() {
	var select = window.document.getElementById("commandes");
	if (req.readyState == 4) {
        if (req.status == 200) {
        	select.innerHTML = "";
        	var message = "";
			var elements = req.responseXML.getElementsByTagName("commande");
			for(var i=0;i<elements.length;i++){
				message += elements[i].firstChild.nodeValue+"<br />";
			}
			select.innerHTML += message + "<br />";
        }
        else{
         select.innerHTML += "Erreur de reception <br />";
        }
		// sleep de 5s et on repart
        setTimeout("checkForCommandes()", 5000);
    }
}

en debuggant avec Firebug je vois bien les HTTP GET qui sont fait sur ma servlet, les données sont bien recues par mon Javascript, là pas de soucis, mais le problème vient que mes fonctions JavaScript ne semblent pas être appellées systématiquement a l'ouverture de la page...

Quelque fois je n'ai que le DIV commande qui est mis à jour, quelque fois le DIV capteur + commande est mis à jour...

je sèche...qu'en pensez vous ? est ce que c'est une bonne pratique pour avoir une dynamique sur ma page ? pas trop gourmand au final ?

Merci,
Tiamat.

Le problème vient du fait que req est une variable globale donc chaque fonction la modifie et personne ne s'y retrouve. Le comportement aléatoire est dû au temps aléatoire d'exécution de chaque requête, donc si ta 2e fonction est lancée alors que la 1re a reçu son résultat, ça passe, sinon, ça foire :aie:

La solution est d'avoir un objet XMLHttpRequest distinct pour chaque fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
function initRequest(url) {
    var req = null;
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } 
    else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return req;
}
 
function checkForMessages() {
    var url = "http://192.168.0.10:8080/EMI/ModulePooling/messages";
    var req = initRequest(url);
    req.onreadystatechange = processReqMessages;
    req.open("GET", url, true);
    req.send(null);
}
 
// callback
function processReqMessages() {
	var select = window.document.getElementById("messages");
	if (req.readyState == 4) {
        if (req.status == 200) {
        	select.innerHTML = "";
        	var message = "";
			var elements = req.responseXML.getElementsByTagName("message");
			for(var i=0;i<elements.length;i++){
				message += elements[i].firstChild.nodeValue+ "<br />";
			}
			select.innerHTML += message + "<br />";
        }
        else{
         select.innerHTML += "Erreur de reception <br />";
        }
		// sleep de 5s et on repart
        setTimeout("checkForMessages()", 5000);
    }
}
 
function checkForCapteurs() {
    var url = "http://192.168.0.10:8080/EMI/ModulePooling/capteurs";
    var req = initRequest(url);
    req.onreadystatechange = processReqCapteurs;
    req.open("GET", url, true);
    req.send(null);
}
 
// callback
function processReqCapteurs() {
	var select = window.document.getElementById("alarms");
	if (req.readyState == 4) {
        if (req.status == 200) {
        	select.innerHTML = "";
        	var message = "";
        	var elements = req.responseXML.getElementsByTagName("capteur");
			for(var i=0;i<elements.length;i++){
				message += "<tr><td>"+elements[i].firstChild.nodeValue+"</td></tr>";
			}
			select.innerHTML = "<table class=\"t2\"><tbody>" + message + "</tbody></table>";
        }
        else{
         select.innerHTML += "Erreur de reception <br />";
        }
		// sleep de 5s et on repart
        setTimeout("checkForCapteurs()", 5000);
    }
}
 
function checkForCommandes() {
    var url = "http://192.168.0.10:8080/EMI/ModulePooling/commandes";
    var req = initRequest(url);
    req.onreadystatechange = processReqCommandes;
    req.open("GET", url, true);
    req.send(null);
}
 
// callback
function processReqCommandes() {
	var select = window.document.getElementById("commandes");
	if (req.readyState == 4) {
        if (req.status == 200) {
        	select.innerHTML = "";
        	var message = "";
			var elements = req.responseXML.getElementsByTagName("commande");
			for(var i=0;i<elements.length;i++){
				message += elements[i].firstChild.nodeValue+"<br />";
			}
			select.innerHTML += message + "<br />";
        }
        else{
         select.innerHTML += "Erreur de reception <br />";
        }
		// sleep de 5s et on repart
        setTimeout("checkForCommandes()", 5000);

L'astuce ici est que chaque fonction initialise une variable req locale et comme la fonction callback a accès au contexte de la fonction qui l'appelle, donc req sera bien défini, mais différent à chaque appel.

J'ai pas testé le code mais ça devrait fonctionner, sinon, essaye en passant l'objet req à ton callback :

Code:

req.onreadystatechange = function(){processReqMessages(req);}

27/09/2009, 11h14
tiamat

Salut Bovino,

merci de ta réponse, ça marche effectivement bien mieux ;-) je n'ai plus de comportement aléatoire et ça tourne parfaitement.

par contre je voulais savoir si l'usage de ce genre d'échange est il couteux en perf et peut être y a t'il un autre moyen plus optimisé ?

en tout cas merci je passe en résolu.

Tiamat.
27/09/2009, 12h24
Bovino

Disons qu'en général, appeler une fonction Ajax au chargement de la page peut indiquer une erreur de conception dans la mesure où il est préférable et plus optimisé de faire ce genre de traitement directement coté serveur.
27/09/2009, 15h25
tiamat

tout à fait d'accord avec toi mais qu'en est il d'une page qui se doit de garder un contenu mis à jour régulièrement ?

si j'utilise une mise à jour coté serveur (par le biais d"une servlet et forward sur une page JSP), je perds le coté dynmique et suis obligé de forcer des refresh de ma page.

c'est clair je je préfèrerais être en mode PUSH plutot qu'en mode PULL, mais je ne crois pas que l'on puisse le faire...