[PDF] Cours Ajax pas à pas enjeux et pratique | Cours informatique

(1)

Ajax est seulement un nom donné à un ensemble de techniques préexistantes. Il dépend essentiellement

de XMLHttpRequest, un objet coté client utilisable en JavaScript, qui est apparu avec Internet Explorer 4.0.

XMLHttpRequest a été conçu par Mozilla sur le modèle d'un objet ActiveX nommé XMLHTTP créé par

Microsoft. Il s'est généralisé sur les navigateurs après que le nom Ajax ait été lancé par un article de J. J.

Garrett.

Pourquoi utiliser Ajax?

Ajax permet de modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à

recharger la page entière.

Par exemple le contenu d'un champ de formulaire peut être changé, sans avoir à recharger la page avec le titre,

les images, le menu, etc.

Ajax est une technique qui fait usage des éléments suivants:



HTML pour l'interface.



CSS (Cascading Style-Sheet) pour la présentation de la page.



JavaScript (EcmaScript) pour les traitements locaux, et DOM (Document Object Model) qui accède aux

éléments de la page ou du formulaire ou aux éléments d'un fichier XML chargé sur le serveur.



L'objet XMLHttpRequest lit des données ou fichiers sur le serveur de façon asynchrone.



PHP ou un autre langage de scripts peut être utilisé coté serveur.

Le terme "Asynchronous", asynchrone en français, signifie que l'exécution de JavaScript continue sans attendre

la réponse du serveur qui sera traitée quand elle arrivera. Tandis qu'en mode synchrone, le navigateur serait gelé

en attendant la réponse du serveur.

Dynamic HTML est aussi un ensemble de techniques, qui comprend: HTML, CSS, JavaScript.

Cela permet de modifier le contenu d'une page selon les commandes de l'utilisateur, à partir de données

préalablement fournies ou avec un texte tapé par l'utilisateur.

Ajax est DHTML plus l'objet XHR pour communiquer avec le serveur.

Comment cela fonctionne?

Pour recueillir des informations sur le serveur l'objet XHR dispose de deux méthodes:



open: établit une connexion.



send: envoie une requête au serveur.

Les données fournies par le serveur seront récupérées dans les champs de l'objet XMLHttpRequest:



responseXml pour un fichier XML ou



responseText pour un fichier de texte bru.

Il faut attendre la disponibilité des données, et l'état est donné par l'attribut readyState de XMLHttpRequest.

Les états de readyState sont les suivants (seul le dernier est vraiment utile):

0: non initialisé.

1: connexion établie.

2: requête reçue.

(2)

3: réponse en cours.

4: terminé.

Technologie du "langage" AJAX

Comme son nom l'indique, la mise en place d'AJAX requiert plusieurs langages :



Javascript, pour les traitements côté client ;



L'objet XMLHttpRequest de Javascript, pour dialoguer avec le serveur ;



