[AJAX] Passage de Javascript vers AJAX : besoin de qqes conseils !

Version imprimable

Voici mon code javascript classic :
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 <html> <HEAD> <link rel="stylesheet" href="css/style.css" TYPE="text/css"> <script> function ChangeColor(index, color) { document.getElementById("MyFont" + index).color=color } function ChangeTexte(index, HTML) { document.getElementById("MyText" + index).innerHTML = HTML } </script> </HEAD> <BODY BACKGROUND="./img/fond.gif"> <?php $ip_address='10.10.10.10'; $host_equipment=localhost'; $ini_array = parse_ini_file("../config/conf.ini"); echo ' <table border=1> <tr> <td>IP address</td> <td>Host</td> <td>Traceroute</td> </tr> <tr> <td><FONT id="MyFont1">'.$ip_address.'</FONT></td> <td><FONT id="MyFont2">'.$host_equipment.'</FONT></td> <td><FONT id="MyFont3"><SPAN id="MyText1"></SPAN></FONT></td> </tr> </table> '; ?> </body> </html> <?php //PREMIERE ACTION $ping=ping ($ini_array,$ip_address); $color1=""; if (ereg ("!", $ping)) {$color1="#00D500";} else{$color1="#FF0000";} echo '<script>'; echo ("ChangeColor(1,'$color1');\n"); echo '</script>'; flush(); //DEUXIEME ACTION $fping2=`fping $host_equipment`; $color2=""; if (ereg ("unreachable", $fping2)) {$color2="#FF0000";} else{$color2="#00D500";} echo '<script>'; echo ("ChangeColor(2,'$color2');\n"); echo '</script>'; flush(); //TROISIEME ACTION $resultat=""; $color3=''; if($color1=="#00D500" & $color2=="#00D500"){ $traceroute=traceroute($ini_array,$host_equipment,$ip_address,$type); if(ereg("traceroute",$traceroute)){ $r=split("\n",$traceroute); foreach($r as $l){ if(preg_match('/^ 2|^ 2/',$l,$matches)){$text="Nb HOPS > 1";$color3="#FF0000";break;} else{$text="OK";$color3="#00D500";} } } else{$text="ERROR";$color3="#FF0000";} } else{$text="NO PING";$color3="#FF0000";} echo '<script>'; echo ("ChangeColor(3,'$color3');\n"); echo ("ChangeTexte(1,'$text');\n"); echo '</script>';
Explication :
1ere ACTION : change la couleur dans :

Code:

<td><FONT id="MyFont1">'.$ip_address.'</FONT></td>

2eme ACTION change la couleur dans :

Code:

<td><FONT id="MyFont2">'.$host_equipment.'</FONT></td>

3eme ACTION change le texte et la couleur dans :

Code:

<td><FONT id="MyFont3"><SPAN id="MyText1"></SPAN></FONT></td>

Maintenant, ce que j'aimerais faire en AJAX :
ca serait d'afficher mon tableau dans un 1er temps.
Puis, envoyer une reqête HTTP pour la 1ere action, puis la seconde et enfin la 3eme.
Mais, normallement, la requête HTTP est lancé grâce à une action sur un bouton, mais dans mon cas, il n'y a pas d'action.

Comment pourais-je procéder pour modifier mon code en AJAX ?

Pour ceux qui se demande pour quelle raison je souhaite modifier ce code, c'est qui fonctionne très bien, sauf quand il y a un proxy entre le client et le serveur.
En effet, lorsqu'il y a un proxy, le browser attend d'avoir le résultat des 3 actions avant d'afficher le tableau.
Les 3 actions étant assez longue, je suis dans l'obligation d'afficher tout de suite afin que l'utilisateur puisse obtenir les informations demandées tout de suite.

:merci: d'avoir tout lu et pour vos futurs conseils !!!

05/07/2006, 19h34
bkill
ben tu n'es pas obligé d'avoir un bouton pour lancer une action Javascript.
Tu pourrais très bien placer tout en bas de page
Code:

1 2 3 4 5 6 7 8 9 <html> <body> .... <script> doAJAXstuff(); </script> </body> </html>
et exécuter tes appels dans cette fonction. Elle serait donc lancée "automatiquement".
Il y a aussi l'event onload du tag body qui pourrait faire l'affaire, mais pour ne pas dire de bêtises, je ne sais plus à quel moment intervient cet event (soit lorsque le body est complètement chargé, soit lorsqu'il commence à se charger - si qqn peut répondre à ca directement, c'est cool)

Et si je puis me permettre une petite précision par rapport à ton sujet de post:
"Passage de Javascript vers AJAX"
AJAX, ce n'est jamais que du javascript ;)

Alors voilà mon script :

Coté Client :

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
 
