• 10 heures
  • Facile

Mis à jour le 21/04/2020

AJAX : les requêtes HTTP par l'objet XmlHttpRequest

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vous qui êtes développeur JavaScript, vous savez très certainement qu'utiliser AJAX sur son site peut rapidement devenir une galère sans nom.

Comme à son habitude : jQuery va nous simplifier la tâche. Voyons comment l'on va pouvoir gérer un appel AJAX grâce au framework.

AJAX : notre problématique

AJAX (Asynchronous JavaScript and XML) n'est pas une technologie, c'est le résultat d'un ensemble de technologies du web qui fonctionnent ensemble pour arriver à un objectif simple : rafraîchir une partie de page web sans recharger la page complète.

AJAX... c'est simple !

Imaginons un fil de commentaires

Commençons à penser à un système en AJAX, pour vous donner une meilleure idée de ce dont il s'agit. Imaginez un article sur le web, qui possède son propre fil de commentaire : classique. Maintenant, ce que nous voulons, c'est que les visiteurs puissent commenter notre article et mettre à jour le fil de commentaire sans que la page soit rechargée entièrement. Le but du jeu est donc qu'au moment de la soumissions du formulaire, une logique se mette en route côté jQuery, qui fera que le commentaire sera ajouté en base de données, et qu'il soit automatiquement ajouté au fil, le tout sans recharger la page !

C'est totalement possible... et c'est même très répandu. Si vous êtes fan des réseaux sociaux, comme Facebook, vous avez forcément été confronté à l'un de ces fils de commentaire dans votre vie de geek.

Image utilisateur

Fil de commentaire rechargé en AJAX

Bon ! Maintenant une question doit vous titiller !

Comment diable cela se met-il en place dans le code ?

jQuery ne suffit pas !

Nous avons parlé d'un fil de commentaire qui se recharge en AJAX plus haut, et nous avons même évoqué l'idée d'une base de données. Vous devriez donc comprendre que jQuery est aussi capable d'interagir avec ce qu'il se passe côté serveur !

Si c'est ce que vous pensez, sachez que ce n'est que partiellement vrai. Pour interagir avec une base de données, jQuery va devoir appeler des scripts côté serveur, qui eux sont capables de le faire. Vous commencez à comprendre ? AJAX repose sur ce fondement même, la communication asynchrone d'un langage côté client, avec un langage côté serveur. Vous devinez la suite, pour mettre en place un appel AJAX sur son site, jQuery ne va plus nous suffir. Voilà ce dont on va avoir besoin :

  • Un langage côté client : nous utiliserons bien sûr JavaScript, avec jQuery.

  • Un langage côté serveur : nous utiliserons ici le PHP.

Un appel AJAX sans le vocabulaire technique

Dans ce tutoriel, lorsque nous utilisions jQuery, nous l'avons utilisé uniquement sur nos propres pages web : modification du DOM, ajout d'animations, modification du CSS... nous ne visions rien d'autre que ce qui était accessible côté client. Ici nous voulons taper plus loin : appeler des scripts PHP et interagir avec notre serveur directement depuis jQuery. Le script PHP appelé fais son travail : envoi de mail, insertion en base de données... et surtout, il renvoie un résultat que jQuery va intercepter. Ce résultat, c'est ce que jQuery utilisera pour mettra à jour la page ! C'est comme ça que le fil de commentaire de Facebook fonctionne. ;)

Un appel AJAX avec le vocabulaire technique
  • Nous écoutons l'évènement clic sur le bouton d'envoi.

  • Lorsque cet évènement est réalisé, nous envoyons une requête HTTP en POST vers un script PHP depuis jQuery.

  • PHP nous renvoie le commentaire posté dans un format léger. Nous n'avons plus qu'à l'ajouter au DOM avec jQuery... et avec une petite animation au passage.

Nous aimerions vous faire remarquer quelque chose d'autre, souvenez-nous ce que signifie AJAX ? Asynchronous JavaScript and XML. Depuis tout à l'heure nous vous parlons de JavaScript, de jQuery et de PHP... mais il est passé où le XML là-dedans ?

