AJAX et l'objet XmlHttpRequest
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
AJAX et l'objet XmlHttpRequest
Sommaire
I- Introduction ---------------------------------------------------------------------------------------------------- P.1
II- Requêtes synchrones et asynchrones ------------------------------------------------------------------ P.2
III- L'objet XmlHttpRequest ----------------------------------------------------------------------------------- P.2
IV- Utilisation de l'objet ---------------------------------------------------------------------------------------- P.3
V- Premier exemple --------------------------------------------------------------------------------------------- P.4
VI- Passer des paramètres au script PHP ------------------------------------------------------------------ P.6
VII- Interroger une base de données------------------------------------------------------------------------ P.10
VIII- Conclusion --------------------------------------------------------------------------------------------------- P.16
I- Introduction
L’AJAX (Asynchronous Javascript And XML) et un concept permettant de faire des appels asynchrones
au serveur depuis le client. Lors de ces appels, le serveur retournera du XML qui sera « récupéré »
par javascript et traité.
Ceci peut être utile lorsque l’on veut exécuter un script PHP sans recharger la page en entière (pour
par exemple interroger la base de données au fur et à mesure d’une saisie dans une textBox).
En effet, le langage JavaScript est exécuté du côté client et non serveur, c’est là que tout se joue,
pour exécuter un script PHP, le code JavaScript fera appel au script PHP, récupèrera les informations
retournés par celui-ci et les affichera. Ce code sera exécuté du côté client, donc aucun rechargement
de la page.
Voici plusieurs possibilités de l’AJAX :
-Insérer données dans une base.
-Listes déroulantes liées.
-Contrôle de formulaire.
-Modification du contenu de la page en cours
-etc…
1II- Requêtes synchrones et asynchrones
Avant de rentrer dans les détails, il faut savoir ce qu’est une requête synchrone et asynchrone, ou du
moins connaitre la différence entre les deux.
Comme son nom l’indique, AJAX permet d’envoyer des requêtes asynchrones au serveur, mais il peut
très bien envoyer des requêtes synchrones. Pour choisir entre les 2, c’est le troisième paramètre de
la méthode open() (voir chapitre 3- Utilisation de l’objet) qui gère cela.
Le mode asynchrone est surement celui qui est utilisé le plus souvent, en effet celui-ci permet de ne
pas figer la page lorsque le script php s’exécute et communique avec le serveur.
Au contraire, le mode synchrone lui fige la page le temps que le script s’exécute. Ce mode est donc
réservé pour de petits scripts, qui ne mettront pas longtemps à s’exécuter. En cas de doute, il vaut
mieux utiliser l’asynchrone.
III- L'objet XmlHttpRequest
AJAX utilise un composant embarqué dans maintenant la plupart des navigateurs Web. En fonction
de ceux-ci, il peut y avoir un comportement varié, voir un résultat non voulu (inutile de rappeler que
dans le développement Web, il faut vérifier que tout soit fonctionnel sur différent navigateur..).
Pour utiliser AJAX, nous allons donc utiliser un objet XmlHttpRequest qui va nous permettre de faire
des requêtes http pour échanger du XML avec le serveur.
Code :
//Création de l’objet XmlHttpRequest
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
2On peut constater que Internet Exporer se démarque des autres, en effet, celui-ci utilise ActivX,
néanmoins aucun message de sécurité ne sera affiché pour ce genre de script.
IV- Utilisation de l'objet
Nous avons donc créé notre objet nommé xhr prêt à être utilisé, pour cela, nous avons à disposition
différentes propriétés et méthodes :
open(« methode », « url »,flag)
Description : Ouvre la connexion avec le serveur.
-Methode : « GET » ou « POST ».
-url : l’url vers le script php en question (si methode GET, les paramètres doivent être fournis
dans l’url).
-flag : true pour un dialogue asynchrone, sinon false.
setRequestHeader(« nom », « valeur »)
Description : Assigne une valeur à un header HTTP qui sera envoyé lors de la requête.
Par exemple pour un POST :
-nom : « Content-Type »
-valeur : « application/x-www-form-urlencoded »
send(« parametre »)
Description : Envoi la requête au serveur
-parametre : null pour méthode GET
-parametre : « nomparam1=valeurparam1&nomparam2=etc.. » pour méthode POST
abort()
Description : Abandonne la requête
onreadystatechange
Description : Ici, on va lui affecter une fonction à nous qui sera exécutée à chaque changement
d’état de notre objet.
readyState
Description : C’est cette propriété qui sera testé dans onreadystatechange. Elle représante l’état
de l’objet :
0 : non initialisé.
1 : Ouverture (open() vien de s’exécuter).
2 : Envoyé (send() vient de s’exécuter).
3 : En cours (La requête est envoyée, en attente de la réponse du serveur).
4 : Prêt (toutes les données sont chargées).
3status
Description : C’est le code de la réponse du serveur
200 : OK
404 : Page non trouvée
Etc..
statusText
Description : Message
ssage associé à status.
responseText
Description : Réponse retournée par le serveur, au format texte.
responseXML
Description : Réponse retournée par le serveur, au format XML.
V- Premier exemple
Maintenant que nous avons vu les différentes méthodes et propriétés, un petit exemple s’impose. Le
but de cet exemple est basique : on clique sur un bouton, celui
celui ci utilise AJAX pour exécuter un script
PHP, le résultat est affiché sous forme d'alert().
La compréhension du code n'est pas très compliqué :
index.html
Tuto AJAX [DevBBS]
/**
* Construction de l’objet
*/
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){
ow.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Mi
ActiveXObject("Microsoft.XMLHTTP");
}
}
4else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr()
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}
}
xhr.open("GET","ajax.php",true);
xhr.send(null);
}
ajax.php :
Script PHP tout con mais cela montre bien que celui ci est exécuté sans rechargement de page.
A noter qu’il n’y a pas besoin de recharger index.html après avoir modifié le script PHP. Celui-ci
étant rappelé à chaque clique sur le bouton, il sera rafraichi.
5VI- Passer des paramètres au script PHP
Il est bien entendu possible de passer des paramètres au script PHP, afin que son exécution le rendre
plus dynamique. On a vu les différentes méthodes et propriétés mis à notre disposition pour utiliser
notre objet, vous avez peut être déjà compris comment on enverra nos paramètre .
Pour une méthode GET :
Pour passer des paramètre à la méthode GET, nous allons utiliser la méthode open(). Pour rappel :
open(« methode », « url »,flag)
Description : Ouvre la connexion avec le serveur.
-Methode : « GET » ou « POST ».
-url : l’url vers le script php en question (si methode GET, les paramètres doivent être fournis
dans l’url).
-flag : true pour un dialogue asynchrone, sinon false.
Le passage des paramètres se fait donc via l’url (rien d’extraordinaire je le sais ^^). Imaginons une
textBox d’id param. Pour envoyer le contenu de cette textBox nous procèderons come suit :
Code :
var param = document.getElementById("param").value;
var url = "ajax.php?p=";
xhr.open("GET",url+param,true) ;
xhr.send(null);
Simple non ?
Voici la nouvelle function appel_ajax() :
Code :
function appel_ajax(){
var xhr = getXhr()
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
//Ici sera afficher le résultat
de notre script PHP ajax.php
alert(xhr.responseText);
}
}
var param = document.getElementById("param").value;
var url = "ajax.php?p=";
6xhr.open("GET",url+param,true) ;
xhr.send(null);
}
Il est aussi possible d’ajouter un paramètre à la fonction appel_ajax(), par exemple :
Code :
function appel_ajax(param){
var xhr = getXhr()
[…]
var url = "ajax.php?p=";
xhr.open("GET",url+param,true) ;
xhr.send(null);
}
Pour une méthode POST :
Pour envoyer des paramètre avec la méthode POST c’est la fonction send() qui nous intéresse :
send(« parametre »)
Description : Envoi la requête au serveur
-parametre : null pour méthode GET
-parametre : « nomparam1=valeurparam1&nomparam2=etc.. » pour méthode POST
Rien de bien compliqué, il suffit de remplir le paramètre de la méthode send() par le(s) paramètre(s)
voulu :
Code :
var param = document.getElementById("param").value;
var url = "ajax.php";
xhr.open("POST",url,true) ;
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("param="+param);
Attention toutefois à bien définir la propriété setRequestHeader lorsque l’on veut envoyer des
paramètres par la méthode POST, c’est la seul différence qu’il y a avec la méthode GET.
7Codes de ces exemples :
index.html
Tuto AJAX [DevBBS]
/**
* Construction de l’objet
*/
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function appel_ajax(){
var xhr = getXhr()
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
//Ici sera afficher le résultat
de notre script PHP ajax.php
alert(xhr.responseText);
}
}
if(document.formMeth.methode[0].checked){//Methode GET
var param = document.getElementById("param").value;
var url = "ajax.php?p=";
xhr.open("GET",url+param,true) ;
xhr.send(null);
}
if(document.formMeth.methode[1].checked){//Methode POST
8var param = document.getElementById("param").value;
var url = "ajax.php";
xhr.open("POST",url,true) ;
xhr.setRequestHeader('Content-Type','application/x-www-form-
urlencoded');
xhr.send("param="+param);
}
}
Choisissez une methode : GETPOST
Paramètre :
ajax.php
9VII- Interroger une base de données
Nous allons voir maintenant comment interroger une base de données grâce à AJAX, et donc sans
recharger la page.
Rien ne vaut un petit exemple pour bien comprendre.
Créez une base de données nommée « ajaxdevbbs » et exécutez ce code SQL (ceci afin de créer et
remplir les tables qui nous seront utiles pour l’exemple) :
Code :
-- phpMyAdmin SQL Dump
-- version 2.10.1
-- http://www.phpmyadmin.net
--
-- Serveur: localhost
-- Généré le : Mer 01 Avril 2009 à 15:58
-- Version du serveur: 5.0.45
-- Version de PHP: 5.2.5
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Base de données: `ajaxdevbbs`
--
-- --------------------------------------------------------
--
-- Structure de la table `doc`
--
CREATE TABLE `doc` (
`id` int(2) NOT NULL auto_increment,
`id_rub` int(2) NOT NULL,
`doc` varchar(100) NOT NULL,
`url` varchar(150) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=21 ;
--
-- Contenu de la table `doc`
--
INSERT INTO `doc` (`id`, `id_rub`, `doc`, `url`) VALUES
(1, 1, 'Du bon usage de la Piraterie.pdf', 'ftp://hackbbs.org/U.C.H-
Publications/Du%20bon%20usage%20de%20la%20Piraterie.pdf'),
(2, 1, 'L''Ethique Hacker.pdf', 'ftp://hackbbs.org/U.C.H-
10Publications/L%27Ethique%20Hacker.pdf'), (3, 1, 'Le Chemin vers Hackerdom.pdf', 'ftp://hackbbs.org/U.C.H- Publications/Le%20Chemin%20vers%20Hackerdom.pdf'), (4, 1, 'Les Lois de Murphy.pdf', 'ftp://hackbbs.org/U.C.H- Publications/Les%20Lois%20de%20Murphy.pdf'), (5, 1, 'Libre comme dans Liberte.pdf', 'ftp://hackbbs.org/U.C.H- Publications/Libre%20comme%20dans%20Liberte.pdf'), (6, 1, 'Un Manifeste Hacker.pdf', 'ftp://hackbbs.org/U.C.H- Publications/Un%20Manifeste%20Hacker.pdf'), (7, 2, 'Cours Algorithmie et C BTS IRIS.rar', 'ftp://hackbbs.org/Documentation%20C/Cours%20Algorithmie%20et%20C%20BTS%20IRIS.rar'), (8, 2, 'Initiation au langage C.pdf', 'ftp://hackbbs.org/Documentation%20C/Initiation%20au%20langage%20C.pdf'), (9, 2, 'O''Reilly - The C Programming Language.pdf', 'ftp://hackbbs.org/Documentation%20C/O%27Reilly%20- %20The%20C%20Programming%20Language.pdf'), (10, 3, 'Les Bases du Langage C# (Cours Hackbbs - vodkanux)', 'ftp://hackbbs.org/Documentation%20C%23/Les%20Bases%20du%20Langage%20C%23%20(Cou rs%20Hackbbs%20-%20vodkanux).doc'), (11, 3, 'O''Reilly - Programming C#.pdf', 'ftp://hackbbs.org/Documentation%20C%23/O%27Reilly%20-%20Programming%20C%23.pdf'), (12, 4, 'Java 2 - The Complete Reference - Osborne Mcgraw-Hill.pdf', 'ftp://hackbbs.org/Documentation%20Java/Java%202%20- %20The%20Complete%20Reference%20-%20Osborne%20Mcgraw-Hill.pdf'), (13, 5, 'Debian.GNU-Linux.Bible.pdf', 'ftp://hackbbs.org/Documentation%20Linux/Debian.GNU- Linux.Bible.pdf'), (14, 5, 'Firewall_GNU_Linux.pdf', 'ftp://hackbbs.org/Documentation%20Linux/Firewall_GNU_Linux.pdf'), (15, 5, 'GCC The Complete Guide Reference.pdf', 'ftp://hackbbs.org/Documentation%20Linux/GCC%20The%20Complete%20Guide%20Reference. pdf'), (16, 5, 'Linux and Unix Commands.pdf', 'ftp://hackbbs.org/Documentation%20Linux/Linux%20and%20Unix%20Commands.pdf'), (17, 5, 'M?mo Administrateur.pdf', 'ftp://hackbbs.org/Documentation%20Linux/M%C3%83%C2%A9mo%20Administrateur.pdf'), (18, 5, 'M?mo Shell.pdf', 'ftp://hackbbs.org/Documentation%20Linux/M%C3%83%C2%A9mo%20Shell.pdf'), (19, 6, 'Advanced_Python_programming.pdf', 'ftp://hackbbs.org/Documentation%20Python/Advanced_Python_programming.pdf'), (20, 6, 'Python.pdf', 'ftp://hackbbs.org/Documentation%20Python/Python.pdf'); -- -------------------------------------------------------- -- -- Structure de la table `rubrique` -- CREATE TABLE `rubrique` ( `id` int(2) NOT NULL auto_increment, `rub` varchar(30) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; 11
-- -- Contenu de la table `rubrique` -- INSERT INTO `rubrique` (`id`, `rub`) VALUES (1, 'U.C.H-Publications'), (2, 'Documentation C'), (3, 'Documentation C#'), (4, 'Documentation Java'), (5, 'Documentation Linux'), (6, 'Documentation Python'); Nous avons 2 tables dans notre base de données, une nommée « rubrique » contenant les différentes rubriques des documentations HackBBS (ceci n’est qu’un exemple, toutes les docs du FTP d’HackBBS ne sont pas dispos dans la bdd), et une autre table nommée « doc » contenant les différentes docs avec l’id de leur rubrique respective. Table « rub » : Table « doc » : Le but de cet exemple, est de créer une liste liée, c'est-à-dire que l’on aura deux listBox, une pour les rubriques et une autre pour les docs, et qu’en fonction du choix que l’ont va faire sur la listbox « rubrique », la listBox « Docs » se mette à jour avec les documentations qui correspondent avec la rubrique sélectionnée. Pour cela, le script PHP qui sera exécuté via AJAX devra effectuer une requête sur la base de données afin de mettre à jour la deuxième listBox. 12
Voici le code de l’index.php :
index.php
Tuto AJAX [DevBBS]
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function appel_ajax(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
var leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('docs').innerHTML = leselect;
}
}
// requête par méthode POST
xhr.open("POST","ajax.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('rubrique');
id = sel.options[sel.selectedIndex].value;
xhr.send("id="+id);
}
13Docs HackBBS Rubrique Aucun
mysql_connect("localhost","user","pass");
mysql_select_db("ajaxdevbbs");
$res = mysql_query("SELECT id,doc,url FROM doc WHERE id_rub=".$_POST["id"]." ORDER BY
doc");
while($data = mysql_fetch_assoc($res)){
echo "".$data["doc"]."";
}
}
echo "
";
?>
Le script PHP se contente en fait de récupérer le paramètre passé en POST par AJAX, c'est-à-dire
l’id de la rubrique sélectionné, et envoie une requête afin de récupérer les documentations
correspondantes à la rubrique.
Une fois ce script exécuté, le contenue de notre dans le fichier index.php est remplacé par
le contenu de ajax.php, c'est-à-dire d’une listBox contenant les docs, ainsi qu’un bouton nous
dirigeant vers le FTP d’HackBBS (ça c’était pour le fun ^^).
Voici en image ce que ça donne :
Et tout cela ………. sans rechargement de page.
15VIII- Conclusion
L’utilisation de XmlHttpRequest est maintenant beaucoup utilisé dans le Web2.0, ne serait ce que
pour son interactivité et son gain de temps, en effet, effectuer des tests lors de la saisie
d’informations dans un formulaire sans pour autant recharger la page pour effectuer une requête
SQL est très pratique. Par exemple, lorsqu’on choisit un pseudo sur certain site, celui-ci nous informe
de sa disponibilité au fur et à mesure de sa saisie, ce qui est beaucoup plus pratique et agréable pour
l’utilisateur.
Petit rappel avec les requêtes synchrones, l’utilisation synchrone risque de figer la page le temps que
le script PHP s’exécute, ce qui peut avoir un résultat inattendu sur votre site.
Cours / Tuto écris pour la communauté
DevBBS by Sliim
http://dev.hackbbs.org
Document libre !
16Vous pouvez aussi lire