PHP, ou tout autre langage "server-side", pour les traitements côté serveur (notez qu'il est également tout à fait possible

d'appeler des fichiers statiques) ;



XML et JSON, qui peuvent servir de formats d'échanges standardisés entre le client (Javascript) et le serveur (PHP...)

Pour résumer le processus AJAX



Javascript passe une demande à l'objet XMLHttpRequest ;



L'objet XMLHttpRequest requête le serveur afin de lui transmettre ou de lui demander des données ;



Le serveur retourne un résultat (texte, XML, JSON...) à l'objet XMLHttpRequest ;



L'objet XMLHttpRequest retourne le résultat à Javascript ;



Javascript traite les données retournées (seconde requête AJAX, mise à jour tout ou partie du contenu de la page via HTML et CSS...)

AJAX ne représente en réalité que les étapes 2, 3 et 4 mais, n'étant jamais dissocié des étapes 1 et 5, le terme AJAX en englobe finalement l'ensemble des 5 étapes.

L'objet XMLHttpRequest

Elle permet d'interagir avec le serveur, grâce à ses méthodes et ses attributs.

Attributs

readyState

le code d'état passe successivement de 0 à 4 qui signifie "prêt".

status

200 est

ok

404 si la page n'est pas trouvée.

(3)

responseXml

contient les données chargées sous forme XML, les méthodes de DOM servent à les

extraire.

onreadystatechange

propriété activée par un évènement de changement d'état. On lui assigne une fonction.

Méthodes

open(mode,

url,

boolean)

mode:

type

de

requête,

GET

ou

POST

url: l'endroit ou trouver les données, un fichier avec son chemin sur le

disque.

boolean:

true

(asynchrone)

/

false

(synchrone).

en option on peut ajouter un login et un mot de passe.

send("chaine")

null pour une commande GET.

L'objet XMLHttpRequest peut différer selon les navigateurs (surtout sur les anciens). Ainsi, il est nécessaire d'écrire une petit fonction Javascript qui nous retournera le bon objet XMLHttpRequest en fonction du navigateur du client.

// Fonction permettant de récupérer l'objet XHR // automatiquement en fonction du navigateur

function getXhr() {

var xhr = null;

// Réupération de l'objet XHR d'Internet Explorer anciennes // versions si il existe

try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e1)

{

// Réupération de l'objet XHR d'Internet Explorer anciennes // versions si il existe

try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e2)

{

// Réupération de l'objet XHR des navigateurs modernes // (Firefox, Chrome, Safari...) si il existe

try { xhr = new XMLHttpRequest(); } catch (e3)

{

alert("AJAX n'est pas supporté par votre navigateur"); return false;

} }

(4)

}

return xhr; }

Une fois notre objet XMLHttpRequest a disposition il nous reste à envoyer une requête au serveur :

// Récupération de l'objet XMLHttpRequest

var xhr = getXhr();

// On assigne une fonction qui, lorsque l'état de la requête change, va traiter le résultat