Sachez que l’appellation « AJAX » est sujette à débat. XML se situe en fait au niveau du retour que PHP fait et que jQuery intercepte. Si nous souhaitons ajouter un nouveau commentaire, mieux vaut que le retour soit un peu structuré pour le rendre plus facilement exploitable pour nous, XML est alors tout indiqué. En fait, on peut aussi décider de renvoyer du HTML ou même du texte pur, c'est comme vous voulez. Néanmoins on utilise généralement un autre format, le JSON qui est plus simple à traiter et plus léger. On utilisera donc JSON ici, comme un peu tout le monde. C'est pourquoi beaucoup de personnes sont tentées de parler d'AJAJ... gardez ça pour votre culture, mais pour être vraiment honnête avec vous, on s'en moque un peu. En bref, tout cela pour dire que PHP doit vraiment nous renvoyer quelque chose, et c'est ce quelque chose que nous allons devoir utiliser pour rafraîchir la page.

Nous parlons depuis tout à l'heure d'un fil de commentaire qui se recharge en AJAX, mais c'est loin d'être la seule utilisation possible d'AJAX. Nous pouvons potentiellement tout faire... car toute la puissance de PHP est à notre disposition. On voit de plus en plus d'applications réalisées complètement grâce à AJAX, citons Google Maps pour l'exemple ! En guise de TP, nous réaliserons un tchat en AJAX pour clore cette grande partie du tutoriel.

Et le rôle de jQuery dans tout ça

Il nous simplifie la vie

Pour aborder la question d'un point de vue sensiblement plus technique : nous devons vous avouer que la base de chaque appel AJAX est une requête HTTP. JavaScript est donc suffisamment puissant et évolué pour nous permettre d'envoyer des requêtes HTTP. Le boulot de jQuery ? C'est de simplifier énormément l'appel et le suivi de cette requête HTTP, et, en prime, de faciliter énormément le traitement du retour que fait PHP. jQuery nous simplifie encore la vie, même à tel point que réaliser un appel AJAX grâce à jQuery est presque une promenade de santé.

Faisons quand même un point sur les requêtes HTTP avant de commencer à taper du code. Vous ne savez pas vraiment ce qu'est HTTP ? Alors lisez la suite de ce chapitre. Si vous savez déjà ce qu'est HTTP, vous pouvez passer directement à la troisième partie de ce chapitre.

Rappel sur les requêtes HTTP

Avant de commencer à taper du code, nous estimons bon de rappeler ce qu'est une requête HTTP et de quoi est-elle constituée, ce serait quand même dommage d'essayer d'envoyer quelque chose en JavaScript, alors que nous ne savons même pas ce qu'est ce "quelque chose" !

Le fonctionnement du web

Un monde de clients et de serveurs

Vous savez sûrement comment fonctionne le web : c'est un ensemble d'ordinateurs comme le vôtre fonctionnant en réseau. On peut ranger ces ordinateurs dans deux catégories : les clients et les serveurs. Les serveurs sont des ordinateurs sur lesquels se trouvent les sites web, ils sont généralement très très puissants et fonctionnent en permanence. L'autre groupe, les clients, sont les ordinateurs qui demandent les pages web. Votre machine, comme les nôtres, sont donc des clients. Les visiteurs d'un site web sont des clients.

Pour obtenir une page web, un client demande donc à un serveur une page web. Le serveur cherche dans son disque dur à la recherche de la page demandée, et il la renvoie au client. Si des fichiers JavaScript sont rattachés à cette page, le serveur les fait parvenir aussi au client. Le navigateur web du client lit ensuite le code HTML et interprète le code JavaScript que le serveur lui a renvoyé, et il affiche la page au visiteur. Plutôt simple non ?

Une langue commune : le protocole HTTP

Néanmoins, pour que le web fonctionne, il faut que le client et le serveur parlent la même langue (on parle en fait de « protocole » plutôt que de « langue »). Le protocole utilisé sur le World Wide Web est le protocole HTTP. La "demande" que le client fait est ce que l'on appelle une « requête HTTP » ; ce que le serveur répond, c'est la « réponse HTTP ». Voilà ce que pourrait être un échange entre un client et un serveur.

