Ajax en Jquery
Ajax pour Asynchronous JavaScript and XML, correspond à un groupe de méthodes et de moyens visant à permettre d'établir une communication asynchrone entre le navigateur et le serveur. Ajax permet d'effectuer des modifications parcellaires sur une page web, sans recharger l'ensemble de la page internet.
L'objet XMLHttpRequest permet de répondre à ce besoin, cependant sont utilisation en JavaScript natif est relativement lourde à mettre en place. Jquery permet de réaliser des appels Ajax de manière beaucoup plus simple.
Il est important de comprendre que les appels Ajax sont préalablement instanciés par du code en JavaScript. Dans les grandes lignes, on met en place un gestionnaire d'événements pour anticiper les actions à réaliser avant l'appel et après le retour du serveur (fonction de rappel ou callback) puis on effectue des appels Ajax en Jquery au serveur.
Ajax faisant appel à des technologies différentes, nativement une requête XMLHttpRequest peut se comporter de différente façon d'un navigateur à l'autre. Jquery est là pour pallier à ce problème et fournit un cadre pour réaliser des appels Ajax plus standardisés et surtout garantir qu'une requête Ajax s'exécute de la même façon sur chaque navigateur.
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 il est également possible de le faire 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.). Ces requêtes peuvent répondre aux standards des méthodes POST ou GET.
Il est alors possible d'appeler un fichier Php distant et donc de récupérer des données ou d'en envoyer. De lire directement le contenu d'un fichier sans passer par un script intermédiaire hébergé sur le serveur.
A noter que l'utilisation de JQUERY simplifie grandement les interactions avec AJAX et s'évite de devoir créer manuellement des appels via XmlHttpRequest.
Dans cet article nous allons aborder les points suivants :
- Dépendances pour utiliser Ajax en Jquery.
- Découverte de la méthode Ajax en Jquery.
- Les fonctions de post traitements (callback) avec Ajax.
- L'objet FormData.
- Exemple d'un controleur PHP.
- Requête GET en Ajax avec Jquery
- Requête POST en Ajax avec Jquery
- Récupérer un script avec Ajax avec Jquery
- Récupérer un fichier JSON avec Ajax avec Jquery
Dépendances nécessaires pour utiliser la méthode Ajax Jquery.
Il est primordial 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. Pour ce faire nous utilisons la balise script.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>Ajax avec la méthode $.ajax() en Jquery.
Il existe de multiples façons d'instancier un appel via l'objet XmlHttpRequest que ce soit en POST ou en GET.
Le constructeur $.ajax() prend deux paramètres : type et url.
Type : définit la méthode à employer POST ou GET.
D'après les conventions il est préférable d'utiliser POST pour envoyer des données et GET pour en recevoir.
Url : définis le script ou la ressource à appeler.
$.ajax({
type: 'POST', //La méthode cible (POST ou GET)
url : 'Controller.php' //Script Cible
});Les possibilités synchrones / asynchrones grâce à Ajax Jquery.
Il est possible de l'utiliser de deux façons :
Synchrone : bloque le flux d'exécution de la page tant que le traitement n'est pas terminé.
Asynchrone : ne bloque pas le flux d'exé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 à connaître avec Ajax Jquery :
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) avec Ajax Jquery :
Les requêtes Ajax incluent 1 fonction de pré-tratement (qui s'éxécutera avant la requête) et 3 fonctions de post traitement (qui s'éxécuteront après l'exécution de la requête).
(pre-traitement) beforeSend : Le fragment de javascript à éxécuter avant le lancement de la requête Ajax avec Jquery (permets 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 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
});Assignation des paramètres à envoyer.
Pour envoyer des données à votre code PHP, il est préférable d'utiliser l'objet FormData. Cette objet compile un ensemble de couple clé/valeur et sert à 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 en Jquery :
L'objet FormData fournit des moyens faciles de construire un ensemble de couple clé / valeur en jquery.
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 en Jquery grâce à FormData :
Une fois notre objet FormData initialisé il est possible de lui assigner des couples clés/valeur qui correspondrons aux paramètres envoyés en POST ou en GET.
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 en Jquery :
Voir même de passer pour paramètre des fichiers à uploader toujours en s'appuyant sur ajax.
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 paramètres. 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 en 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,
dataType: 'json',
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.output);
});
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{
header('Content-Type: application/json');
$Output = array(
"error" => false,
"message" => "N/A",
"output" => "N/A"
);
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
$Response = "hello";
$Output["output"] = $Response;
http_response_code(200);
break;
default:
throw new Exception("Méthode inéxistante");
break;
}
break;
default:
throw new Exception("Module inéxistant");
break;
}
}
} catch (\Throwable $e) {
$Output["error"] = true;
$Output["message"] = $e->getMessage();
} finally {
echo json_encode($Output, JSON_FORCE_OBJECT);
die();
}
Appel avec la méthode $.get() en JQUERY requête en GET :
La méthode $.get() est un alias d'appel simplifié à la méthode $.ajax() vue plus haut qui utilise la méthode GET pour la résolution de sa requête.
Elle supporte 4 paramètres :
- Le fichier a appelé avec la requête Ajax.
- Un tableau de données (ou false) si aucun paramètre n'est envoyé.
- La fonction appelée par le callback en cas de succès.
- Le format des données de retour attendues.
$.get(
'controller.php', // Le fichier à appeler sur serveur.
'false', // Spécifier à la méthode qu'aucun paramètre n'est envoyé
append_in_body, // Le nom de la fonction à appeler pour le callback
'html' // Format des données retournées par le serveur.
);
function append_in_body(in_html){
$('body').append(in_html);
}
Il est également possible de simplifier l'appel à la méthode $.get() principalement pour ajouter des contenus HTML rapidement.
$.get('mapage.html', function( data ) {
alert(data);
});Appel avec la fonction $.post() en JQUERY requête en POST :
La méthode $.post() permet de simplifier un appel en utilisant la méthode de résolution POST de la requête.
Elle supporte 4 paramètres :
- Le fichier a appelé avec la requête Ajax.
- Un tableau de données (ou false) si aucun paramètre n'est envoyé.
- La fonction appelée par le callback en cas de succès.
- Le format des données de retour attendues.
$.post(
'controller.php', // Le fichier à appeler sur le serveur.
{ //Tableau des paramètres
user : 'toto',
user_id : 1
},
traitement_callback, //fonction de retour
'text' // Format des données retournées par le serveur
);
function traitement_callback(in_text){
alert(in_text);
}Appel avec $.getScript() en JQUERY :
Il est possible d'appeler un script javascript directement via la méthode $.getScript(). Cette méthode effectue une requête en GET.
$.getScript({
url: "monscript.js",
dataType: "script"
})
.done(function (script, textStatus) {
//Faire quelquechose avec le script chargé
})
.fail(function (jqxhr, settings, exception) {
console.error("fichier introuvable");
}
);Appel avec $.getJSON() en JQUERY :
Il est également envisageable d'appeler un fichier JSON directement via la méthode $.getJSON(). Cette méthode effectue une requête en GET.
$.getJSON('datas.json', function( data ) {
alert(data.myproperty);
});En conclusion grâce à Jquery, l'intégration des appels AJAX en POST ou en GET est facilitée. Vous savez maintenant comment utiliser les requêtes Ajax et JQuery pour réaliser des appels serveur asynchrones.