xhr.onreadystatechange = function() {

// readyState 4 = requête terminée if (xhr.readyState == 4)

{

// status 200 = page requêtée trouvée if (xhr.status == 200)

{

// ... traitement en cas de succès }

// Page non trouvée else

{

// ... traitement en cas d'échec }

} };

// Préparation de la requête (en HTTP GET et asynchrone)

var url = 'http://mon-site.fr/script-traitement-ajax.php?param=valeur'; xhr.open('GET', url, true);

// Execution de la requête xhr.send(null);

On assigne ici une fonction de traitement à l'objet XHR via sa propriété .onreadystatechange. Cette fonction sera automatiquement appelée par l'objet XHR à chaque fois que son statut changera. C'est dans cette fonction que nous pourrons vérifier si la requête a bien été exécutée et traiter les données retournées.

A noter que, dans cette fonction liée à .onreadystatechange, la propriété .readyState de l'objet XHR retourne l'état de la requête (2 = résultat partiellement reçu, 3 = chargement, 4 = OK). Aussi, sa propriété .status retourne le code de statut HTTP (200 = OK, 404 = page non trouvée, 500 = erreur du serveur ; pour plus de codes HTTP, voir la page Wikipédia sur les codes de statuts HTTP). Ensuite nous faisons appel à la méthode open(), qui prend 3 paramètres :



La méthode d'envoi de la requête (GET, POST) ;



L'URL à laquelle envoyer la requête ;

(5)

Enfin nous appelons la méthode send(), qui prend 1 paramètre si la requête est de type POST, ou null sinon :



Données à envoyer au serveur (reste à null dans 99% des cas, le reste étant des cas très spécifiques que nous ne traiterons pas ici)

Le résultat de la requête est ensuite retourné dans la propriété .responseText, ou dans .responseXML pour récupérer le contenu sous forme d'un objet DOM XML.

Exemple d'un script AJAX

Voici un petit exemple concret :

Au chargement de la page, on demande au serveur de nous retourner le résultat d'un script PHP, puis on l'affiche dans un élément HTML. Si la requête AJAX échoue, on affiche le texte "Error..." dans l'élément.

Fichier PHP

/*** Fichier PHP (script.php) *

* Notre script va prendre un élément aléatoirement * dans le tableau et l'afficher.

*/

<?php

$somebody = array('World', 'Foobar', 'John Doe'); shuffle($somebody); printf('Hello %s!', $somebody[0]); ?> Fichier HTML /*** HTML ***/ <div id="ajaxBox"></div> Fichier HTML /*** Javascript ***/

// Au chargement de la page, déclencher la fonction ajaxBox_update() window.onload = ajaxBox_update;

// Fonction effectuant la requête AJAX function ajaxBox_update()

{

// Récupération de l'objet XHR var xhr = getXhr();

// On assigne une fonction qui, lorsque l'état de la requête change, va traiter le résultat xhr.onreadystatechange = function()

{

(6)

if (xhr.readyState == 4) {

ajaxBox_setText(xhr.responseText); // Page non trouvée

else

ajaxBox_setText('Error...'); }

};

// Préparation et éxecution de la requête var url = 'http://site.com/script.php'; xhr.open('GET', url, true);

xhr.send(null); }

// Fonction de mise à jour du contenu de la div #ajaxBox

// Cette fonction ajoute un element <p> contenant le message, dans le div #ajaxBox

function ajaxBox_setText(pText) {

var elt = document.getElementById('ajaxBox'); var p = elt.appendChild(document.createElement('p')); p.appendChild(document.createTextNode(pText)); }

Libre à vous donc de lier, sur différents évènements, des appels AJAX et leurs traitements spécifiques.

Construire une requête, pas à pas

Première étape: créer une instance

C'est juste une instance de classe classique mais deux options à essayer pour compatibilité avec les navigateurs.

1

2

3

4

5

6

7

8 if (window.XMLHttpRequest) // Objet standard

{

xhr = new XMLHttpRequest(); // Firefox, Safari, ...

}

else if (window.ActiveXObject) // Internet Explorer

{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

ou plus simplement, on peut utiliser les exceptions:

1 try

(7)

2

3

4

5

6

7

8 xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Essayer IE

}

catch(e) // Echec, utiliser l'objet standard

{

xhr = new XMLHttpRequest();

}

Seconde étape: attendre la réponse

Le traitement de la réponse et les traitements qui suivent sont inclus dans une fonction, et la valeur de retour de

cette fonction sera assignée à l'attribut onreadystatechange de l'objet précédemment créé.

1

2

3

4 xhr.onreadystatechange = function()

{

// instructions de traitement de la réponse

};

1

2

3

4

5

6

7

8 if (xhr.readyState == 4)

{

// Reçu, OK

}

else

{

// Attendre...

}

Troisième étape: faire la requête elle-même

Deux

méthodes

de

XMLHttpRequest

sont

utilisées:

- open:

commande

GET

ou

POST,

URL

du

document,

true

pour

asynchrone.

- send:

avec

POST

seulement,

données

à

envoyer

au

serveur.

La requête ci-dessous lit un document sur le serveur.

1

2 xhr.open('GET', 'https://www.xul.fr/fichier.xml', true);

xhr.send(null);

Exemple de programme Ajax

Lire un texte

1

2

3 <html>

<head>

<script>

(8)

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 function submitForm()

{

var xhr;

try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); }

catch (e)

{

try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }

catch (e2)

{

try { xhr = new XMLHttpRequest(); }

catch (e3) { xhr = false; }

}

xhr.onreadystatechange = function()

{

if(xhr.readyState == 4)

{

if(xhr.status == 200)

document.ajax.dyn="Received:" + xhr.responseText;

else

document.ajax.dyn="Error code " + xhr.status;

}

};

xhr.open("GET", "data.xml", true);

xhr.send(null);

}

1

2

3

4

5 </script>

</head>

<body>

<FORM method="POST" name="ajax" action="">

(9)

6

7

8

9

10 <INPUT type="text" name="dyn" value="">

</FORM>

</body>

</html>

Syntaxe de formulaire utilisant Ajax

Commentaires sur le code:

new ActiveXObject(Microsoft.XMLHTTP)

Ce constructeur est pour Internet Explorer.

new XMLHttpRequest()

Ce constructeur est pour tout autre navigateur incluant Firefox.

http.onreadystatechange