Citation : Echange client/serveur

Client : Hey le serveur, voilà ma requête HTTP : envoie moi la page www.site.com/index.html

Le serveur fouille dans son disque dur à la recherche de la page index.html. Des fichiers JavaScript y sont rattachés. Il renvoie le tout au client.

Serveur : "Voilà la page que tu m'as demandé avec les fichiers JavaScript : c'est ma réponse HTTP, à plus !"

Voilà comment ça tourne. Vous n'avez pas à vous soucier de comment votre requête HTTP est générée ni comment elle est envoyée au serveur, c'est assez complexe, et nous n'avons pas vraiment besoin de savoir ça pour gérer des appels AJAX. Si vous avez assimilé cette idée de dialogue entre client et serveur, c'est tout bon.

Plusieurs types de requêtes

Le type GET

Il existe plusieurs types de requête HTTP. L'un d'eux est le type GET. En anglais, GET signifie « obtenir ». Vous l'utiliserez lors de vos rappels AJAX lorsque vous souhaiterez obtenir des données. Un exemple ? Imaginez un système pour recharger des commentaires dès que l'on clique sur un bouton « Plus de commentaires ».

L'appel AJAX est ici dédié à la récupération de données, nous ne faisons qu'obtenir les commentaires. Nous pouvons également envoyer des données grâce à GET. C'est même courant, connaissez-vous les URL contenant des variables ? Généralement les caractères ?, = et & y sont présents.

http://site.com/article.php?page=1&auteur=robert

Nous pourrons également spécifier ce genre de choses en GET.

Le type POST

Le type POST est un type dédié à l'envoi de données, mais nous pouvons aussi en recevoir. Un autre exemple ? Imaginez un système pour envoyer un email en AJAX. Lorsque vous allez cliquer sur le bouton « Envoyer », nous allons envoyer des données au serveur, pour qu'il les envoie par email, avant de nous retourner un message de succès ou d'erreur. C'est vraiment très simple.

Un langage côté serveur.

Transformer votre ordinateur en serveur

Votre ordinateur peut tout à fait être transformé en serveur. Il va falloir passer par là pour continuer ; étant donné que nous allons travailler avec le langage PHP, nous devons avoir un environnement de travail digne de ce nom. Lisez ce tutoriel de M@teo21 pour installer les programmes nécessaires afin obtenir un serveur en local sous Windows, Mac et Linux.

Nous considérons que vous connaissez maintenant les tenants et les aboutissants d'AJAX. Notre but va donc être d'envoyer une requête HTTP au serveur depuis JavaScript grâce à jQuery. Nous devrons ensuite intercepter la réponse HTTP du serveur, et rafraîchir notre page web grâce à cette réponse.

AJAX par JavaScript

Nous allons ici commencer à taper un peu de code !

Envoyer une requête HTTP : XmlHttpRequest à la rescousse !

JavaScript a la particularité d'intégrer en natif une classe appelée XmlHttpRequest (XHR) : vous n'avez rien à télécharger, XmlHttpRequest fait partie intégrante de JavaScript. En instanciant un objet à partir de cette classe, vous pouvez envoyer une requête HTTP vers le serveur grâce à cet objet XHR : c'est comme ça que cela marche !

Cet objet XmlHttpRequest va plus loin que ça, car il vous permet vraiment de gérer beaucoup d'aspects de votre requête HTTP, et nous allons décortiquer ça ensemble dans la suite de ce tutoriel. C'est vraiment quelque chose de vaste qu'on va vous aider à dégrossir. ^^

Instancier XHR : un calvaire

Tout cela c'est très beau, mais il existe néanmoins un petit problème : instancier un objet XHR peut devenir difficile... car il faut prendre en compte le problème de compatibilité entre les navigateurs. Les navigateurs Internet Explorer antérieurs à la version 7 utilisaient une implémentation différente de XHR : ActiveX, développé par Microsoft. Il va donc falloir prendre en compte ces navigateurs pour que notre appel AJAX soit mis en œuvre sur ces ceux-ci.

