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 :
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 :
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 :
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 :
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 .
17/08/2011, 14h34
Ajax jQuery PHP
00
