[AJAX] Ajax jQuery PHP

**pit0n** · 17/08/2011, 15h34

Bonjour j'ai suivi le livre de Mr JM Defrance mais j'ai un problème avec un atelier , le 10-5 :

Il s'agit d'une double requête asynchrone :

le fichier gainCumul.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<?php
session_start();
//indique que le type de la réponse renvoyée au client sera du Texte
header("Content-Type: text/plain ; charset=utf-8");
//anti Cache pour HTTP/1.1
header("Cache-Control: no-cache , private");
//anti Cache pour HTTP/1.0
header("Pragma: no-cache");
//simulation du  temps d'attente du serveur (2 secondes)
sleep(2);
//recuperation du parametre nom
if(isset($_REQUEST['nom'])) $nom=$_REQUEST['nom'];
else $nom="inconnu";
//calcul du nouveau gain entre 0 et 100 Euros
if(isset($_SESSION[$nom])) $resultat = $_SESSION[$nom];
else $resultat=0;
//envoi de la réponse à la page HTML
echo $resultat ;
?>

le fichier gainAleatoire.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<?php
session_start();
//indique que le type de la réponse renvoyée au client sera du Texte
header("Content-Type: text/plain ; charset=utf-8");
//anti Cache pour HTTP/1.1
header("Cache-Control: no-cache , private");
//anti Cache pour HTTP/1.0
header("Pragma: no-cache");
//simulation du  temps d'attente du serveur (2 secondes)
sleep(2);
//recuperation du parametre nom
if(isset($_REQUEST['nom'])) $nom=$_REQUEST['nom'];
else $nom="inconnu";
//calcul du nouveau gain entre 0 et 100 Euros
$gain =  rand(0,100);
//mémorise le gain en session
$_SESSION[$nom]+=$gain;
//print_r($_SESSION);//pour les tests uniquement
//mise en forme le résultat avec le nom 
$resultat=$nom.':'.$gain;
//envoi de la réponse à la page HTML
echo $resultat ;
?>

Le fichier fonctionsMachine.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
 
// JavaScript Document
window.onload=testerNavigateur;
//-----------------------------
function testerNavigateur() { 
    objetXHR = creationXHR();
	if(objetXHR==null) {
		document.getElementById("button").disabled= true;
		var erreurNavigateur="Erreur Navigateur : Création d'objet XHR impossible";
		remplacerContenu("info", erreurNavigateur);
	    document.getElementById("info").style.visibility="visible";
		return null
	}
	//démarrage de l'affichage automatique du cumul des gains
	cumul();
}
//###########################MOTEUR AJAX N°1  (requête du gain aléatoire) 
function jouer() {   
	 //verif si nom du joueur est bien saisi
	 document.getElementById("nom").style.backgroundColor="white";//init couleur champ
	 var nom=document.getElementById("nom").value;
	 if(nom==""){
	   //-------------change la couleur du champ
	   document.getElementById("nom").style.backgroundColor="red";
	   //-----------affiche message Alert
	   alert("Attention : vous devez saisir votre nom avant de jouer");
	   return null;
	 }
	 //création d'un objet XHR multi-navigateurs
	 objetXHR = creationXHR();
	 var temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
	 //construction de la chaine des parametres
	 var parametres = "nom="+ codeContenu("nom") +
	                  "&anticache="+temps ;
	 //Config. objet XHR
     objetXHR.open("get","gainAleatoire.php?"+parametres, true); 
	 objetXHR.onreadystatechange = actualiserPage;//désignation de la fonction de rappel
	 //gestion du bouton et du chargeur
	 document.getElementById("button").disabled= true;
	 document.getElementById("charge").style.visibility="visible";
     objetXHR.send(null);//envoi de la requete
	 /*---------------------------------------- */
  }
  function actualiserPage() {
	if (objetXHR.readyState == 4) {//test si le résultat est disponible
	 if (objetXHR.status == 200) {
	   var nouveauResultat = objetXHR.responseText.split(":");//recup du résulat > tableau 
	   //actualisation du résultat
	   remplacerContenu("resultat", decodeURI(nouveauResultat[1]));
	   //actualisation du nom
	   remplacerContenu("gagnant", decodeURI(nouveauResultat[0]));
	   //affiche la zone info
	   document.getElementById("info").style.visibility="visible";
	   //gestion du bouton et du chargeur
	   document.getElementById("button").disabled= false;
	   document.getElementById("charge").style.visibility="hidden";
	 }else{
	   //message d'erreur serveur
	   var erreurServeur="Erreur serveur : "+objetXHR.status+" – "+ objetXHR.statusText;
	   remplacerContenu("info", erreurServeur);
	   document.getElementById("info").style.visibility="visible";
	   //gestion du bouton et du chargeur
	   document.getElementById("button").disabled= false;
	   document.getElementById("charge").style.visibility="hidden";
	   //annule la requete en cours
	   objetXHR.abort();
	   objetXHR=null;
	   }
	 }
  }
