Module JavaScript Ajax simple et léger

Cette page présente un module Ajax Vanilla JS (pur JavaScript). Ajax vous permet de:

Le module présenté sur cette page présente les spécifications suivantes:

Télécharger ajax.min.js

Comment l'utiliser ?

Admirer la simplicité de création d'une requête Ajax :

import {ajax} from '/path/to/ajax.min.js';

ajax('https://api_url.com')
.post({ "key1": "value1", "key2": "value2"})
.then(function(response) { alert(response) })
.catch(function() { alert ('Error') })
Tester en ligne

Comment ça fonctionne ?

Detaillons l'exemple précédent. Pour commencer, il faut charger le module avec la ligne suivante(notez que les modules ne peuvent être importés que depuis des modules) :

import {ajax} from '/path/to/ajax.min.js';

Avec la fonction ajax(), on crée la requête en définissant l'URL de la requête :

.ajax('https://api_url.com')

On définit ensuite les données et on poste la requête. L'exemple suivant va créerror des variables $_POST['key1'] et $_POST['key2'] sur un serveur PHP :

.post({ "key1": "value1", "key2": "value2"})

Si la requête réussit, la fonction de la méthode then sera appelée. Dans l'exemple ci dessous, les données reçues sont affichées dans la console. Vous pouvez utiliser des fonctions classiques ou des fonctions fléchées (arrow function):

.then(function (response) { alert(response) })
// or
.then((response) => alert(response))

Si la demande échoue, l'erreur sera interceptée. Ici, une alerte s'affichera :

.catch(function () { alert ('Error') } )
// or
.catch(() => alert ('Error'))

Si vous n'êtes pas familié avec les promesses, vous avez juste besoin de savoir que :

Method chaining

Chaque méthode retourne l'objet Ajax courant (this), il est donc possible de chaîner les méthodes comme dans l'exemple suivant:

ajax()
.url('https://api_url.com')
.method('POST')
.data('key1','Value1')
.data('key2','Value2')
.send()
.then((data) => { console.log ('success', data) })
.catch((error) => { console.log ('failed', error.status)} );
Tester en ligne

jQuery style

Si vous avez l'habitude d'utilsier jQuery, vous pouvez créer un objet et le passer en paramètre du constructeur ajax() comme illustré ci-dessous :

ajax({
    url:'https://api_url.com',
    method:'POST',
    data:{
        key1:'Value1', 
        key2:'Value2'
    }).send()
    .then((data) => { console.log ('success', data) })
    .catch((error) => { console.log ('failed', error.status)} );
Tester en ligne

Définir l'URL

Il y a plusieurs façons de définir l'URL de destination:

Dans le constructeur (string)

Appelez le constructeur avec l'URL en paramètre sous forme de chaîne de caractères 

ajax('https://api_url.com')

Dans le constructeur (objet JS)

Appelez le constructeur avec l'URL en paramètre sous forme d'object JavaScript :

ajax({url: 'https://api_url.com'})

La méthode url()

Vous pouvez appeler la function url() pour définir l'URL:

ajax().url('https://api_url.com')

Spécifier la méthode d'envoi

Il y a plusieurs façons de spécifier la méthode de transmission (POST ou GET).

Par défaut

Si la méthode n'est pas spécifiée, la méthode POST est définie par défaut.

Dans le constructeur (objet JS)

Appelez le constructeur avec cla méthode d'envoi spécifiée sous forme d'objet en argument :

ajax({method: 'GET'})

La fonction méthode()

Vous pouvez aussi appeller la fonction method() :

ajax().method('GET')

The post() and get() methods

Il est également possible de spécifier la méthode de transmission en appelant la fonction .post() ou .get() à la place de .send() :

ajax().post() // Request with the POST method
ajax().get()  // Request with the GET method

Les functions .post(), .get() and .send() accepte des arguments optionnel permettant de définir les données à envoyer. Voire section Les méthodes post(), get() et send().

Définir les données à envoyer

Il y a plusieurs façon de définir les données à poster

Par défaut

Si vous ne spécifier pas de données à envoyer, la requête sera transmise sans données. Cela peut être utilie pour charger un fichier depuis un autre domaine par exemple. L'exemple suivant requête le code source de ce module Ajax depuis mon blog :

Tester en ligne

Dans le constructeur (objet JS)

Appelez le constructeur avec les données en argument sous forme d'objet JavaScript :

ajax({data: { key1:'Value1', key2:'Value2' } })

La fonction data()

Vous pouvez appeler la fonction data(). Cette fonction accepte :

ajax().data( {key1: 'Value1} )
ajax().data( 'key1', 'Value1' )

Les méthodes post(), get() et send()

Les données peuvent être spécifiées en appelant directement les méthodes .post(), .get() ou .send():

ajax().post( {key1: 'Value1} )
ajax().get( 'key1', 'Value1' ) 
ajax().send( { key1: 'Value1, key2: 'Value2 } )

Comme pour la méthode .data(), les arguments peuvent être des chaînes de caractères ou des objets.

Les fonctions .post(), .get() et .send() retournent toutes une promesse.

En cas d'échec

Si la reqûête retourne un code status de réponse HTTP de succès , la fonction callback de then() est appelée, sinon la fonction de callback catch() est appelée en cas d'échec.

La requête est considérée comme réussie si le code de réponse est dans l'intervalle [200; 299].

En cas d'échec, la promesse retourne l'objet de la requête XMLHttpRequest. Cet objet contient des informations additionnelles sur la requête. Les propriétés de cet objet sont utilises pour diagnostiquer les erreurs de transmission ou pour avertir l'utilisateur des raisons de l'échec. Les propriétés les plus utiles sont:

La liste compléte des propriétés est détaillée sur la page page XMLHttpRequest

Télécharger ajax.min.js

Téléchargement

Vous pouvez tester directement la version non compressée (non minimifiée) du code source directement sur JSFiddle.

Dernière mise à jour : 06/10/2022
 Soutenez le blog de Lulu sur Tipee. Support Lulu's blog on Tipeee