Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > Javascript > AJAX et l'échange de données en JavaScript > Les techniques AJAX > L'objet XMLHttpRequest > Lecture du tutoriel

L'objet XMLHttpRequest

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
 Auteur : Thunderseb
Note : 18 / 20 (6 votes)
Visualisations : 7 289

Plus d'informations Plus d'informations
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant

Introduction

Le principe de fonctionnement d'XMLHttpRequest est d'envoyer une requête HTTP vers le serveur, et une fois la requête envoyée, les données renvoyées par le serveur peuvent être récupérées. Pour ce faire, il faut disposer d'un objet disposant de cette fonctionnalité. Cet objet a été développé par Microsoft et implémenté dans Outlook puis Internet Explorer 5.5 en tant qu'ActiveX. Microsoft l'avait à l'époque nommé XMLHTTP.

Par la suite, les autres navigateurs suivirent et implémentèrent un objet appelé XMLHttpRequest. Cet objet fut implémenté avec les mêmes méthodes que celle d'XMLHTTP de Microsoft. Plus tard, XMLHttpRequest fut proposé au W3C en vue de devenir un standard.

A l'heure actuelle, les navigateurs récents (IE7, FF2, Opera 9, Safari...) implémentent tous cet objet.

Pour la suite du tutoriel, j'abrégerai XMLHttpRequest par XHR, c'est quand même plus simple ^^ .


Quelques liens



Instancier un objet XHR

Pour instancier (créer) un objet XHR, on procède de la même façon que pour n'importe quel objet JavaScript, avec le mot clé new :

Code : JavaScript
1
var xhr = new XMLHttpRequest();


Les versions d'Internet Explorer inférieures à la version 7 requièrent toujours une instanciation via un contrôle ActiveX. Il y a deux façons d'instancier un objet XHR avec un contrôle ActiveX et elles dépendent de la version d'XMLHTTP utilisée. Pour faire simple, on va utiliser un try...catch, l'instanciation indiquée dans le try étant la plus récente :

Code : JavaScript
1
2
3
4
5
try {
        var xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e)  {
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}


Pour faire un script homogène, rassemblons ce code en un seul, en prenant soin de tester la prise en charge des différentes méthodes d'instanciation :

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var xhr;
if(window.XMLHttpRequest || window.ActiveXObject) {
        if(window.XMLHttpRequest) {
                xhr = new XMLHttpRequest(); 
        }
        else { // Internet Explorer <7
                try {
                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } catch(e) {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
        }
}
else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return;
}

Envoi d’une requête HTTP

Avant d'envoyer une requête, il faut la préparer. Dans un premier temps, il convient de définir quelle sera l'action à effectuer quand le serveur aura répondu à cette requête. Pour ce faire, on utilise la propriété onreadystatechange, en lui affectant une fonction à exécuter :

Code : JavaScript
1
xhr.onreadystatechange = fonctionDeCallback;


Vous pouvez aussi utiliser une fonction anonyme et y placer du code à exécuter, ce sera plus pratique, comme nous le verrons plus tard :

Code : JavaScript
1
2
3
xhr.onreadystatechange = function() {
        // Instructions
}


Maintenant que la requête est prête, on peut l'envoyer. On va d'abord définir les modalités d'envoi, avec la méthode open. Ensuite, on envoie avec la méthode send :

Code : JavaScript
1
2
xhr.open("GET", "pageDeTraitement.php", true);
xhr.send(null);


Le premier argument de la méthode open est la méthode d'envoi : GET ou POST. Le deuxième argument est l'url de la page à laquelle la requête sera envoyée, et pour finir, le dernier argument est le mode de communication asynchrone. Si on met true, le reste du code JS sera exécuté sans attendre la réponse du serveur (la valeur par défaut est false).

Si vous n'êtes pas familiers avec synchrone et asynchrone, j'explique tout ça dans la partie facultative qui suit ;) .


Si vous utilisez la méthode POST, vous devez absolument changer le type MIME de la requête avec la méthode setRequestHeader, sinon le serveur ignorera la requête :

Code : JavaScript
1
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


Cette dernière ligne doit être placée après la ligne contenant la méthode open !


De plus, vous devez spécifier les variables qui seront envoyées, au moyen de l'argument de la méthode send. La chaîne de variables doit être de cette forme :

Code : JavaScript
1
xhx.send("sennomparam1=valeurparam1&nomparam2=valeurparam2");


Si vous utilisez la méthode GET, il n'y a pas besoin de spécifier les variables dans le send. Mettez null, et définissez vos variables directement dans l'adresse de la page appelée, comme ceci :