//###########################MOTEUR AJAX N°2  (actualisation du cumul des gains) 
function cumul() {   
	 objetXHR2 = creationXHR();//création d'une requete uniquement pour FireFox
     var temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
	 var parametres = "nom="+ codeContenu("nom") +
	                  "&anticache="+temps ;
	 objetXHR2.open("get","gainCumul.php?"+parametres, true); //Config. requete GET 
	 objetXHR2.onreadystatechange = actualiserCumul;//désignation de la fonction de rappel
     document.getElementById("charge2").style.visibility="visible";
	 objetXHR2.send(null);//envoi de la requete
	 //---------------------------------------
	 setTimeout("cumul()",6000);//timer de 6 s
  }
function actualiserCumul() {
   if (objetXHR2.readyState == 4) {//test si le résultat est disponible
	if (objetXHR2.status == 200) {
     var cumulGain = objetXHR2.responseText;//recup du résulat renvoyé par le serveur
	 remplacerContenu("cumul", cumulGain);
	 document.getElementById("charge2").style.visibility="hidden";
	 }
   }
 }

Les fonctions Ajax.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
// JavaScript Document
 function creationXHR() {
   var resultat=null;
   try {//test pour les navigateurs : Mozilla, Opéra, ...
	    resultat= new XMLHttpRequest();
     } 
     catch (Error) {
     try {//test pour les navigateurs Internet Explorer > 5.0
     resultat= new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (Error) {
         try {//test pour le navigateur Internet Explorer 5.0
         resultat= new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (Error) {
            resultat= null;
         }
     }
  }
return resultat;
}
//------------Fonctions de gestion du DOM (solution alternative à innerHTML)
function remplacerContenu(id, texte) {
  var element = document.getElementById(id);
  if (element != null) {
    supprimerContenu(element);
    var nouveauContenu = document.createTextNode(texte);
    element.appendChild(nouveauContenu);
  }
}
 
function supprimerContenu(element) {
if (element != null) {
    while(element.firstChild)
        element.removeChild(element.firstChild);
   }
}
//--------------Fonctions encodage
//code en UTF8, la valeur d'un élément dont id passé en parametre
function codeContenu(id) { 
	var valeur=document.getElementById(id).value;
	return encodeURIComponent(valeur);
}

Lors de la première saisie du nom dans le champ du formulaire et apres envoi des données j'ai ceci qui s'affiche au dessus du formulaire :

Bravo, M <br /> <font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'> <tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color vous avez gagné #cc0000;

firebug me parle de TextNode mais je n'ai aucune idée sur comment résoudre ce problème .

Merci pour vos lanternes .

**andry.aime** · 17/08/2011, 16h35

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 objetXHR.open("get","gainAleatoire.php?"+parametres, true); 
	 objetXHR.onreadystatechange = function(){actualiserPage(objetXHR)};
.......
function actualiserPage(objetXHR)

Il en est de même pour les autres.
Et

(objetXHR.status == 200)

remplace par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(objetXHR.status == 200 || objetXHR.status == 0)

A+.

**pit0n** · 18/08/2011, 17h45

Merci , mais cela n'y change rien

le problème vient de l'utilisation de $_SESSION dans le fichier gainAleatoire.php
(enfin je pense) car depuis l'utilisation des sessions j'ai un problème d'affichage
lors de la première saisie . L'erreur que j'ai notifié plus haut apparaît Uniquement lors de la première saisie et apres envoi avec le bouton jouer();

[AJAX] Ajax jQuery PHP

AJAX

Vue hybride

Discussions similaires

Partager

Partager