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
125
126
127
128
129
130
131
132
133
134
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Techniques AJAX - XMLHttpRequest</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="oXHR.js"></script> <!-- INSTANCIER OBJET HXR = fichier oXHR -->
<script type="text/javascript">
<!--
function request(oSelect) //REQUETE (oSelect) qui sera appelée via l'évenement onchange <select id="editorsSelect" onchange="request(this);">. Cette fonction se charge d’envoyer la requête
{
var xhr = getXMLHttpRequest();
var value = oSelect.options[oSelect.selectedIndex].value;
if(value != "none")
{
if(xhr && xhr.readyState != 0)
{
xhr.abort();
}
xhr.onreadystatechange = function() // CHANGEMENT D'ETAT
{
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) // LE SERVEUR A FINI SON TRAVAIL ET TOUTES LES DONNEES SONT RECEPTIONNEES + status 200 ou 0 = ok
{
readData(xhr.responseXML); // Function "readData" sera appelée et se chargera de remplir le <select id="softwaresSelect"> avec la liste des logiciels. VOIR le code PHP.
document.getElementById("loader").style.display = "none"; // si condition ok = ne pas faire apparaître l'image d'attente
}
else if (xhr.readyState < 4) // si réception en cours = attente (plus simple : mettre un texte "<p> Traitement en cours </p>";")
{
document.getElementById("loader").style.display = "inline"; // APPEL DE LOADER = APPARITION D'UNE IMAGE POUR L'ATTENTE
}
};
xhr.open("POST", "XMLHttpRequest_getListData.php", true); // DEFINIR LES MODALITES D'ENVOI
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // CHANGER LE TYPE MIME DE LA REQUETE SINON SERVEUR IGNORERA LA REQUETE
xhr.send("idEditor=" + value); // ENVOI EN SPECIFIANT LES VARIABLES DANS L'ARGUMENT SEND
}
}
function readData(oData) // Récupération du XML : fonction readData qui analyse les données XML et recrée les éléments <option> de la liste déroulante
{
var oOptions = oData.getElementsByTagName("option"); // RECUPERATION DES DONNEES DE LA REQUETE SQL DANS FICHIER XMLHttpRequest_getListData.php - tag <option.....> : je crois == à confirmer ??
var oSelect = document.getElementById("softwaresSelect"); // VARIABLE ATTRIBUTION POUR INSERT id=softwaresSelect
var oOption, oSelect;
oSelect.innerHTML = "";
for (var i=0, c=oOptions.length; i<c; i++) // boucle pour récupérer toutes les données
{
var oOption = document.createElement("option");
oOption.value = oOptions[i].getAttribute("value");
oSelect.appendChild(oOption);
oOption.innerHTML = oOptions[i].firstChild.nodeValue
}
}
//-->
</script>
</head>
<body>
<fieldset>
<legend>Programmes</legend>
<div id="programBox">
<div id="loading"></div>
<div id="editors">
<select id="editorsSelect" onchange="request(this);">
<option value="none">Selection</option>
<?php
$mysqli = new mysqli('localhost', 'root', '', 'test');
if ($mysqli->connect_errno)
{
echo "Echec de la connexion: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
exit();
}
$result = $mysqli->query("SELECT * FROM ajax_example_editors");
if (!$result)
{
die('<p>ERREUR Requête invalide :' .$mysqli->error.'</p>');
}
while ($row = $result->fetch_assoc())
{
echo "\t\t\t\t<option value=\"" .$row["id"]. "\">" .$row["name"]."</option>\n";
}
?>
</select>
<span id="loader" style="display: none;"><img src="http://www.gif-maniac.com/gifs/53/53358.gif" alt="loading" /></span>
</div>
<div id="softwares">
<select id="softwaresSelect"></select>
</div>
</div>
</fieldset>
</body>
</html> |
