Les requêtes AJAX avec jquery

    Publié le : 14-01-2020 12:30

    Introduction à Ajax avec Jquery

    L'objectif de cet article, est de permettre de donner les bases pour effectuer des communications entre un client (via un code en jquery ajax) et le serveur (ici en Php, mais c'est aussi utilisable avec du C# ou du VB bien que le fonctionnement côté serveur diffère quelque peut) lors du déclenchement de n'importe quel événement Javascript (ex : onchange,onclick,onmouseover, etc.).

    Il est alors possible d'appeler un script Php distant et donc de récupérer de la donnée ou d'en envoyer, de lire directement le contenu d'un fichier sans passer par un script intermédiaire.

    A noter que l'utilisation de jquery simplifie grandement les interractions Ajax

    Dépendances nécessaires

    Il est primordiale d'intégrer la bibliothèque Jquery pour pouvoir utiliser jquery ajax de manière efficiente sans se soucier de la conception de la requête XhmlHttpRequest

    Les requêtes Ajax (ou XmlHttpRequest)

    Il existe de multiples façons d'instancier un appel via l'objet XmlHttpRequest nous traiterons ici de la façon la plus directe et la plus rapide à mettre en oeuvre.

    Le minimum de paramètres pour une utilisation judicieuse étant de 2 : type et URL.

    Type : définit la méthode à employer POST ou GET. Niveau convention il convient d'utiliser POST pour envoyer des données et GET pour en recevoir.

    Url : définit le script cible à appeler (ou la ressource)

    $.ajax({
       type: 'POST',          //La méthode cible (POST ou GET)
       url : 'Controller.php' //Script Cible
    });

    Les possibilités synchrone / asynchrone

    Il est possible d'envoyer une requête de deux façons :

    synchrone : bloque le flux d'éxécution de la page tant que le traitement n'est pas terminé.

    asynchrone : ne bloque pas le flux d'éxécution de la page même si le traitement traine un peu.

    Il suffit alors de rajouter le paramètre async et de lui assigner la valeur true ou false (à noter que par défaut une requête AJAX est asynchrone donc async:true)

    $.ajax({
       type: 'POST',           //La méthode cible (POST ou GET)
       url : 'Controller.php', //Script Cible
       asynch : false          //Ici on force l'appel de manière synchrone
    });

    Le fait de forcer une requête Ajax avec Jquery pour la rendre synchrone est un cas pratique rare. Mais typiquement quand vous consultez un article sur ce site lors de la fermeture de l'onglet de la page ou du navigateur (via l'événement onbeforeload) nous envoyons à notre serveur une requête avec un jeton unique de consultation qui nous permet de savoir combien de temps vous avez passés sur l'article. 

    Autres paramètres importants à connaître :

    dataType :  Sert à spécifier un le format des données à recevoir du serveur (xml,text, json,html,etc)

    contentType :  S'utilise pour indiquer le type de contenu lors de l'envoi au serveur (application/x-www-form-urlencoded, ou application/json, etc).

    timeout : Permets de définir le délai (en millisecondes) de temps d'attente de réponse du serveur.

    username : Indique un nom d'utilisateur pour une authentification http avant d'accéder à la ressource demandée.

    password : Détermine un mot de passe pour une authentification http avant d'accéder à la ressource demandée. 

    Les fonctions de post-traitement (ou callback) et pre-traitement (ou preprocessing)

    Les requêtes Ajax inclut 1 fonction de pré-tratement (qui s'éxécutera avant la requête) et 3 fonctions de post traitement (qui s'éxécuteront APRES l'exécution de la requête).

    (pre-traitement) beforeSend : Le fragment de code javascript à éxécuter avant le lancement de la requête Ajax avec Jquery (permet d'afficher un loader, de dissimuler un formulaire, etc).

    (post-traitement) done : Le code qui sera opéré après l'exécution de la requête AJAX si aucune erreur n'a lieu (cad : si le code HTTP de retour est strictement égal à 200 > succès de la requête).

    (post-traitement) fail  : Le script javascript qui sera joué après l'appel de la requête AJAX si une erreur a lieu (cad : si le code HTTP de retour est différent de 200).

    (post-traitement) always : Le bout de code javascript à démarrer après done ou fail de la requête AJAX (permet de dissimuler un loader, d'afficher un formulaire, de rafraîchir des champs,etc).

       let request =
          $.ajax({
            type: "POST", 	        //Méthode à employer POST ou GET 
            url: "Controller.php",  //Cible du script coté serveur à appeler 
            beforeSend: function () {
              //Code à appeler avant l'appel ajax en lui même
            }
          });
          request.done(function (output) {
            //Code à jouer en cas d'éxécution sans erreur du script du PHP
          });
          request.fail(function (error) {
    	   //Code à jouer en cas d'éxécution en erreur du script du PHP ou de ressource introuvable
          });
          request.always(function () {
           //Code à jouer après done OU fail quoi qu'il arrive
          });

     Assigniation des paramètres à envoyer

    Pour envoyer des données à votre script PHP, il est préférable d'utiliser l'objet FormData. Cette objet compile un ensemble de couple clé/valeur et sert précisement à transmettre des données de formulaire. Il se comporte comme l'utilisation d'une balise HTML form qui serait assignée de l'attribut enctype='multipart/form-data'

    Initialiser l'objet FormData

    L'objet FormData fournit des moyens faciles de construire un ensemble de couple clé / valeur.

    Il est possible de fournir en premier paramètre directement un formulaire html.

    function Set_Form(){
      try{
        let Datas = new FormData(); //Initialise l'objet FormData dans la variable Datas de portée limitée à la fonction Set_Form.
      }
      catch(e){
        alert(e);
      }
    }

     Assigner des données textuels ou entiers

    Une fois notre objet FormData initialisé il est possible de lui assigner des couples clés/valeur.

    function Set_Form(){
      try{
        let Datas = new FormData(); //Initialise l'objet FormData dans la variable Datas de portée limitée à la fonction Set_Form.
    
        //Assigniation des différents types de données
        Datas.append("id", 123); // 123 est implicitement converti en chaîne "123"
        Datas.append("login", "JohnDoe");
      }
      catch(e){
        alert(e);
      }
    }

     Assigner des fichiers pour upload

    Voir même de passer pour paramètre des fichiers à uploader.

    function Set_Form(){
      try{
        let Datas = new FormData(); //Initialise l'objet FormData dans la variable Datas de portée limitée à la fonction Set_Form.
    
        Datas.append("cv", $('#files').files[0]); //Assigne le fichier 0 de l'input de type "file"
        Datas.append("lettre", $('#files').files[1]); //Assigne le fichier 1 de l'input de type "file"
      }
      catch(e){
        alert(e);
      }
    }

     Les paramètres de la requête à connaître pour utiliser convenablement l'objet FormData et la requête AJAX avec Jquery

    data : cette propriété sert à stocker les données à envoyer (ici l'objet FormData).

    cache : ce paramètre permet de spécifier si le navigateur doit mettre en cache les pages demandées. (à assigner à false)

    contentType : permets de préciser le type de contenu à utiliser lors de l'envoi au serveur. (à assigner à false)

    processData : définit si les données envoyées (via data) doivent être transformées en chaine de requête (ex : ?id=1?login=johnDoe). (à assigner à false)

    Code Html dans index.php

    <html>
    	<header>
    		<title>Démo ajax et php</title>
    	</header>
    	<body>
    		<a href="#" onclick="Set_Form(); return false;">Test</a>
    		<script type="text/javascript" src="jquery_3_1_1.js"></script>
    		<script type="text/javascript" src="ajax.js"></script>
    	</body>
    </html>

    Code Jquery dans ajax.js

    Dans le fragment suivant de code, nous initialisons l'objet FormData puis lui ajoutons plusieurs couple de données. Avant d'éxécuter la requête Ajax en Post. A noter qu'il est possible de définir plusieurs paramètre l'un des plus important étant la définition d'une valeur limite de tentative d'éxécution de la requête ajax via le jquery avec le paramètre timeout.

    function Set_Form(){
      try{
    	let Datas = new FormData();
    		Datas.append("module", "Tests");
            Datas.append("method", "Demo");
    		Datas.append("id", 123); // 123 est implicitement converti en chaîne "123"
    		Datas.append("login", "JohnDoe");
    
    
    	let request =
          $.ajax({
            type: "POST", 
            url: "controller.php",
            data:Datas,
            timeout: 120000, //2 Minutes
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function () {
              //Code à jouer avant l'appel ajax en lui même
            }
          });
    
          request.done(function (output_success) {
              //Code à jouer en cas d'éxécution sans erreur du script du PHP
              alert(output_success);
          });
          request.fail(function (http_error) {
    		//Code à jouer en cas d'éxécution en erreur du script du PHP
    
    		 let server_msg = http_error.responseText;
    		 let code = http_error.status;
    		 let code_label = http_error.statusText;
             alert("Erreur "+code+" ("+code_label+") : "  + server_msg);
          });
    
          request.always(function () {
             //Code à jouer après done OU fail dans tous les cas 
          });
    
      }
      catch(e){
        alert(e);
      }
    }

    Code Php dans controller.php

    Le traitement côté serveur s'effectue de la même façon que si nous avions transmis un formulaire classique. Il suffit donc d'utiliser les paramètres en POST ou en GET correspondant au paramétrage de la requête AJAX.

    Ici la requête AJAX effectuée avec JQuery est réalisée en post.

    <?php
    
      try{
            if(isset($_POST['module']) && isset($_POST['method'])){
    			$Module = $_POST['module'];
    			$Method = $_POST['method'];
    			
                switch($Module){
                    case 'Tests':
                        switch($Method){
                            case 'Demo':
                                if(!isset($_POST['id']) | !isset($_POST['login'])) throw new Exception("Paramètres manquant");
    								
    							//Inclure un script PHP 
    							//Appeler la fonction cible 
    							//Retourner la valeur 
    							
                                echo $Module."~".$Method . " id = " .$_POST['id'] .' login = '. $_POST['login'];
    							http_response_code(200);  
                            break;
                            default:
    							throw new Exception("Méthode inéxistante");
                              break;
                        }
                    break;
                    default:
    					throw new Exception("Module inéxistant");
                      break; 
                }
            }
        }
        catch(Exception $e){
    		echo $e->getMessage();
            http_response_code(404);  
        }
    	
    ?>	

    Vous savez maintenant comment utiliser Ajax et JQuery via des requêtes en POST (ou en GET) pour réaliser des appels serveur asynchrone.