Support d’introduction à AJAX et l'objet XmlHttpRequest


Télécharger Support d’introduction à AJAX et l'objet XmlHttpRequest

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


AJAX et l'objet XmlHttpRequest

Sommaire

 

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…

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.

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;

}

 

On 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.

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).

status

Description : C’est le code de la réponse du serveur 200 : OK

404 : Page non trouvée

Etc..

statusText

Description : Message 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.

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 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é :

 

 



 

Tuto AJAX [DevBBS]

 

 

 

 

 

:

 

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 après avoir modifié le script PHP. Celui-ci étant rappelé à chaque clique sur le bouton, il sera rafraichi.

 

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 = "?p=";  ("GET",url+param,true) ; (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

                                   alert(xhr.responseText);

                         }

              }

             var param = document.getElementById("param").value;

                                               var url = "?p=";

(null);

}

 ("GET",url+param,true) ;

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 = "?p=";

                 ("GET",url+param,true) ;               (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 = ""; ("POST",url,true) ; xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); ("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.

Codes de ces exemples : 

 

 

 

Tuto AJAX [DevBBS]

 

 

 

Choisissez une methode : GETPOST

Paramètre :

 

 

 

 

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

--

-- 

-- 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: àjaxdevbbs`

-- 

-- --------------------------------------------------------

-- 

-- 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,

  ùrl` 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`, ùrl`) VALUES 

(1, 1, 'Du bon usage de la ', ''), (2, 1, 'L''Ethique ', '

 

 

'),

(3, 1, 'Le Chemin vers ', ''),

(4, 1, 'Les Lois de ', ''),

(5, 1, 'Libre comme dans ', ''),

(6, 1, 'Un Manifeste ', ''),

(7, 2, 'Cours Algorithmie et C BTS ',

''),

(8, 2, 'Initiation au langage C.pdf',

''),

(9, 2, 'O''Reilly - The C Programming ',

'

'),

(10, 3, 'Les Bases du Langage C# (Cours Hackbbs - vodkanux)',

'(Cou rs%20Hackbbs%20-%20vodkanux).doc'),

(11, 3, 'O''Reilly - Programming ',

''),

(12, 4, 'Java 2 - The Complete Reference - Osborne ',

'

'),

(13, 5, '', '-

'),

(14, 5, '',

''),

(15, 5, 'GCC The Complete Guide ',

' pdf'),

(16, 5, 'Linux and Unix ',

''),

(17, 5, 'M?mo ',

''), (18, 5, 'M?mo ',

''),

(19, 6, '',

''),

(20, 6, '', '');

-- --------------------------------------------------------

-- 

-- 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.

Voici le code de l’ :

 

 

Tuto AJAX [DevBBS]

 

 

 

 

 

Docs HackBBS

Aucun

 

 

 

Choisir un auteur

 

 

 

 

 

 

J’ai surligné les éléments importants dans ce code, afin que la mise à jour puisse se faire ?.

-   Tout d’abord en rouge, est représenté l’id de la

qui contient la listBox (

-   L’évènement  JavaScript utilisé est de couleur bleu, onchange nous permettra d’appeler AJAX à chaque changement de rubrique dans la première listBox.

-   En vert sont les infos à changer en fonction de votre serveur de bases de données.

-   En orange sont les lignes qui récupèrent la valeur de la première listBox (l’id de la rubrique) puis la passe en paramètre à notre script PHP via la méthode POST.

Nous allons voir maintenant notre script PHP : 

 

 

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 est remplacé par le contenu de , 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.

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 Document libre !



535