Code : JavaScript
1
2
xhr.open("GET", "pageDeTraitement.php?sennomparam1=valeurparam1&nomparam2=valeurparam2", true);
xhr.send(null);


Notez qu'il ne faut pas oublier d'encoder les caractères, avec une fonction globale comme encodeURIComponent, afin de ne pas avoir de problèmes avec les caractères spéciaux et accentués.

Requêtes synchrones et asynchrones

Cette partie est une parenthèse concernant les modes d'exécutions synchrones et asynchrones ;) .


Quand un programme ou un script s'exécute, il appelle les différentes instructions dans l'ordre dans lequel elles sont placées :

Code : JavaScript
1
2
3
var plop = 0; // première instruction
plop += 2;    // deuxième
alert(plop);  // et troisième


Maintenant, imaginons qu'il y ait un appel de fonction :


Code : JavaScript
1
2
3
var plop = 0;                // première instruction
plop = additionner(plop, 2); // deuxième
alert(plop);                 // et troisième


Quand la fonction additionner est appelée, le script principal se met en pause, et attend que la fonction soit exécutée, et qu'elle ait renvoyé une valeur (si elle ne renvoie rien, c'est pareil ^^ ).

On dit que le script est exécuté de façon synchrone : quand un appel externe au script principal est réalisé, le script en attend la réponse ou la fin de l'exécution.

Le contraire de synchrone est asynchrone. Quand un appel est asynchrone, le script principal n'attend pas d'avoir reçu les données pour continuer. Evidemment, si mon exemple synchrone marche bien avec des fonctions, il ne marche pas si le script est asynchrone ^^ ; imaginons donc une requête AJAX !

Le script s'exécute et rencontre une requête XMLHttpRequest, envoyée en mode asynchrone. Dans ce cas, la requête est envoyée, mais le script n'attend pas que la requête ait abouti, il continue quoiqu'il arrive. L'intérêt est que si la requête met quelques secondes à être traitées par le serveur, le script n'est pas ralenti.

Mais si la requête est envoyée et que le script n'attend pas sa réponse, comment savoir quand cette requête renvoie quelque chose ?


Bonne question. Et c'est ici qu'interviennent les fonctions dites de callback. Une fonction callback est exécutée quand la requête aboutit à quelque chose (que son traitement est fini). Et c'est cette fonction de callback qui va se charger de récupérer les données renvoyées par la requête.

Ainsi, quand la requête est envoyée, le script continue son exécution, et quand la requête renvoie quelque chose, c'est la fonction de callback qui est appelée, et c'est elle qui va faire "suite" au script principal, en traitant les informations renvoyées :) .

La réponse du serveur

A chaque changement d'état dans le traitement de la requête, la fonction définie dans la propriété onreadystatechange est appelée. Au cours du traitement, la requête change plusieurs fois d'état, et onreadystatechange est déclenché à chacun de ces changements.

Pour détecter l'état de la requête, nous allons utiliser la propriété readyState. Il y a 5 états différents :



En vue de ces différents états, seul l'état 4 nous intéresse vraiment. En effet, la réception des données renvoyées par le serveur est terminée, et nous pouvons alors appeler une fonction qui s'occupera de traiter les données reçues : la fonction de callback.

Cela dit, nous devons aussi vérifier le code d'état (comme le fameux code 404 pour les pages non trouvées ou le code 500 pour l'erreur de serveur) de la requête, pour vérifier si tout s'est bien passé. Pour cela, on utilise la propriété status. Si elle vaut 200 ou 0 (aucune réponse, pratique pour les tests en local, sans serveur d'évaluation), tout est OK. Ainsi, notre condition de vérification peut s'écrire comme ceci :

Code : JavaScript
1
2
3
4
5
xhr.onreadystatechange = function() { 
        if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                alert("OK"); // On va s'occuper des données reçues
        }
}


Les données renvoyées par le serveur sont désormais accessibles via deux propriétés :


Code : JavaScript
1
2
3
4
5
xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                alert(xhr.responseText);
        }
}

Exemple simple

On va mettre en place un système qui va envoyer deux variables, Pseudo et Prenom, à une page PHP, qui va les renvoyer. La requête sera de méthode GET, la réception se fait au format texte, et est affichée via une boîte alert.

La page HTML contenant le JavaScript :

Code : JavaScript
 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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Techniques AJAX - Exemple simple</title>
