Fil d'Ariane
Mis à jour le vendredi 14 avril 2017
  • 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Le fonctionnement de $.ajax()

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

La fonction$.ajax()va être incontournable pour nos appels AJAX en jQuery, nous l'employons pour envoyer une requête HTTP. Nous allons désormais avoir très souvent recours à cette fonction, alors commençons par voir ce qu'elle a dans le ventre.

C'est l'objet de ce chapitre.

$.ajax() et ses paramètres

Pour tirer pleinement profit de la puissance de $.ajax(), voyons comment l'on va pouvoir exploiter ses paramètres, qui sont, pour certains, vitaux pour l'envoie de votre requête HTTP. :)

Les paramètres principaux de$.ajax()

Le fichier ciblé

Lorsque vous envoyez une requête HTTP, vous demandez quelque chose au serveur. Dans notre cas de figure, il s'agit simplement du script côté serveur qui va aller chercher les commentaires dans la base de données et nous les retourner. C'est plutôt logique non ?

Pour spécifier quelle est la ressource ciblée (notre script PHP) nous allons devoir utiliser le paramètreurlde$.ajax().

$("#more_com").click(function(){
     
    $.ajax({
       url : 'more_com.php' // La ressource ciblée
    });
   
});

Nous considérons ici que le fichier PHP exécuté côté serveur s'appellemore_com.php. C'est un lien relatif, le fichier PHP se trouve donc dans le même répertoire que le fichier JavaScript, et le fichier HTML auquel il est lié. Ce code marche, mais il ne fait rien. Nous allons devoir spécifier le type de la requête.

Le type de la requête : POST ou GET ?

Devons-nous envoyer une requête de type POST ou GET ? Utiliser le type POST est ici complètement insensé, étant donné que nous ne souhaitons pas envoyer d'informations au serveur (nous ne postons pas un formulaire par exemple). Nous allons donc envoyer une requête de type GET. Cela passe ici par le paramètretype.

$("#more_com").click(function(){
     
    $.ajax({
       url : 'more_com.php', // La ressource ciblée
       type : 'GET' // Le type de la requête HTTP.
    });
   
});
Envoyer des éléments en GET

Si votre requête est de type GET, rien ne vous empêche de faire passer des paramètres avec GET pour les utiliser côté serveur dans l'array$_GET. Pour cela, vous pouvez utiliser le paramètredata. Avec un peu de concaténation, on s'en sort très bien.

$("#more_com").click(function(){
     
    $.ajax({
       url : 'more_com.php', // La ressource ciblée
       type : 'GET' // Le type de la requête HTTP.
       data : 'utilisateur=' + nom_user;
    });
   
});

Avec ceci, du côté serveur,$_GET['utilisateur']contiendra la valeur de la variablenom_user. C'est plutôt simple.

Le type de données à recevoir

Nous devons spécifier maintenant le type de données que nous allons recevoir de PHP. Rappelez-vous, nous pouvons recevoir tout et n'importe quoi : du XML, du HTML, du texte, du JSON... peu importe ! On utilisera en principe JSON dans nos projets, mais nous allons utiliser ici du HTML afin de vous montrer que c'est tout à fait utilisable.

$("#more_come").click(function(){
     
    $.ajax({
       url : 'more_com.php', // La ressource ciblée
       type : 'GET', // Le type de la requête HTTP

       /**
        * Le paramètre data n'est plus renseigné, nous ne faisons plus passer de variable
        */

       dataType : 'html' // Le type de données à recevoir, ici, du HTML.
    });
   
});

Nous en avons fini avec les requêtes de type GET ! Tout ce qu'il nous reste à faire maintenant, c'est de les traiter côté serveur ! Néanmoins, nous allons voir maintenant comment gérer une requête de type POST.

Envoyer des requêtes de type POST

Pour nous donner un petit exemple dans cette petite partie sur les requêtes POST, nous vous demandons d'oublier cinq minutes l'histoire du fil de commentaire. Pensons plutôt à l'envoi d'un mail depuis une page de contact. Le visiteur tape un message dans un formulaire HTML, et ce message vous est envoyé par email en AJAX. Si nous souhaitons réaliser ce système, il faut envoyer des informations au serveur avec notre requête HTTP, pour cela, il faut commencer à spécifier un type POST pour$.ajax().

