Comment renvoyer la réponse d'un appel asynchrone en AJAX ?
Pour un développeur, il peut être intéressant de vouloir récupérer le résultat de l'appel AJAX pour le traiter dans une autre fonction.
L'utilisation d'un appel AJAX permet d'envoyer une requête simultanée vers une autre page pour, par exemple, récupérer des éléments à afficher ou bien effectuer des contrôles sur la page. Pour un développeur, il peut être intéressant de vouloir récupérer le résultat de l'appel AJAX pour le traiter dans une autre fonction. La mauvaise idée serait d'utiliser ce code :
function appelAjax() {
var resultat;
$.ajax({
url: 'test.php',
success: function(response) {
result = response;
}
});
return resultat;
}
var test = appelAjax();
Ce code ne fonctionnera pas, la variable test contiendra toujours comme valeur undefined. La raison de cette erreur provient de la nature asynchrone des appels AJAX. Après que la fonction ajax() a appelé le script test.php, la fonction continue de s'exécuter et retourne un résultat non défini, alors que le script test.php n'a pas fini de s'exécuter.
Pour récupérer le résultat d'une requête AJAX et le transférer à une fonction, il faut organiser son code autour du système des fonctions de callback qui sont appelées quand la requête est terminée. Une solution possible est de transformer la fonction appelAjax en lui ajoutant comme argument une fonction, qui sera appelée directement en cas de succès de l'appel AJAX. Le code sera transformé de cette manière :
function appelAjax(fonctionDeRappel) {
$.ajax({
url: 'test.php',
success: fonctionDeRappel
});
}
function test(response)
{
...
}
appelAjax(test);
On peut également, pour le paramètre success, utiliser une fonction qui fera un traitement avant d'appeler la fonction en paramètre.
function appelAjax(fonctionDeRappel) {
$.ajax({
url: 'test.php',
success: function(reponse)
{
//Traitement de la réponse
fonctionDeRappel(reponseTraitee);
});
}
Si vous développez pour un navigateur récent, vous pouvez faire appel à l'API Promise. Cette API faisant partie des spécifications techniques, ECMAScript 6 ajoute des méthodes supplémentaires pour gérer les appels asynchrones. Les promesses sont des containers qui contiendront la valeur future que renverra l'appel asynchrone. Quand l'appel est terminé, la promesse notifie toutes les méthodes chargées de l'écouter de la réussite ou de l'échec. En utilisant l'API Promise, le code serait adapté de cette manière :
function appelAjax() {
return Promise(function(resolve, reject) {
$.ajax({
url: test.php
});
});
}
appelAjax().then(fonction(resultat) {
//Traitement du résultat
});
Si vous développez avec JQuery, vous pouvez également faire appel aux objets différés. C'est une implémentation des promesses faites pour la bibliothèque JQuery avant que l'API Promise ait été standardisée. Chaque méthode AJAX effectuée avec JQuery retourne un objet différé que l'on peut utiliser dans une fonction :
function appelAjax() {
return $.ajax({
url: test.php
});
}
appelAjax().done(fonction(resultat) {
//Traitement du résultat
});
La dernière possibilité est de rendre l'appel synchrone. Dans ce cas-là, la fonction attendra le retour de l'appel AJAX avant de continuer. Il suffit pour cela d'utiliser la fonction open de JavaScript avec le troisième argument à false, ou avec JQuery d'utiliser l'option async avec comme valeur false. Cette méthode est déconseillée, car si le script appelé génère une erreur, la page entière est arrêtée, et l'utilisateur ne peut plus utiliser JavaScript. Le navigateur affiche un message d'erreur, et l'expérience utilisateur est mauvaise.
function appelAjax() {
var retour = $.ajax({
url: test.php,
async: false
});
return retour;
}