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
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="FR">
<head>
<title>Ajax-php-POST</title>
<script type="text/javascript" src="creation-requete-ajax.js"></script>
<!-- Style de la div -->
<style type="text/css">
#maDiv{
background-color:yellow;
with:200pt;
}
</style>
<!-- Script AJAX qui récupère un fichier text est le met dans une div -->
<script type="text/javascript">
function getResponseText(){
//Création de requête HTTP
var requeteHTTP = creerRequeteAjax();
//Si requête créée correctement
if(requeteHTTP){
//Positionnement sur le champ titre
var oTitre = document.getElementById("idTitre");
//Récupérer la valeur du champ titre
oTitre = oTitre.value;
//Positionnement sur la dv
var oDiv = document.getElementById("maDiv");
//Définir la méthode d'envoie de la requeête et le type de communication
requeteHTTP.open('POST','ajax-php-post.php',true);
//Appel de la fonction callback, lorsque que le serveur renvoie une réponse
requeteHTTP.onreadystatechange = function () {
//Test l'état d'avacement de la requête et les ressouces disponibles
if((requeteHTTP.readyState == 4) && (requeteHTTP.status == 200)){
//Modifier le contenu de la DIV
//Définir l'entête HTTP
requeteHTTP.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //Modifier la valeur de la div
oDiv.innerHTML = requeteHTTP.responseText;
}
}
//Définir les paramètres du send
var params = "titre=" + oTitre;
params = escape(params);
//Envoie de la requête
requeteHTTP.send(params);
}
}
</script>
</head>
<body>
<h1>REQUET AJAX AVEC PHP </h1>
<h2>Utilisation responseTexte avec un fichier php</h2>
<h4>Méthode POST</h4>
<div id="maDiv">
<form form="frmTest">
<input id="idTitre" name="txtTitre" type="text" size="10"/>
<input name="bttGo" type="button" value="GO" onclick="getResponseText();"/>
</form>
</div>
</body>
</html> |