$("#envoyer").click(function(){
     
    $.ajax({
       url : 'send_mail.php', // Le nom du script a changé, c'est send_mail.php maintenant !
       type : 'POST', // Le type de la requête HTTP, ici devenu POST
       dataType : 'html'
    });
   
});

Tout est pareil, on a juste basculé sur du POST dans le paramètretype, mais ce n'est pas vraiment suffisant.
Nous allons devoir faire passer nos variables JavaScript à notre script PHP. Ces variables contiennent les informations du formulaire, et PHP en a besoin pour agir côté serveur. C'est très simple, l'argumentdatarevient ici.

$("#envoyer").click(function(){
     
    $.ajax({
       url : 'send_mail.php',
       type : 'POST', // Le type de la requête HTTP, ici devenu POST
       data : 'email=' + email + '&contenu=' + contenu_mail, // On fait passer nos variables, exactement comme en GET, au script more_com.php
       dataType : 'html'
    });
   
});

Nous avons une bonne nouvelle pour vous, votre requête HTTP fonctionne ! Si les scriptsmore_come.phpousend_mail.phpfonctionnent aussi, ils réalisent leur boulot côté serveur, avant de nous envoyer une réponse. Seulement, on a toujours un petit problème côté client, nous n'avons rien pour traiter le retour ! Nous allons remédier à cela tout de suite, grâce à trois nouveaux paramètres de$.ajax().

Les paramètres success, error et complete !

Votre requête HTTP est donc prête, et pour peu que votre script côté serveur soit présent et fonctionnel, elle a toutes les chances de marcher. Après avoir fait son boulot, le serveur nous renvoie quelque chose. Manque de bol, nous n'avons rien pour gérer le retour de$.ajax(). Les paramètrescomplete,successeterrorvont nous être très utiles !

Traiter les retours de la fonction

L'appel AJAX a réussi :success

jQuery ne nous laisse pas en plan et va nous proposer un paramètre pour gérer le retour de notre fonction$.ajax()en cas de réussite. Le paramètre s'appellesuccess, et il ne sera exécuté QUE si l'appel AJAX a abouti. Ce paramètre prend en charge une fonction qui sera exécutée. C'est logique, lorsque l'appel AJAX aura réussi, cette fonction est automatiquement appelée ; c'est elle que l'on utilise pour mettre à jour notre page ! Comme quoi, tout à vraiment été pensé. ^^

$("#more_com").click(function(){
     
    $.ajax({
       url : 'more_com.php',
       type : 'GET',
       dataType : 'html', // On désire recevoir du HTML
       success : function(code_html, statut){ // code_html contient le HTML renvoyé
           
       }
    });
   
});
L'appel AJAX n'a pas réussi :error

Si l'appel AJAX a rencontré une erreur, on va avoir de quoi gérer l'erreur de la même manière qu'avecsuccess. Le paramètre qui va être employé ici seraerror. Le paramètre exécute une fonction si l'appel AJAX a échoué.

$("#more_com").click(function(){
     
    $.ajax({
       url : 'more_com.php',
       type : 'GET',
       dataType : 'html',
       success : function(code_html, statut){ // success est toujours en place, bien sûr !
           
       },

       error : function(resultat, statut, erreur){

       }

    });
   
});

La fonction exécutée parerrorprend en charges trois arguments : le résultat, le statut, et l'erreur. Vous connaissez le second argument, c'est le même que poursuccess, il ne nous sera pas utile. Le premier est un objet XHR renvoyé par jQuery. Le dernier est en revanche nettement plus intéressant. C'est en fait une exception, vous pouvez ici placer une chaîne de caractère à afficher à votre visiteur si l'appel AJAX n'a pas fonctionné.

Un dernier paramètre de$.ajax():complete

Vous le devinez,completeva s'exécuter une fois l'appel AJAX effectué.

Le paramètre va prendre deux arguments, l'objet resultat dont nous avons parler plus haut ainsi qu'un statut. Vous commencez à être habitué, n'est-ce pas ?

$("#more_com").click(function(){
     
    $.ajax({
       url : 'more_com.php',
       type : 'GET',
       dataType : 'html',
       success : function(code_html, statut){
           
       },

       error : function(resultat, statut, erreur){

       },

       complete : function(resultat, statut){

       }

    });
   
});

C'est à l'intérieur de ces fonctions que nous allons devoir traiter la suite des évènements : nous voulons maintenant ajouter les commentaires reçus du serveur à notre fil de commentaires sur notre page. Imaginons un blocdivportant l'identifiant#commentairesqui contienne les commentaires déjà chargés dans la page. Nous allons vouloir y ajouter les commentaires reçus.

