Exemple simple avec ajax et php
J'ai Windows Vista, mon navigateur est Google, et je teste tout sur Wamp.
J'ai cherché à faire 1 exemple simple à partir d'indications données dans des forums.
Dans le fichier html d'appel, dès le clic sur 1 bouton on lance 1 requête Ajax qui appelle 1 script php dont le résultat doit s'afficher dans 1 div de la page d'appel.
Le script php tout simple renvoie la date et l'heure. Le nom du fichier php est scriptPhpReponse_a_Ajax.php
Code:
1
2
3
4
5
6
7
8
|
<?php
$reponse=date("d/m/Y H:i:s");
//envoi de la réponse à Ajax
//echo $reponse;
?> |
Le fichier html que j'ai reconstitué est exemple_ajax.html. Il y a des commentaires d'origine plus quelques uns des miens.
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1">
<title>Exemple simple</title>
</head>
<body>
<input type="button" name="rafraichir" id="rafraichir" value="rafraichir"
onclick="requete_Ajax('scriptPhpReponse_a_Ajax.php','zone_messages';" />
<br />
<div id="zone_messages"><!-- ici sera écrit la réponse, c a d les mesages envoyes par le script php --></div>
<script type="text/javascript">
// fonctions Ajax ///
function getXMLHttpRequest(){
// soit cette fonction soit celle en commentaire ci dessous pour test navigateur
var XHR = false;
try {
XHR = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (err2) {
try {
XHR = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (err3) {
try {
XHR = new XMLHttpRequest();
}
catch (err1)
{
XHR = false;
}
}
}
return XHR;
}//fin fonction getXMLHttpRequest
/*
function getXMLHttpRequest(){
var XHR = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
XHR = new XMLHttpRequest();
if (XHR.overrideMimeType) {
XHR.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur,
//juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
XHR = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!XHR) {
alert('Abandon : Impossible de créer une instance XMLHTTP');
return false;
}
return XHR;
}
*/
// --------------------------------------------------------------------------
// fonction requette Ajax, celle appellée par evenemnt onclick dans la page
function requete_Ajax(url,id_resultat) {
//lors de l'appel de la fonction, arguments passés: l'url du script php a appeler, et l'id du div où on va écrire la réponse
//création de la requette
var XHR = getXMLHttpRequest();
//var XHR = new XMLHttpRequest(); si on supprime la fonction getXMLHttpRequest pour essai avec navigateur Google
XHR.open('POST', url, true);
//changer le type MIME de la requête pour envoyer les données avec la méthode POST ,
//!!!! cette ligne doit etre absolument apres XHR.open('POST'....
XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//on définit ce qu'on doit faire lorsqu'on recevra la réponse du script php
XHR.onreadystatechange = function (){traitement_reponse(XHR,id_resultat);};//fin instruction xhr.onreadystatechange
//je préfère la methode POST à GET
//XHR.open('POST', url, true);
//envoi de la requette vers le script php, a noter que tu peux si besoin lui envoyer une ou plusieurs valeurs
XHR.send(null);
};//fin fonction requete_Ajax
//fonction qui va traiter la réponse dès changement etat
function traitement_reponse(XHR,id_resultat){
//on verifie que la reponse est bien completement reçue
if(XHR.readyState == 0 ){alert('toto');}
if(XHR.readyState == 4 ){
if(XHR.status == 200) {
// cas avec reponse de PHP en mode text
var reponse=XHR.responseText;
///TEST
// et la on peut pour les tests visualiser dans une boite d'alert la réponse
alert("reponse du script PHP: "+reponse);
/// fin TEST
//on ecrit la réponse dans le div par un innerHTML
document.getElementById(id_resultat).innerHTML=reponse;
}
}
}//fin fonction traitement reponse
</script>
</body>
</html> |
Il ne se passe rien au clic.
J'ai cherché à simplifier le script, en supprimant la fonction de test du navigateur (inutile selon moi avec Google). Le nouveau script est
exemple_ajax_1.html
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
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1">
<title>Exemple simple</title>
</head>
<body>
<input type="button" name="rafraichir" id="rafraichir" value="rafraichir"
onclick="requete_Ajax('scriptPhpReponse_a_Ajax.php','zone_messages';" />
<br />
<div id="zone_messages"><!-- ici sera écrit la réponse, c a d les mesages envoyes par le script php --></div>
<script type="text/javascript">
// fonction requette Ajax, celle appellée par un evenemnt dans la page
//on passe à la fonction l'adresse du script php à executer et le div dans la page ou le resultat sera affiché
function requete_Ajax(url,id_resultat) {
var XHR = new XMLHttpRequest(); //d'après moi, pas besoin de test navigateur
//si on navigue avec Google
XHR.open('POST', url, true);
XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//on définit ce qu'on doit faire lorsqu'on recevra la réponse du script php
XHR.onreadystatechange = function (){//on attend le resultat envoyé par le script php
if(XHR.readyState == 4 && XHR.status == 200){
// cas avec reponse de PHP en mode text
var reponse=XHR.responseText;
///TEST
// et la on peut pour les tests visualiser dans une boite d'alert la réponse
alert("reponse du script PHP: "+reponse);
/// fin TEST
//on ecrit la réponse dans le div par un innerHTML
document.getElementById(id_resultat).innerHTML=reponse;
}
};// fin fonction onreadystate
XHR.send(null); // La requete est prete, on l'envoie
}// fin fonction requete_Ajax
</script>
</body>
</html> |
J'aimerais bien connaître d'ou vient l'erreur. Inutile pour moi d'aller plus loin si je ne comprends pas 1 exemple si simple. Merci de vos conseils.
