Les requêtes AJAX avec jquery

Publié le : 21-01-2019 09:22

Introduction

L'objectif de cet article, est de permettre de donner les bases pour effectuer des communications entre un client (via un code en jquery) 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.

Dépendances nécessaires

Il est primordiale d'intégrer la bibliothèque Jquery

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 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 js à éxécuter avant le lancement de la requête AJAX (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 js 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 js à 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

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

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

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

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

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.

<?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);  
    }
	
?>