Voici un code en JavaScript pur instanciant un objet XHR couvrant les navigateurs utilisant ActiveX et XHR. En jouant avec des conditions, on arrive très bien à instancier un objet de type XHR pour chaque navigateur, c'est pas super pratique, mais on y arrive.

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;
}

C'est propre et ça marche. Vous pouvez utiliser ça sans problème sur votre site. Il y a quand même un tout petit soucis ici : c'est vraiment long à taper, et nous vous le disions, pas pratique du tout. Voici 16 lignes de code, utilisées uniquement pour régler un problème de compatibilité entre les navigateurs... si on demandait à jQuery de faire ça à notre place, ce serait mieux non ? :)

XmlHttpRequest avec jQuery

XmlHttpRequest devient nettement plus facile à instancier avec jQuery. Une seule ligne de code, cela va aller très vite !

Instancier XmlHttpRequest avec jQuery

Instancier un objet XmlHttpRequest devient extrêmement simple, cela va être rendu possible par la fonctionjQuery.ajax()ou$.ajax(). Cette seule et unique fonction va nous permettre d'instancier l'objet XmlHttpRequest qui fait tant couler d'encre... Vous n'avez même pas besoin d'utiliser le mot-clénewpour instancier l'objet : cette fonction de jQuery le fait implicitement !

$.(document).ready(function(){
/*
* Utilisons $.ajax pour créer une instance de XmlHttpRequest
*/
$.ajax();
});

Et hop, XmlHttpRequest est instancié. Vous pouvez désormais procéder à l'envoie d'une requête HTTP grâce à cet objet. Bien sûr, ce code se veut le plus simple et le plus basique possible ; vous pouvez coupler cette fonction avec tous les évènements, effets ou autre que vous voulez.

Nous avons pris tout à l'heure comme exemple un fil de commentaire qui se rechargerait en AJAX dès que l'on cliquerait sur un bouton « plus de commentaires ». Imaginons que ce bouton existe dans le DOM, et qu'il dispose de l'identifiant#more_com. On va écouter l'évènementclick()sur ce bouton et dès qu'il sera réalisé, on instanciera un objet XHR !

$(document).ready(function(){
/*
* Ecoutons l'évènement click()
*/
$("#more_com").click(function(){
$.ajax();
});
});

Simple, rapide et efficace !

Et niveau compatibilité, vous êtes SÛR que c'est vraiment au point ?

Oh que oui. jQuery reste fidèle à lui-même : ce code fonctionne sur tous les navigateurs qui supportent XmlHttpRequest et ActiveX de Microsoft ! Bien sûr, rien n'est magique. Si vous utilisez un navigateur qui date de Mathusalem et qui ne supporte pas du tout AJAX, ne vous attendez pas à ce qu'un objet soit instancié. À vous de vous tenir à jour. ;)

C'est forcément un peu déroutant au début, mais comprenez bien que si vous voyez$.ajax()quelque part, c'est qu'un objet XmlHttpRequest est instancié. Avec cette fonction, jQuery fait tout implicitement. ;)

XHR permet d'envoyer des requêtes HTTP depuis JavaScript, cette classe est donc à la base des appels AJAX. La fonction$.ajax()de jQuery nous permet d'instancier un objet très rapidement à partir de cette classe, autant dire que cette partie du tutoriel est là pour vous permettre de maîtriser cette fonction ! Et croyez-nous, c'est quand même du boulot.

Si vous êtes amené à utiliser AJAX avec du JavaScript "nu", ou tout simplement que vous préférez tout faire par vous-même, nous pouvons vous conseiller le tutoriel AJAX. Il a la particularité d'expliquer AJAX sans l'utilisation de frameworks.

Nous n'avons fait qu'instancier un objet XHR, mais nous n'exploitons encore pas sa puissance. Autrement dit, nous n'avons encore rien fait ! Voyons voir comment on va pouvoir s'y prendre, toujours à l'aide de jQuery et de cette fameuse fonction$.ajax().

Exemple de certificat de réussite
Exemple de certificat de réussite