<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
<html>
	<head>
		<script type='text/JavaScript'>
			var xhr = null; 
 
	 		function getXhr(){
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				getXhr()
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						innerHTML=xhr.responseText);
					}
				}
				xhr.open("GET","ajax.php",true);
				xhr.send(null);
			}
		</script>
	</head>
	<body>
<?php
 
$ip_address='10.10.10.10';
$host_equipment='localhost';
$ini_array = parse_ini_file("../config/conf.ini");
 
echo'
<table border=1>    
        <tr>
            <td>IP address</td>
            <td>Host</td>
            <td>Traceroute</td>
        </tr>
        <tr>
            <td><FONT id="MyFont1">'.$ip_address.'</FONT></td>
            <td><FONT id="MyFont2">'.$host_equipment.'</FONT></td>
            <td><FONT id="MyFont3"><SPAN id="MyText1"></SPAN></FONT></td>
        </tr>
    </table>';
?>
 
		<input type='button' value='Test Ping' onclick='go()' />
 
	</body>
</html>

Coté serveur : fichier ajax.php
A l'intérieur, il y a une fonction qui renvoie la valeur suivante :

Code:

1
2
 
<script>ChangeColor(1,'#00D500');</script>

J'ai vérifié, xhr.responseText contient bien <script>ChangeColor(1,'#00D500');</script>

ChangeColor() permet de changer la couleur du contenu de la 1ere cellule du tableau lorsque l'on appuie sur le bouton.

Cela ne fonctionne pas, mais je ne vois pas pourquoi !

De plus, j'aimerais que l'appel à la fonction s'effectue après le chargement de la page et non pas par une action sur un bouton. Auriez-vous une idée sur la question ?

20/08/2007, 14h30
alexag

Pourquoi le javascript de responsetext ne marche pas

Ben, j'ai galéré moi aussi... et j'ai trouvé !

En fait, les balises script sont ignorées lors du parsing de responsetext. J'avais cru qu'un paramétrage sioux permettrait de forcer cette exécution, mais c'était instable suivant les navigateurs.

Du coup, j'ai codé, à réception de mon XHR:
- recherche de paires de balises script dans la réponse
- extraction des instructions
- chargement du nouveau contenu
- eval des instructions js trouvées.

Il est important de charger le contenu AVANT l'eval, car il y a fort à parier que ton js va utiliser des éléments servis par le XHR.

Ca paraît compliqué, mais c'et assez simple. J'avais tenté un truc élégant avec des RegExp, mais jamais réussi à faire accepeter <script type="text/javascript"> comme pattern dans le constructeur RegExp :nono:

T'façon, 6-joint un sample.

Citation:

// Utilisation de XHR ?
XHR = true;
function xmlHTTP(xUrl,xId) {
if (!XHR){
try{
document.getElementById(xId).innerHTML = "XHR disabled...";
}catch (e){
alert("BUG: "+xId+" n'a pu être rechargé,\n car ce n'est pas un élément de la page !");
}
document.location = xUrl;
return;
}
document.body.style.cursor = 'wait';
var xmlhttp = false;

/*@cc_on @*/

/*@if (@_jscript_version >= 5)

// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.

try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

/*@end @*/

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}

try{
xmlhttp.open("GET", xUrl, true);
xmlhttp.onreadystatechange =
function() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status == 200 || xmlhttp.status == 302) /* 200 ou 302: codes HTTP pour OK */{
newHTML = xmlhttp.responseText;
}else{
newHTML = "Error "+xmlhttp.status+" ("+xmlhttp.statusText+") for url <b>"+xUrl+"</b>";
}
document.body.style.cursor = 'default';
try{
var m = newHTML;
mScripts = "";
endTag = "</script>";
while (m.indexOf("<script") >=0) {
pD = m.indexOf("<script");
pF = m.indexOf(endTag,pD);

p = m.substr(pD,pF-pD);
// concaténation des scripts
if (p.indexOf("src=") == -1){
pDF = m.indexOf(">", pD) + 1;
var p = m.substr(pDF,pF-pDF-1);
mScripts = mScripts + p;
}
// Suppression du script de la réponse reçue
m = m.substr(0,pD) + m.substr(pF+endTag.length);
}

document.getElementById(xId).innerHTML = newHTML;

// Exécution des scripts APRES chargement , au cas où le script utilise des éléments chargés
eval(mScripts);
}catch (e){
alert("BUG: "+xId+" n'a pu être rechargé:\n"+e.message+", script:"+mScripts);
}
document.body.style.cursor = 'default';
}else{
newHTML = '<H3 align="center">Loading, please wait...</H3>';
document.getElementById(xId).innerHTML = newHTML;
}
}
xmlhttp.send(null);
}catch (e){
alert('An error has occurred calling the external site: '+e);
document.body.style.cursor = 'default';
return false;
}
}

Ca s'utilise avec un div dont id="commeTuVeux", et un appel js xmlHTTP("tonURLxhr","commeTuVeux");

Bon Ajax !