AJAX
La branche AJAX (Asynchrone JAvascript Xml) de javascript va vous permettre de lancer des requêtes sur les protocoles HTTP ou HTTPS indépendamment du navigateur. Cette requête permet d’envoyer des informations sous la forme de variables GET ou POST, comme dans l’envoi des données dans un formulaire, sans qu’il soit nécessaire de recharger la page. Les requêtes se font en arrière-plan.
La requête entre le client et le serveur est asynchrone : pas besoin d’attendre qu’elle soit achevée pour commencer de nouvelles opérations.
Le flux se repartit en deux étapes : la requête de l’utilisateur et la réponse du serveur.
L’objet XMLHttpRequest
Pour échanger des données avec le serveur il faut commencer par créer l’objet XMLHttpRequest qui est pris en charge par tous les navigateurs modernes.
let xhttp = new XMLHttpRequest();
Cet objet va vous permettre d’envoyer des données mais aussi de les recevoir.
Ouvrir une demande au serveur
La méthode open() de l’objet XMLHttpRequest permet d’ouvrir une requête AJAX. Elle prend en paramètres le type de requête (POST ou GET), le fichier (PHP, ASP..) qui va traiter la demande, et le mode Asynchone (‘true’ ou ‘false’).
let xhttp = new XMLHttpRequest();
xhttp.open('POST','traitement.php', true);
GET ou POST?
Avec la méthode GET les données à transmettre sont fournies dans l’url du fichier avec les signes ?et & (si vous voulez transmettre plusieurs valeurs).
let xhttp = new XMLHttpRequest();
xhttp.open('GET','traitement.php?var1=valeur1&var2=valeur2', true);
La méthode GET est la plus simple et la plus rapide mais ne convient pas pour des grosses quantités de données. Elle est aussi moins sûre lorsque les données sont saisies par l’utilisateur. Il faut pour cela protéger les valeurs avec la fonction encodeURIComponent().
let xhttp = new XMLHttpRequest();
let valeur1 = encodeURIComponent(valeur1);
let valeur2 = encodeURIComponent(valeur2);
xhttp.open('GET','traitement.php?var1=valeur1&var2=valeur2', true);
La méthode POST est surtout utilisé pour des données en provenance d’un formulaire.
let xhttp = new XMLHttpRequest();
xhttp.open('POST','traitement.php', true);
Si vous n’utiliser pas l’API FormData (expliqué plus bas) pour la transmission des données, il faut indiquer qu’il s’agit de données d’un formulaire avec la méthode setRequestHeader() qui prend en paramètres l’en-tête en question et sa valeur.
let xhttp = new XMLHttpRequest();
xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhttp.open('POST','traitement.php', true);
Asynchrone ou pas?
Si le paramètre asynchrone de la méthode open() est fixé à true, la requête ne bloquera pas le script même si la réponse n’est pas encore parvenue. C’est le mode à utiliser pour ne pas rendre le script inactif sur le flux de retour. On prévoit, dans ce cas, un script pour faire patienter le client.
Envoyer une demande
La méthode send() de l’objet XMLHttpRequest permet d’envoyer la requête préparer par la méthode open(). Elle prend comme paramètre une valeur obligatoire.
Si la méthode d’envoi est GET, vous pouvez spécifier null comme valeur.
let xhttp = new XMLHttpRequest();
let valeur1 = encodeURIComponent(valeur1);
let valeur2 = encodeURIComponent(valeur2);
xhttp.open('GET','traitement.php?var1=valeur1&var2=valeur2', true);
//envoi de la demande
xhttp.send(null);
Si la méthode d’envoi est POST, vous pouvez spécifier une chaîne de données comme valeur.
let xhttp = new XMLHttpRequest();
xhttp.open('POST','traitement.php', true);
xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//envoi de la demande
xhttp.send('var1=' + valeur1 + '&var2=' + valeur2);
API formData
L’API formData va faciliter l’envoi des données d’un formulaire et permet d’éviter l’utilisation de la méthode setRequestHeader pour spécifier un en-tête.
Il faut commencer par instancier l’objet formData.
let data = new FormData();
Vous pouvez créer ensuite sur cet objet des propriétés de données avec la méthode append().
let data = new FormData();
data.append(var1, valeur1); // valeur1 est une valeur en provenance du formulaire
data.append(var2, valeur2); // valeur2 est une valeur en provenance du formulaire
Vous envoyez ensuite les données à travers la méthode send() de l’objet AJAX.
let xhttp = new XMLHttpRequest();
xhttp.open('POST','traitement.php', true);
// objet formData
let data = new FormData();
data.append(var1, valeur1);
data.append(var2, valeur2);
//envoi de la demande
xhttp.send(data);
En plus d’être simple d’utilisation, l’objet formData autorise l’envoi de données binaires comme l’upload de fichiers.
Les événements
Les événements permettent de suivre l’évolution de la requête depuis l’envoi jusqu’à la réponse. Il existe aussi un événement pour la gestion des erreurs.
La méthode addEventListener() sera utiliser pour écouter les événements.
Requête lancée
L’événemet loadstart est déclenché lorque la requête est lancée.
let xhttp = new XMLHttpRequest();
xhttp.open('POST','traitement.php', true);
// objet formData
let data = new FormData();
data.append(var1, valeur1);
data.append(var2, valeur2);
//envoi de la demande
xhttp.send(data);
//événement loadstart
xhttp.addEventListener("loadstart", transferBeginjs, false);
function transferBeginjs(evt) {
info.innerHTML = "Le transfert démarre.";
}
Progression du flux
La progression du flux peut être écouter par l’événement progress. Cet événement est intéressant pour le transfert de données volumineux (comme un fichier). Il fournit un paramètre à la fonction associée qui contient la propriété loaded (nombre d’octets chargés) et la propriété total (nombre total d’octets).
La propriété lengthComputable renvoie false si la progression n’est pas calculable.
let xhttp = new XMLHttpRequest();
xhttp.open('POST','traitement.php', true);
// objet formData
let data = new FormData();
data.append(var1, valeur1);
data.append(var2, valeur2);
//envoi de la demande
xhttp.send(data);
//événement progress
xhttp.addEventListener("progress", updateProgressjs, false);
function updateProgressjs (oEvent) {
if (oEvent.lengthComputable) { // si progression calculable
let percentComplete = oEvent.loaded / oEvent.total;
info.innerHTML = percentComplete;
} else {
info.innerHTML = "Impossible de calculer la progression puisque la taille totale est inconnue";
}
}
Requête terminée
L’événement load est déclenché lorsque la requête est terminée.
let xhttp = new XMLHttpRequest();
xhttp.open('POST','traitement.php', true);
// objet formData
let data = new FormData();
data.append(var1, valeur1);
data.append(var2, valeur2);
//envoi de la demande
xhttp.send(data);
//événement load
xhttp.addEventListener("load", transferCompletejs, false);
function transferCompletejs(evt) {
info.innerHTML = "Le transfert est terminé.";
}
Erreur de transfert
L’événement error est déclenché en cas d’erreur dans le transfert. La propriété status récupère le statut du transfert (200 si réussi) sous la forme d’un nombre et la propriété statusText le récupère sous forme de texte (‘OK’ si réussi).
let xhttp = new XMLHttpRequest();
xhttp.open('POST','traitement.php', true);
// objet formData
let data = new FormData();
data.append(var1, valeur1);
data.append(var2, valeur2);
//envoi de la demande
xhttp.send(data);
//événement error
xhttp.addEventListener("error", transferFailedjs, false);
function transferFailedjs(evt) {
info.innerHTML = "Une erreur est survenue pendant le transfert du fichier.
Code : "+ this.status + " Texte : " + this.statusText;
}
Abandon du transfert
L’événement abort est déclenché en cas d’abandon de la requête ou quand l’utilisateur clique sur le bouton arrêt de chargement du navigateur.
let xhttp = new XMLHttpRequest();
xhttp.open('POST','traitement.php', true);
// objet formData
let data = new FormData();
data.append(var1, valeur1);
data.append(var2, valeur2);
//envoi de la demande
xhttp.send(data);
//événement abort
xdr.addEventListener("abort", transferCanceledjs, false);
function transferCanceledjs(evt) {
info.innerHTML = "Le transfert a été annulé par l'utilisateur.";
}
Traitement des données de transfert
La propriété response de l’objet XMLHttpRequest permet de récupérer les données en provenance du fichier serveur.
Même si on peut utiliser le format texte, le format le plus utilisé est le format JSON (JavaScript Objet Notation).
L’exemple ci-dessous affiche sous forme les données retourner par le fichier PHP.
Code PHP
// chaîne json
$json = json_encode(
array(
'nom' => "durand" ,
'prenom' => "jean"
)
);
echo $json;
Code Javascript
let xhttp = new XMLHttpRequest();
xhttp.open('GET','//tutowebdesign.com/ajaxJson.php', true);
xhttp.send(null);
//événement load
xhttp.addEventListener("load", transferCompletejs, false);
function transferCompletejs(evt) {
// conversion de la chaine en objet JSON
let objetJson = JSON.parse(this.response);
document.write(objetJson.nom + " " + objetJson.prenom);
}
Affichage
Du coté javascript, la chaîne json est transformée en objet JSON avec la méthode JSON.parse().
Lecture d’un fichier texte
La propriété responseText de l’objet XMLHttpRequest permet de récupérer les données en provenance d’un simple fichier texte.
Contenu du fichier texte
Contenu au format texte.
Code html
<p class="synt" id="ajaxText"></p>
Code Javascript
let xhttp = new XMLHttpRequest();
xhttp.open('GET','/ajaxText.txt', true);
xhttp.send(null);
//événement load
xhttp.addEventListener("load", transferCompletejs, false);
function transferCompletejs(evt) {
document.getElementById('ajaxText').innerHTML = this.responseText;
}
Affichage
contenu au format texte.
Lecture d’un fichier XML
La propriété responseXML de l’objet XMLHttpRequest permet de récupérer les données en provenance d’un fichier xml.
Contenu du fichier xml
<?xml version="1.0"?>
<amis>
<personne>
<nom>Tine</nom>
<prenom>Dany</prenom>
</personne>
<personne>
<nom>Tine</nom>
<prenom>Roby</prenom>
</personne>
<personne>
<nom>Tine</nom>
<prenom>Isa</prenom>
</personne>
</amis>
Code html
<p class="synt" id="ajaxXML"></p>
Code Javascript
let xhttp = new XMLHttpRequest();
xhttp.open('GET','/ajaxXml.xml', true);
xhttp.send(null);
//événement load
xhttp.addEventListener("load", transferCompletejs, false);
function transferCompletejs(evt) {
let prenom = this.responseXML.getElementsByTagName('prenom');
document.getElementById('ajaxXML').innerHTML = prenom[0].firstChild.nodeValue;
}
Affichage
Dany