<script type="text/javascript">
<!-- 
function makeRequest() {
 
        var xhr;
        if(window.XMLHttpRequest || window.ActiveXObject) {
                if(window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                } 
                else {
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
        }
        else {
                alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
                return;
        }
        
        xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                        alert(xhr.responseText);
                }
        } 
        
        var pseudo = encodeURIComponent(document.getElementById("input_pseudo").value);
        var prenom = encodeURIComponent(document.getElementById("input_prenom").value);
        xhr.open("GET", "example_xhrsimple.php?Pseudo=" + pseudo + "&Prenom=" + prenom + "", true);
        xhr.send(null);
        
}
//-->
</script>
</head>
<body>
<p>
        <label for="input_pseudo">Pseudo : </label>
        <input type="text" id="input_pseudo" />
        <br />
        <label for="input_prenom">Prénom : </label>
        <input type="text" id="input_prenom" />
        <br /><br />
        <input type="button" onclick="makeRequest();" value="Envoyer" />
</p>
</body>
</html>


Voici maintenant le code très simple de la page PHP :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?php 
 
header("Content-Type: text/plain");
if(isset($_GET['Pseudo']) && isset($_GET['Prenom']) && $_GET['Pseudo'] != "" && $_GET['Prenom'] != "") {
        echo "Votre pseudo est ".$_GET['Pseudo'].", et vous vous appelez ".$_GET['Prenom']." !";
} else {
        echo "Mauvaise saisie";
}
 
?>


Toute la gestion du XHR est placée dans la fonction makeRequest. Ça marche très bien, mais ce n'est pas très pratique car si on met en place plusieurs systèmes XHR, il faut réécrire le code d'instanciation. C'est répétitif et inutile.

Fonction d'instanciation

Pour se simplifier la vie, il est généralement conseillé d'utiliser une même fonction pour l'instanciation de l'objet XHR. Une fois cette instanciation faite, on peut alors manipuler l'objet et l'utiliser comme on le veut.

La fonction d'instanciation peut s'écrire comme ceci :

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
function getXMLHttpRequest() {
        var xhr = null;
 
        if(window.XMLHttpRequest || window.ActiveXObject) {
                if(window.ActiveXObject) {
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                } else {
                        xhr = new XMLHttpRequest();
                }
        } else {
                alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
                return null;
        }
 
        return xhr;
}

Reprise de l'exemple

Avec la fonction d'instanciation, notre premier exemple peut être recodé de cette façon :

La fonction d'instanciation est placée dans le fichier oXHR.js, pour plus de lisibilité, et pour pouvoir être utilisé un peu partout sans devoir recopier la fonction.


Code : JavaScript
 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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Techniques AJAX - Exemple simple</title>
<script type="text/javascript" src="oXHR.js"></script>
<script type="text/javascript">
<!-- 
function sendData() {
        var xhr = getXMLHttpRequest();
 
        if(xhr && xhr.readyState != 0) {
                xhr.abort(); 
        }
 
        xhr.onreadystatechange = function() { 
                if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                        document.getElementById("loading").innerHTML = "";
                        getData(xhr.responseText); 
                } else if(xhr.readyState == 2 || xhr.readyState == 3) {
                        document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";
                }
        }
 
        var pseudo = encodeURIComponent(document.getElementById("input_pseudo").value);
        var prenom = encodeURIComponent(document.getElementById("input_prenom").value);
        xhr.open("GET", "XMLHttpRequest_1.php?Pseudo=" + pseudo + "&Prenom=" + prenom + "", true);
        xhr.send(null);
}
 
function getData(sData) {
        alert(sData);
}
//-->
</script>
</head>
<body>
<div id="loading"></div>
<p>
        <label for="input_pseudo">Pseudo : </label>
        <input type="text" id="input_pseudo" />
        <br />
        <label for="input_prenom">Pr&eacute;nom : </label>
        <input type="text" id="input_prenom" />
        <br /><br />
        <input type="button" onclick="sendData();" value="Envoyer" />
</p>
</body>
</html>


Comme c'est un peu plus complet que l'exemple précédent, j'en profite pour introduire la méthode abort, qui annule la requête si celle-ci était déjà en cours d'exécution. Ainsi, si l'utilisateur envoie plusieurs fois de suite la requête et si la requête précédente était toujours en cours de traitement, elle est annulée et remplacée par la nouvelle.

Je profite aussi de l'occasion pour introduire une information de chargement. Le <div> avec l'id loading sert de conteneur dans lequel j'affiche, via un innerHTML un message qui informe le visiteur que la requête est en train d'être traitée. Quand le traitement est fini, j'efface le message. Vous pouvez, au lieu d?un message, afficher une image de chargement (comme ceci : Image utilisateur). Je peux vous conseiller ce site qui permet d'en générer : http://www.ajaxload.info/.

Exemple des listes liées

Pour terminer cette partie sur l'objet XMLHttpRequest, je vais vous montrer un exemple concret d'utilisation : les listes déroulantes liées.

