+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Demande d'aide pour script AJAX/Javascript (/showthread.php?tid=1198)
Demande d'aide pour script AJAX/Javascript - Alchern - 21-05-2007
Bonjour,
j'ai lu le très bon tutoriel de Kevin sur l'utilisation de Javascript (ou ajax) pour gérer l'augmentation en temps réel des ressources, sans avoir à recharger la page. J'ai bien réussi a l'appliquer à mon projet, toutefois, ce script ne marche que pour une seule ressources.
Imaginons qu'on veuille afficher la variation de la quantité de la ressource pétrole , pour reprendre son exemple, mais aussi, en même temps, la variation de son prix (exemple stupide je sais, mais c'est juste pour illustrer). Après m'être documenté un peu pour le xmlhttprequest, je crois comprendre qu'elle renvoit en fait une chaine de caractéres ou un xml. Or dans notre cas, je voudrais qu'elle renvoit une chaine de caractère mais contenant 2 informations (quantité de pétrole, prix) et ceci en l'affichant dans 2 balises différentes (2 champs d'un tableau par exemple). Et c'est là, que je sèche. J'ai essayé d'executer par le script java, 2 fichiers php chacun renvoyant une information, mais ça n'a pas marché. Je pense à une autre solution, c'est d'exécuter 2 scripts js chacun faisant appel à un fichier php qui renvoit chacun une valeur, mais ça peut être lourd, je pense.
Donc, je voudrais savoir si quelqu'un a une idée pour qu'un script JS renvoit 2 données chacun dans une balise html différente.
Merci pour vos réponses.
RE: Demande d'aide pour script AJAX/Javascript - Nessper - 21-05-2007
Si tu passe une variable de plus à ton script ça marche pas ?
RE: Demande d'aide pour script AJAX/Javascript - Roworll - 21-05-2007
Lorsque je souhaite mettre à jours plusieurs champs suite à l'éxécution d'un appel Ajax, je passe par JS et Eval().
Par exemple, je renvoie la chaine
Code PHP :
<?php
<script language="javascript" type="text/javascript">
document.getElementById('zone1').innerHTML=valeur1;
document.getElementById('zone2').innerHTML=valeur2;
</script>
Code PHP :
<?php
<script language="javascript" type="text/javascript">
eval(valeur_de_retour)
</script>
RE: Demande d'aide pour script AJAX/Javascript - Alchern - 21-05-2007
Roworll, le souci c'est que ton code d'applique à la récupération de données qui sont dans des champs html or je voudrais récuperer 2 sorties de mysql, c'est à dire, 2 echos envoyés par un fichier php.
RE: Demande d'aide pour script AJAX/Javascript - Roworll - 22-05-2007
Heu oui... Ca ne pose aucun problème.
L'exemple que j'ai donné est hyper basique mais peut se décliner pour s'adapter à ton soucis.
Je développe un peu.
Voici un bout de code qui pourrait correspondre au fichier PHP appelé par Ajax
Code PHP :
<?
//Connexion à la DB
...
//Récupération des infos
$rsPetrole=mysql_query(.....);
$rsArgent=mysql_query(.....);
$lnPetrole=mysql_fetch_assoc($rsPetrole);
$lnArgent=mysql_fetch_assoc($rsArgent);
echo "document.getElementById('zone1').innerHTML=".$lnPetrole['quantite'];
echo "document.getElementById('zone2').innerHTML=".$lnArgent['quantite'];
?>RE: Demande d'aide pour script AJAX/Javascript - Alchern - 22-05-2007
Hum, ça ne semble pas fonctionner. Pour faciliter, je mets le code, je me suis peut être trompé quelque part (je ne maitrise pas encore le javascript)
donc le fichier html basique censé afficher l'évolution des ressources avec 2 balises div:
Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Augmentation des ressources sans actualiser</title>
<script type="text/javascript" src="ajax.js">
eval(xhr_object.responseText);
</script>
</head>
<body onload="window.setTimeout('resRequest()',5000)">
<div id="resId1">
</div>
<div id="resId2">
</div>
<br />
</body>
</html>Là, je ne pense pas qu'il y ait de souci
Ensuite le fichier php:
Code PHP :
<?php
mysql_connect('localhost', 'root', ''); // On se connecter à la BDD
mysql_select_db('test'); // On sélectionne la BDD ressources
$res1 = mysql_query('SELECT * FROM `ressources` WHERE name="petrole"'); // On fait une requete du pétrole
$rows1 = mysql_fetch_array($res1); // On fait un array de la requete
$newvaleur = $rows1['valeur'] + 10;
$newcout = $rows1['cout'] + 10;
mysql_query('UPDATE ressources SET valeur="'.$newvaleur.'", cout="'.$newcout."' WHERE name="petrole"');
echo "document.getElementById('resId1').innerHTML=".$newvaleur['quantite'];
echo "document.getElementById('resId2').innerHTML=".$newpetrole['quantite'];
?>et finalement le fichier javascript:
Code :
/** On verifie si le navigateur accepte le XMLHttpRequest **/
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("GET", "multiple.php", true)
xhr_object.onreadystatechange = function() { // Si le readyState change alors on execute ce qui est en bas
if(xhr_object.readyState == 4 && xhr_object.status == 200)
{
//document.getElementById("resId1").innerHTML = xhr_object.responseText;
}
}
xhr_object.send(null); // On envoie rien car on utilise pas la méthode POST
window.setTimeout('resRequest()',5000); // On appelle cette fonction tout es les 1000millisecondes qui vaut 1secondes.
}RE: Demande d'aide pour script AJAX/Javascript - Roworll - 22-05-2007
En effet, il y a un soucis.
Le Eval doit remplacer la partie de la fonction existant dans le onReadyStateChange.
Je reprends ton exemple.
Pour la partie HTML
Code PHP :
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Augmentation des ressources sans actualiser</title>
<script type="text/javascript" src="ajax.js">
//Le eval ici ne sert à rien tu peux le virer
//eval(xhr_object.responseText);
</script>
</head>
<body onload="window.setTimeout('resRequest()',5000)">
<div id="resId1">
</div>
<div id="resId2">
</div>
<br />
</body>
</html>
Le code PHP, on y touche pas. Il me semble correct.
Le dernier fichier par contre
Code PHP :
<?php
/** On verifie si le navigateur accepte le XMLHttpRequest **/
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("GET", "multiple.php", true)
xhr_object.onreadystatechange = function() { // Si le readyState change alors on execute ce qui est en bas
if(xhr_object.readyState == 4 && xhr_object.status == 200)
{
//document.getElementById("resId1").innerHTML = xhr_object.responseText;
// c'est ici que le eval se déclenche.
// Il va évaluer le code retourné par PHP dont la valeur se trouve dans xhr_object.responseText.
eval(xhr_object.responseText);
}
}
xhr_object.send(null); // On envoie rien car on utilise pas la méthode POST
window.setTimeout('resRequest()',5000); // On appelle cette fonction tout es les 1000millisecondes qui vaut 1secondes.
}
RE: Demande d'aide pour script AJAX/Javascript - Alchern - 22-05-2007
Merci pour ton code, c'est déjà plus clair dans ma tête mais ça ne marche toujours pas. Il y avait un petit bug dans le fichier php au niveau des guillemets mais j'ai corrigé. Mais ça ne marche toujours pas. Je me demande si ça ne vient pas d'une mauvaise gestion de l'affichage dans les id. D'ailleurs, je viens de lire qu'on peut mettre qu'un seul attribut id par page html, or là, j'en ai mis 2. Est- ce que je peux remplacer id par class?
Après test, avec un seul id et un seul echo qui renvoit dans cet id, ça ne semble par marcher non plus.
RE: Demande d'aide pour script AJAX/Javascript - Roworll - 22-05-2007
Alors un truc utile pour débuguer de l'Ajax :
Utiliser la fonction Alert sur le responseText.
Si je reprends la fonction onReadyStateChange
Code PHP :
<?php
xhr_object.onreadystatechange = function() { // Si le readyState change alors on execute ce qui est en bas
if(xhr_object.readyState == 4 && xhr_object.status == 200)
{
//on regarde ce que la fonction a renvoyé
//Si il y a des erreurs PHP, elle apparaitront dans le Alert().
alert(xhr_object.responseText);
//Execution du code retourné.
//ca peut planter si le contenu de xhr_object.responseText est incompréhensible par Javascript
eval(xhr_object.responseText);
}
}
Ca devrait plutôt ressembler à
Code PHP :
<?php
echo "document.getElementById('resId1').innerHTML='".$newvaleur['quantite']."';";
echo "document.getElementById('resId2').innerHTML='".$newpetrole['quantite']."';";
Pour cette histoire d'id, tu peux avoir plusieurs id par page (heureusement d'ailleurs).
Par contre, il faut que chaque id soit unique sur la page sinon les éventuels code JS qui utilisent cet id risquent de se mélanger les pinceaux.
Enfin, en cas de code Javascript qui plante, il se peut que ton navigateur te retourne des erreurs. Sur ce point, Firefox est plus performant que Internet Explorer.
RE: Demande d'aide pour script AJAX/Javascript - Alchern - 22-05-2007
Apparament, il y a bien un souci quelque part car alert ne fait pas apparaitre de fenêtre contenant les strings. Il doit y avoir un problème de communication entre fichiers.
Edit. Ce problème est résolu (une parenthèse qui trainait....bref)
J'ai donc bien la fenêtre d'erreur qui s'affiche et qui comporte le message :
document.getElementById('resId1').innerHTML=";";
"document.getElementById('resId2').innerHTML=";";
Apparament les variables php ne sont pas passées
Edit bis. l'appel au script php se fait bien, car les tables mysql sont correctement incrémentés.
Donc en fait le seul souci c'est le voyage des echos php vers le html