Requête Ajax pour des requêtes HTTP en passant par JavaScript

Qu’est-ce qu’Ajax ?

Le concept Ajax permet de faire une requête HTTP sans recharger toute la page.

Quel est l’intérêt de cette requête ?

Le principal bénéfice est d’économiser de la bande passante et de limiter le temps d’attente lorsqu’une ou plusieurs informations de notre page web doivent être mises à jour par un serveur.

Récupérer une information grâce à une requête HTTP

Pour Ajax nous utiliserons la classe XMLHttpRequest. Attention tout ce passe de manière asynchrone.

Pour utiliser cette classe, il faut également être à l’aise avec la notion d’évènement en JavaScript.

Utilisation de XMLHttpRequest pour recevoir des informations

Nous allons utiliser la classe XMLHttpRequest pour recevoir des informations d’un serveur.

// On instancie la variable req à partir de la classe XMLHttpRequest
var req = new XMLHttpRequest();

// Grâce à la méthode open on peut indiquer la méthode de requête GET
// Cette méthode de requête permet de recevoir des données d’un serveur
// Nous indiquons également l’URL à utiliser
req.open('GET', 'https://fausseapi.com');

// Cette évènement est déclenché lorsque la requête se termine correctement
req.addEventListener('load', function () {

});

// Méthode obligatoire qui envoie la requête
req.send();

Expliquons les étapes du code.

On initialise dans un premier un temps une variable que l’on nomme req. On l’instancie avec la classe XMLHttpRequest.

On peut maintenant utiliser la variable req. La première chose à faire est d’appeler la méthode open. Elle contient deux paramètres : la méthode de la requête et l’URL à utiliser. Pour notre exemple, nous utiliserons la méthode de requête GET car nous souhaitons récupérer des informations qu’un serveur nous transmettra. Plus tard nous utiliserons POST qui permet d’envoyer des informations au serveur avant de recevoir la réponse.

Ensuite nous écoutons l’évènement load qui sera déclenché lorsque la requête sera terminée.

La méthode send est obligatoire et permet d’envoyer la requête.

Pour le moment le code envoie la requête, mais nous ne traitons pas encore la réponse.

var req = new XMLHttpRequest();

req.open('GET', 'https://fausseapi.com');

req.addEventListener('load', function () {

	// On vérifie que le status HTTP est bien supérieur à 200 et inférieur à 400
	// Sinon on renvoie le code du statut et le message du statut
	if (req.status >= 200 && req.status < 400) {

        console.log(this.responseText);

    } else {

        console.error(req.status + " " + req.statusText);

    }

});

req.send();

Dans la fonction de callback on insère une condition qui permet de vérifier le code du statut HTTP. Si celui-ci est supérieur ou égale à 200 et inférieur à 400, on fait un console.log de la réponse du serveur grâce à this.responseText. Sinon on indique une erreur avec le code du statut ainsi que le message correspond.

Il est possible d’ajouter un autre évènement qui nous permettra d’enclencher une fonction lorsqu’une requête a rencontré une erreur.

var req = new XMLHttpRequest();

req.open('GET', 'https://fausseapi.com');

req.addEventListener('load', function () {

	if (req.status >= 200 && req.status < 400) {

        console.log(this.responseText);

    } else {

        console.error(req.status + " " + req.statusText);

    }

});

// Lorsque la requête rencontre un erreur la fonction est enclenchée
req.addEventListener('error', function () {
    console.error('La requête à recontrer un problème');
});

req.send();

Si la requête rencontre une erreur alors un console.log avec les messages 'la requête a rencontré un problème' apparaît.

Une dernière chose que l’on peut faire, mais qui n’est pas obligatoire c’est de régler le timeout en millisecondes et d’écouter un évènement lorsque le timeout est dépassé et avant que le serveur n’envoie la réponse.

var req = new XMLHttpRequest();

req.open('GET', 'https://fausseapi.com');

// Réglage du timeout en millesecondes
req.timeout = 3000;

req.addEventListener('load', function () {


	if (req.status >= 200 && req.status < 400) {

        console.log(this.responseText);

    } else {

        console.error(req.status + " " + req.statusText);

    }

});


req.addEventListener('error', function () {
    console.error('La requête à recontrer un problème');
});

// Évènement timeout
req.addEventListener('timeout', function () {
    console.error('timeout');
});

req.send();

Dans ce code on règle le timeout à 3000 ms (ou 3 secondes) et lorsque le timeout est dépassé le message 'timeout' apparaît dans la console du navigateur.

Créer une fonction pour utiliser la classe XMLHttpRequest plus facilement

La fonction qui suit permet d’utiliser Ajax très facilement en tenant compte de tout ce que l’on a appris.

var ajax = function(url, callback, timeout) {

	var req = new XMLHttpRequest();

	req.open('GET', url);

	if(timeout !== null) {

		req.timeout = timeout;

	}

	req.addEventListener('load', function () {


		if (req.status >= 200 && req.status < 400) {

	        callback(this.responseText)

	    } else {

	        console.error(req.status + " " + req.statusText);

	    }

	});


	req.addEventListener('error', function () {
	    console.error('La requête à recontrer un problème');
	});

	if(timeout !== null) {

		req.addEventListener('timeout', function () {
	    	console.error('timeout');
		});

	}

	req.send();

}

Pour l’utiliser, on peut indiquer trois paramètres : l’URL, la fonction de callback qui aura comme paramètre la réponse du serveur et le timeout qui n’est pas obligatoire.

// Sans le paramètre timeout
ajax('api.php', function(res) {

	console.log(res);

});

// Avec le paramètre timeout à 3000 ms
ajax('api.php', function(res) {

	console.log(res);

}, 3000);

Recevoir des informations et envoyer des informations grâce à la méthode de requête HTTP POST

Avec la méthode POST, nous pouvons envoyer des informations aux serveurs. C’est le même principe que pour la méthode GET, mais avec quelques différences.

On pourra donc utiliser le même code. Mais il faudra remplacer GET par POST. De plus dans la méthode send de notre variable il faudra indiquer le paramètre qui correspondra aux données envoyées à notre serveur. Pour envoyer nos données, nous pouvons passer par la classe formData et sa méthode append.

var ajaxPOST = function(URL, data /* Nous rajoutons un paramètre qui correspond aux données à envoyer */, callback, timeout) {

	var req = new XMLHttpRequest();

	// On change la méthode GET par POST
	req.open('POST', url);

	if(timeout !== null) {

		req.timeout = timeout;

	}

	req.addEventListener('load', function () {


		if (req.status >= 200 && req.status < 400) {

	        callback(this.responseText)

	    } else {

	        console.error(req.status + " " + req.statusText);

	    }

	});

	req.addEventListener('error', function () {
	    console.error('La requête à recontrer un problème');
	});

	if(timeout !== null) {

		req.addEventListener('timeout', function () {
	    	console.error('timeout');
		});

	}

	// On insère le paramètre des données dans la méthode send
	req.send(data);

}


// On instancie une variable grâce à la classe FormData
// On y attache des données
var formData = new FormData();
formData.append('prenom', 'Henrique');
formData.append('nom', 'Rodrigues');

// On appelle la fonction créée précédement en insérant notre FormData
ajaxPOST('https://fausseapi.com', formData, function(res) {

  console.log(res);

});