On associe un traitement (une fonction anonyme en l'occurrence) à cet indicateur d'évènement.

http.readyState == 4

L'état 4 signifie que la réponse est envoyée par le serveur et disponible.

http.status == 200

Ce status signifie ok, sinon un code d'erreur quelconque est envoyé, 404 par exemple.

http.open( "POST", "data.xml", true);

- POST ou GET

-url du fichier.

- true pour asynchrone (false pour synchrone).

http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Cette méthode s'utilise seulement avec POST.

http.send(document.getElementById("TYPEDTEXT").value);

Envoi des données au serveur. Les données sont prises dans le champ dont l'id est "TYPEDTEXT" et qui est

rempli par l'utilisateur grâce à un formulaire.

Démonstration

Reçu:

Lire dans un fichier XML

Pour lire des données dans un fichier XML il suffit de remplacer la ligne:

1 document.ajax.dyn="Reçu: " + xhr.responseText;

par ce code:

1

2

3 // Assigner le fichier XML à une variable

var doc = xhr.responseXML;

// Lire le premier élément avec DOM

(10)

4

5

6 // Copier le contenu dans le formulaire

document.ajax.dyn.value= element.firstChild.data;

Démonstration

Reçu:

Ecrire dans la page

Le texte récupéré est inscrit dans le corps de la page et non dans un champ de texte. Le code ci-dessous remplace

l'objet de formulaire textfield et la seconde partie remplace l'assignement dans la fonction JavaScript.

1

2

3 <div id="zone">

<span class="Style1">... un texte à remplacer...</span>

</div>

1 document.getElementById("zone").innerHTML = "Received:" + xhr.responseText;

Démonstration

Attendre...

Envoyer un texte

Un texte est envoyé au serveur et sera écrit dans un fichier. L'appel de la méthode "open" change, le premier

argument est POST, le second est le nom du fichier ou du script qui recevra les données et doit les traiter. Et la

méthode "send" aussi a pour argument une valeur qui est une chaîne de paramètres.

1

2

3 xhr.open("POST", "ajax-post-text.php", true);

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

xhr.send(data);

L'argument de send est au format des paramètres de la méthode POST. S'il y a plusieurs données, on les sépare

par le symbole "et" commercial:

1 var data = "file=" + url + "&content=" + content;

Le paramètre "file" est un fichier qui contiendra le contenu "content". Le nom du fichier doit être vérifié par le

serveur pour éviter qu'un autre fichier ne puisse être modifié.

Une démonstration de POST est incluse dans l'archive.

Utiliser un fichier externe

Il est plus simple d'inclure un fichier JavaScript. Cette ligne sera incluse dans la section head de la page HTML:

1 <script src="ajax.js" type="text/javascript"></script>

Et la fonction est appelée avec cette instruction:

1 var xhr = createXHR();

Le script du fichier externe:

1 function createXHR() {

(11)

2

3

4

5

6

7

8

9

10

11

12

13

14

15 var request = false;

try {

request = new ActiveXObject('Msxml2.XMLHTTP');

}

catch (err2) {

try {

request = new ActiveXObject('Microsoft.XMLHTTP');

}

catch (err3) {

try { request = new XMLHttpRequest();}

catch (err1) { request = false;}

}

return request;

}

Script d'un loader Ajax

Pour mettre en place un système d'AJAX loader, souvent une petit image gif animée, nous commençons par insérer l'image dans le DOM via Javascript avant d’exécuter la requête AJAX. Ensuite, lorsque la requête AJAX est terminée, on le retire, toujours via Javascript.

Nous créons donc une fonction Javascript ajaxBox_loader() permettant, via le DOM, d'ajouter ou de retirer l'image de loader selon le paramètre qui lui est passé (true ou false). Un temps de latence factice de 2 secondes a ici été ajouté (dans le fichier PHP), afin de bien visualiser l'effet de loader.

Fichier PHP

/*** Fichier PHP (script.php) ***

* Nous utilisons la fonction sleep() de PHP, permettant * ici de simuler une latence de 2 secondes du serveur, * afin de bien visualiser l'effet du "loader",

* puis nous affichons un résultat. */

<?php

sleep(2); // Attendre 2 secondes

echo 'Hello World!'; ?>

(12)

/*** HTML***/

<div id="ajaxBox"></div> Fichier JAVASCRIPT /*** Javascript ***/

// Au chargement de la page, déclencher la fonction ajaxBox_update() window.onload = ajaxBox_update;

// Fonction effectuant la requête AJAX

function ajaxBox_update() { // Afficher le loading ajaxBox_loader(true); // Récupération de l'objet XHR var xhr = getXhr();

// On assigne une fonction qui, lorsque l'état de la requête change, va traiter le résultat xhr.onreadystatechange = function()

{

// readyState 4 = requête terminée if (xhr.readyState == 4)

{

ajaxBox_setText(xhr.responseText); // Page non trouvée

else ajaxBox_setText('Error...'); // Stopper le loading ajaxBox_loader(false); } };

// Préparation et éxecution de la requête var url = 'http://site.com/script.php'; xhr.open('GET', url, true);

xhr.send(null); }

(13)

function ajaxBox_loader(pState) {

// Ajout de l'image de loader if (pState === true) {

// Ajout d'un élement <img> d'id #ajaxBox_loader var ajaxBox = document.getElementById('ajaxBox');

var img = ajaxBox.appendChild(document.createElement('img')); img.id = 'ajaxBox_loader';

img.src = 'loader.gif'; }

// Suppression de l'image de loading else

{

// Suppression de l'élement #ajaxBox_loader

var ajaxBox_loader = document.getElementById('ajaxBox_loader'); if (ajaxBox_loader)

ajaxBox_loader.parentNode.removeChild(ajaxBox_loader); }

}

// Ajout d'un element <p> contenant le message, dans le div #ajaxBox function ajaxBox_setText(pText)

{

var elt = document.getElementById('ajaxBox'); var p = elt.appendChild(document.createElement('p')); p.appendChild(document.createTextNode(pText)); }

Loader AJAX avec jQuery

Réécrivons le script de mise en place d'un loader AJAX, avec jQuery cette fois.

La méthode $.get() de jQuery prend en paramètre l'URL de requête et renvoie un objet jXHRsur lequel on vient ajouter les actions à effectuer selon le résultat (requête terminée, requête terminée avec succès, erreur).

Ici, nous commençons par afficher le loader, puis nous exécutons la requête. Sur cette requête, nous définissons les actions :



.complete : lorsque la requête est terminée (toujours appelée, peut importe si la requête s'est bien déroulée ou non) :

suppression du loader.



.success : lorsque la requête s'est bien déroulée : affichage du texte retourné par la requête.



.error : lorsque la requête ne s'est pas bien déroulée : affichage d'un message d'erreur.

Fichier PHP

(14)

* ici de simuler une latence de 2 secondes du serveur, * afin de bien visualiser l'effet du "loader",

<?php

echo 'Hello World!'; ?> Fichier HTML /*** HTML ***/ <div id="ajaxBox"></div> Fichier JAVASCRIPT /*** Javascript ***/ // Au chargement de la page $(window).load(function() { // Affichage du loader ajaxBox_loader(true); // Execution de la requête $.get('http://site.com/script.php') .complete(function() { // Suppression du loader ajaxBox_loader(false); }) .success(function(pXhr) { // Affichage de la réponse ajaxBox_setText(pXhr.responseText); }) .error(function() {

// Affichage d'un message d'erreur ajaxBox_setText('Error...'); });

});

(15)

function ajaxBox_loader(pState) {

// Ajout d'un élement <img> d'id #ajaxBox_loader if (pState === true)

$('#ajaxBox').append('<img id="ajaxBox_loader" src="loader.gif" />'); // Suppression de l'élement d'id #ajaxBox_loader

else

$('#ajaxBox_loader').remove(); }

{

$('#ajaxBox').append('<p>'+ pText +'</p>'); }

Loader AJAX avec MooTools

Reprenons maintenant le script de mise en place d'un loader AJAX avec MooTools.

L'objet Ajax de MooTools prend en paramètre l'URL de requête ainsi que les actions à effectuer selon le résultat (requête terminée, requête terminée avec succès, erreur).

Commençons par afficher le loader. Ensuite, le principe est quasi identique à celui de jQuery puisque nous avons ici aussi à définir des actions :



onComplete : lorsque la requête est terminée (qu'elle soit en erreur ou non) : suppression du loader.



onSuccess : lorsque la requête s'est bien passée : affichage du texte retourné par la requête.



onFailure : lorsque la requête ne s'est pas correctement déroulée : affichage d'un message d'erreur.

Ensuite, on exécute la requête AJAX avec la méthode .request(). Fichier PHP

* Nous utilisons la fonction sleep() de PHP, permettant * ici de simuler une latence de 2 secondes du serveur, * afin de bien visualiser l'effet du "loader",

<?php

echo 'Hello World!'; ?>

(16)

<div id="ajaxBox"></div> Fichier Javascript // Au chargement de la page window.addEvent('load', function() { // Affichage du loader ajaxBox_loader(true);

// Préparation de la requête AJAX et définition des actions var ajax = new Ajax('http://site.com/script.php',

{ onComplete: function() { // Suppression du loader ajaxBox_loader(false); }, onSuccess: function(pResponseText) { // Affichage de la réponse ajaxBox_setText(pResponseText); }, onFailure: function() {

// Affichage d'un message d'erreur ajaxBox_setText('Error...'); } }); // Exécution de la requête ajax.request(); });

// Fonction d'ajout ou de suppression du "loader" function ajaxBox_loader(pState)

{

// Ajout d'un élement <img> d'id #ajaxBox_loader if (pState === true) { $('#ajaxBox').grab(new Element('img', { id: 'ajaxBox_loader', src: 'loader.gif' });

(17)

}

// Suppression de l'élement d'id #ajaxBox_loader else

$('#ajaxBox_loader').destory(); }

{

$('#ajaxBox').grab(new Element('p')); }

Traiter un formulaire avec les fonctions MooTools

Réécrivons le script de traitement de formulaire mais avec MooTools.

Nous avons un formulaire HTML doté de 3 champs (post_id, name, et comment) que nous envoyons au serveur. Le serveur vérifie que les champs sont correctement renseignés et retourne une réponse en conséquence.

Les paramètres doivent être ajoutés à l'URL toujours de la même manière : une liste de clé=valeur séparés par un &, et débutée par

un ?

?cle1=valeur1&cle2=valeur2&...

Afin d'être transmises proprement dans l'URL, les valeurs des champs doivent être protégées avec la fonction Javascript encodeURIComponent().

Ensuite, définissons les actions : .onSuccess sera chargée d'afficher le texte de réponse, et .onFailure chargée d'afficher un le d'erreur.

Fichier HTML <p id="result"></p>

<form method="get" action="">

<input type="hidden" id="post_id" value="1" /> <input type="text" id="name" />

<input type="text" id="comment" />

<input type="button" id="send" value="Envoyer" /> </form>

FichierPHP

* Fichier PHP (send-form.php) *

* Vérification des données reçues via la requête, et * affichage d'une réponse.

*/

<?php

(18)

$name = ! empty($_GET['name']); $comment = ! empty($_GET['comment']);

if ($post_id && $name && $comment) echo '(PHP) OK...';

else

echo '(PHP) Error...'; ?>

Fichier Javascript

// Lors du chargement de la page, nous ajoutons la fonction // sendForm() sur l'évènement onclick du bouton #send window.addEvent('domready', function(e) { $('#send').addEvent('click', sendForm); }); function sendForm() {

// Récupération des valeurs des champs de formulaire var post_id = encodeURIComponent($('post_id').value); var name = encodeURIComponent($('name').value); var comment = encodeURIComponent($('comment').value);

// Préparation des paramètres d'URL var params = '?post_id='+ post_id; params += '&name='+ name; params += '&comment='+ comment;

// Execution de la requpete AJAX lors du chargement de la page var ajax = new Ajax('http://site.com/send-form.php',

{ onSuccess: function(pResponseText) { // Affichage de la réponse ajaxBox_setText(pResponseText); }, onFailure: function() {

// Affichage d'un message d'erreur ajaxBox_setText('Error...'); }

});

(19)

ajax.request(); }

// Fonction de mise à jour du contenu de l'élement HTML #result function ajaxBox_setText(pText)

{

$('#result').grab(new Element('p')); }