Principe



Une première liste déroulante est affichée, proposant à l'utilisateur de choisir un éditeur de logiciels (c'est pour l'exemple). Quand l'utilisateur choisit un éditeur, on récupère, via XHR, la liste des logiciels qui correspondent à cet éditeur, et on l'affiche dans une deuxième liste déroulante.

La liste des éditeurs et des logiciels est enregistrée dans une base de données. Dans mon exemple, j'utilise une base mySQL. Voici d'ailleurs les requêtes SQL pour créer les deux tables que je vais utiliser :

Code : SQL
 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
CREATE TABLE IF NOT EXISTS `ajax_example_editors` (
  `id` tinyint(4) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) collate latin1_general_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=7 ;
 
INSERT INTO `ajax_example_editors` (`id`, `name`) VALUES
  (1, 'Adobe'),
  (2, 'Macromedia'),
  (3, 'Microsoft'),
  (4, 'Mozilla'),
  (5, 'ACDSystem'),
  (6, 'Apple');
 
CREATE TABLE IF NOT EXISTS `ajax_example_softwares` (
  `id` tinyint(4) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) collate latin1_general_ci NOT NULL,
  `idEditor` tinyint(4) DEFAULT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=21 ;
 
INSERT INTO `ajax_example_softwares` (`id`, `name`, `idEditor`) VALUES
  (1, 'Photoshop', 1),
  (2, 'GoLive', 1),
  (3, 'InDesign', 1),
  (4, 'Acrobat', 1),
  (5, 'Dreamweaver', 2),
  (6, 'Flash', 2),
  (7, 'ColdFusion', 2),
  (8, 'FlashPaper', 2),
  (9, 'Silverlight', 3),
  (10, 'Internet Explorer', 3),
  (11, 'Office', 3),
  (12, 'Visual Studio', 3),
  (13, 'Camino', 4),
  (14, 'Firefox', 4),
  (15, 'Rhino', 4),
  (16, 'Thunderbird', 4),
  (17, 'ACDSee Photo Editor', 5),
  (18, 'ACDSee Photo Manager', 5),
  (19, 'iTunes', 6),
  (20, 'Safari for Windows', 6);


La page HTML



En réalité, ce sera une page PHP, car je vais utiliser un script PHP pour afficher la liste des éditeurs dans la liste déroulante :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div id="programBox">
        <div id="loading"></div>
        <div id="editors">
                <select id="editorsSelect" onchange="selectEditor(this);">
                        <option value="none">Selection</option>
                        <?php
                                mysql_connect($hote, $login, $password);
                                mysql_select_db($bdd);
                                $query = mysql_query("SELECT * FROM ajax_example_editors ORDER BY name") or exit(mysql_error());
                                        while($back = mysql_fetch_assoc($query)) {
                                                echo "\t\t\t\t<option value=\"".$back["id"]."\">".$back["name"]."</option>\n";
                                }
                        ?>                      
                </select>
        </div>
        <div id="softwares">
                <select id="softwaresSelect"></select>
        </div>
</div>


Du côté du code JavaScript pour envoyer la requête, c'est assez simple. Voici la fonction selectEditor, appelée via l'évènement onchange de l'élément <select>. Cette fonction se charge d'envoyer la requête.

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function selectEditor(oElem) {
 
        var xhr = getXMLHttpRequest();
        var value =  oElem.options[oElem.selectedIndex].value;
        if(value != "none") {
                if(xhr && xhr.readyState != 0) {
                        xhr.abort(); 
                } 
 
                xhr.onreadystatechange = function() { 
                        if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                                makeList(xhr.responseXML);
                                document.getElementById("loading").innerHTML = "";
                        } else if(xhr.readyState == 2 || xhr.readyState == 3) {
                                document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";
                        }
                }
 
                xhr.open("POST", "example_softwares_get.php", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send("IdEditor=" + value);
        }
        
}


La fonction makeList sera appelée et se chargera de remplir le <select> avec la liste des logiciels. J'en reparlerai après le code PHP.

La page de traitement PHP



Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php 
                
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>";
echo "<select>";
 
if(isset($_POST['IdEditor']) && $_POST['IdEditor'] != "") {
        $idEditor = htmlentities($_POST['IdEditor']);
        mysql_connect($hote, $login, $password);
        mysql_select_db($bdd);
        $query = mysql_query("SELECT * FROM ajax_example_softwares WHERE idEditor=".$idEditor." ORDER BY name");
        while($back = mysql_fetch_assoc($query)) {
                echo "<option value=\"".$back["id"]."\">".$back["name"]."</option>\n";
        }
}
 