Pour cela, il faut ajouter un petit quelque chose dans lesuccess, mais vous devriez savoir le faire tout seul.

// On reprend le même id que dans le précédent chapitre

$("#more_com").click(function(){
     
    $.ajax({
       url : 'more_com.php',
       type : 'GET',
       dataType : 'html',
       success : function(code_html, statut){
           $(code_html).appendTo("#commentaires"); // On passe code_html à jQuery() qui va nous créer l'arbre DOM !
       },

       error : function(resultat, statut, erreur){
         
       },

       complete : function(resultat, statut){

       }

    });
   
});

Et voilà ! La fonction$.ajax()est complétée ! De là, vous êtes libre d'ajouter tous les effets que vous souhaitez afin de rendre la chose un peu plus animée !

Les raccourcis $.get() et $.post()

Nous avons l'honneur de vous dire que vous savez maintenant gérer un appel en AJAX simple en jQuery ! Tout passe par la fonction$.ajax()et ses paramètres, seulement il existe deux raccourcis bien utiles que nous allons voir ici.

Allez plus vite avec$.get()et$.post()

Des raccourcis qui fonctionnent différemment

Avouez qu'écrire une fonction$.ajax()pour ensuite définir son type GET/POST dans le paramètre adéquat, c'est lourd. On a voulu simplifier la vie aux développeurs en leur permettant de créer directement une requête GET ou POST. Ces raccourcis sont les fonctions$.get()et$.post(). Toutes les deux fonctionnent de la même manière, elles font appel implicitement à$.ajax()en lui spécifiant un type GET pour$.get()et un type POST pour$.post().

Et l'objet XmlHttpRequest, il est quand même instancié ?

Bien sûr, vous ne vous rappelez pas du fonctionnement de$.ajax()? Dès qu'elle est appelée, un objet de type XHR est créé ;$.get()et$.post()font toutes les deux appel à cette fonction, l'objet est donc bel et bien instancié. Un peu de code pour vous montrer ça.

/**
 * $.get() vaut $.ajax() avec un type get
 * Ces lignes reviennent à faire un $.get();
 */

$.ajax({
    type : 'get'
});

/**
 * De la même manière $.post() vaut $.ajax() avec un type post
 * Ces lignes reviennent à faire un $.post();
*/

$.ajax({
    type: 'post'
});

Nous espérons que vous devinez qu'il nous reste quand même deux ou trois choses à régler, sinon, relisez les deux premières parties de ce chapitre ! :-°

Un appel AJAX en GET avec$.get()

La fonction$.get()se veut être un raccourci de$.ajax()avec un type GET. Nous insistons bien sur le terme de raccourci, car même les arguments s'inscrivent de manière simplifiée par rapport à tout à l'heure. Les arguments demandés sont les mêmes :

  • l'URL du fichier appelé ;

  • les données envoyées* ;

  • une fonction qui va gérer le retour ;

  • le format des données reçues.

Nous allons vous montrer un code mettant en application la fonction$.get().

$.get(
    'fichier_cible.php', // Le fichier cible côté serveur.
    'false', // Nous utilisons false, pour dire que nous n'envoyons pas de données.
    'nom_fonction_retour', // Nous renseignons uniquement le nom de la fonction de retour.
    'text' // Format des données reçues.
);

function nom_fonction_retour(texte_recu){
    // Du code pour gérer le retour de l'appel AJAX.
}

C'est du classique, la seule différence par rapport à tout à l'heure est la rapidité d'écriture de l'appel AJAX. Une dernière chose notable : la fonction de retour. Nous préférons renseigner son nom dans$.get(), et la définir plus bas pour une meilleure lisibilité.

Cette dernière prend un argument : il est automatiquement créé par$.get()et il contient les données reçues du serveur. Nous n'avons qu'à le passer en argument de notre fonction de retour, et cela fonctionne ! De là, nous pouvons imaginer tout type de traitement possible pour nos données. Un appel de type GET avec$.get()devient donc particulièrement facile à gérer.

Un appel AJAX en POST avec$.post()

$.post()fonctionne de la même manière que$.get(): c'est un raccourci pour créer rapidement un appel AJAX de type POST. Les arguments qu'elle prend sont identiques à ceux de sa soeur :

  • l'URL fichier appelé ;

  • les données envoyées ;

  • une fonction qui va gérer le retour ;

  • le format des données reçues.

