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> |
Exemple simple avec ajax et php
Répondre avec citation
Partager