echo "</select>";
 
?>


C'est une simple récupération de base de données avec PHP. Il faut juste bien penser à formater comme étant du XML :

Code : PHP
1
header("Content-Type: text/xml");


Et s'arranger pour produire une structure XML valide !
Ici j'utilise les mêmes éléments (<select> et <option>) qu'en HTML, mais j'aurais pu prendre n'importe quoi d?autre.

Récupération du XML



J'aurais très bien pu récupérer les données au format texte et les afficher avec un innerHTML. Mais comme tripatouiller le DOM c'est assez amusant, j'en profite !

Voici donc la fonction makeList qui analyse les données XML et recrée les éléments <option> de la liste déroulante :

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function makeList(oData) {
        var oOptions = oData.getElementsByTagName("option");
        var oSelect  = document.getElementById("softwaresSelect");
        
        oSelect.innerHTML = "";
        for(var i=0,c=oOptions.length;i<c;i++) {
                var oOption = document.createElement("option");
                oOption.value = oOptions[i].getAttribute("value");
                oSelect.appendChild(oOption);
                oOption.innerHTML = oOptions[i].firstChild.nodeValue;
        }
}


Le code complet



Code : JavaScript
 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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Techniques AJAX - Listes liées</title>                    
<script type="text/javascript" src="oXHR.js"></script>
<script type="text/javascript">
<!-- 
function selectEditor(oElem) {
 
        var xhr = getXMLHttpRequest();
        var value =  oElem.options[oElem.selectedIndex].value;
        if(value != "none") {
                if(xhr && xhr.readyState != 0) {
                        xhr.abort(); 
                } 
                xhr.onreadystatechange = function() { 
                        if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                                makeList(xhr.responseXML);
                                document.getElementById("loading").innerHTML = "";
                        } else if(xhr.readyState == 2 || xhr.readyState == 3) {
                                document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";
                        }
                }
 
                xhr.open("POST", "example_softwares_get.php", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send("IdEditor=" + value);
        }
 
}
 
function makeList(oData) {
        var oOptions = oData.getElementsByTagName("option");
        var oSelect  = document.getElementById("softwaresSelect");
        
        oSelect.innerHTML = "";
        for(var i=0,c=oOptions.length;i<c;i++) {
                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="selectEditor(this);">
                                <option value="none">Selection</option>
                                <?php
                                        mysql_connect($hote, $login, $m_d_p);
                                        mysql_select_db($bdd);
                                        $query = mysql_query("SELECT * FROM ajax_example_editors ORDER BY name");
                                        while($back = mysql_fetch_assoc($query)) {
                                                echo "\t\t\t\t<option value=\"".$back["id"]."\">".$back["name"]."</option>\n";
                                        }
                                ?> 
                        </select>
                </div>
                <div id="softwares">
                        <select id="softwaresSelect"></select>
                </div>
        </div>
</fieldset>
</body>
</body>
</html>

Propriétés et méthodes

Pour terminer, voici une vue globale des propriétés et méthodes qui s'appliquent à l'objet XMLHttpRequest.

Les propriétés



Propriétés de l'objet XMLHttpRequest
DisponibilitéDescription
onreadystatechange Tous Propriété exécutée à chaque changement d'état d ela requête
readyState Tous Etat de la requête, à vérifier au sein du onreadystatechange pour savoir où en est le traitement de la requête
responseText Tous Réponse du serveur, au format texte
responseXML Tous Réponse du serveur, au format XML
status Tous Code de réponse du serveur (200, 404, 500...)
statusText Tous Le message associé à status
timeout IE8, non-W3C Permet de définir un time-out


Les méthodes



Méthodes de l'objet XMLHttpRequest
DisponibilitéDescription
abort Tous Annule la requête en cours d'exécution
getAllResponseHeaders Tous - IE7 Récupère la liste complète des en-têtes de la requête
getResponseHeader Tous - IE7 Récupère l'en-tête de la requête
open Tous Définit les modalités d'envoi de la requête
overrideMimeType Tous sauf IE, non-W3C Permet de forcer le type MIME de la requête
send Tous Envoie la requête
setRequestHeader Tous Ajoute un en-tête HTTP manuellement

Conclusion

XMLHttpRequest est sans conteste le système AJAX qui offre le plus de marge de manœuvre, mais il se révèle lourd à déployer.

Points forts




Points faibles


Chapitre précédent Sommaire Chapitre suivant
Retour en haut Retour en haut


Créé : le 26/03/2008 à 17:20:34
Modifié : le 22/08/2008 à 15:51:30
Avancement : 100%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 100 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0725s (0.0603s)