Imaginons l'envoi d'un email en AJAX avec la fonction$.post().

$.post(
    'send_mail.php', // Le fichier cible côté serveur.
    {
        sujet : $("#sujet").val(), // Nous supposons que ce formulaire existe dans le DOM.
        contenu : $("#contenu").val()
    },
    nom_fonction_retour, // Nous renseignons uniquement le nom de la fonction de retour.
    'text' // Format des données reçues.
);

function nom_fonction_retour(texte_recu){
    // Du code pour gérer le retour de l'appel AJAX.
}

C'est pareil ! Oui, à ceci près que nous faisons cette fois-ci réellement passer des variables. Pour le reste, la fonction fonctionne vraiment de la même manière que$.get().

Utiliser$.ajax()ou$.get()et$.post()?

Pour notre part, nous vous conseillons vraiment d'utiliser les deux raccourcis pour gérer vos appels AJAX dans votre projet. Pour une simple et bonne raison : c'est juste plus simple à taper, à comprendre, et à réécrire. N'oubliez pas la devise de jQuery : écrivez moins, faites plus !

Sérialisez vos formulaires !

Un raccourci très sympathique peut être exploité lorsque vous gérez un appel AJAX de type POST impliquant l'utilisation d'un formulaire. Il s'agit de la sérialisation.

La sérialisation

La méthodeserialize()de jQuery

Vous souhaitez envoyer les variables issues d'un formulaire HTML à un script PHP en AJAX : c'est l'exemple typique de l'utilisation de la fonction$.ajax(). Un problème va se poser lorsque vous devrez spécifier vos variables et leurs contenus : vous devrez concaténer dans une chaîne de caractères toutes ces variables, exactement comme on l'a vu...

$.ajax({
   /**
    * Nous réutilisons $.ajax() pour illustrer l'exemple
    */

    // Concentrons nous sur le paramètres data
    data : 'valeur1=' + valeur1 + '&valeur2=' + valeur2 + '&valeur3=' + valeur3,

});

Cela fonctionne, mais ce n'est franchement pas facile à taper. Alors oui, si on n'a que quelques variables à spécifier, c'est faisable, mais si notre formulaire HTML est vraiment très long cela devient vite un calvaire.

La solution à ce problème, c'est la sérialisation du formulaire. Elle est rendue possible grâce à la méthodeserialize()de jQuery. Son but est de transformer les champs d'un formulaire en chaîne de caractères avec les variables et leurs contenus concaténés.

Un exemple de sérialisation

Voici le formulaire sur lequel nous souhaitons appliquerserialize().

<!-- Formulaire HTML super simple à sérialiser -->
<form id="formulaire" method="POST" action="traitement.php">
    <input type="text" name="valeur1" />
    <input type="text" name="valeur2" />
    <input type="text" name="valeur3" />
    <input type="submit" name="submit" />
</form>

Le but est d'obtenirdata : 'valeur1=' + valeur1 + '&valeur2=' + valeur2 + '&valeur3=' + valeur3afin de l'envoyer en AJAX. Voilà comment nous devons procéder pour automatiser cela :

$("#formulaire").submit(function(e){ // On sélectionne le formulaire par son identifiant
    e.preventDefault(); // Le navigateur ne peut pas envoyer le formulaire

    var donnees = $(this).serialize(); // On créer une variable content le formulaire sérialisé
     
    $.ajax({

    //...

        data : donnees,

    //...

    });

});

Et voilà ! Votre formulaire est sérialisé... et cela fonctionne ! On vient de gagner un temps fou, pas vrai ?

Ce chapitre est charnière, assurez-vous de l'avoir compris et s'il le faut, lisez et relisez ces lignes.$.post()et$.get()sont à la base des appels AJAX en jQuery, si vous ne l'avez pas compris vous n'irez nulle part. Lisez la documentation sur jQuery.ajax() ! Cela vous aidera sans aucun doute.

Vous savez lancer des requêtes HTTP vers des scripts distants, c'est bien. Mais tout cela reste très abstrait : nous n'avons encore aucun script réel côté serveur pour traiter nos appels AJAX. Donnons donc une dimension bien plus concrète à tout cela en créant nos scripts côté serveur. Tout va se mettre en place à ce moment-là ! Nous coderons dans le chapitre suivant un système de connexion très basique en AJAX.

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