Utiliser AJAX avec JQuery
AJAX (acronyme d'Asynchronous JavaScript and XML) permet de lire un fichier sur le serveur et de modifier une partie de la page web sur le client avec le contenu du fichier lu et sans recharger l'intégralité de la page côté client.
Le principe de base d'AJAX est basé sur l'utilisation de l'objet XMLHttpRequest de JavaScript permettant de lancer une requête au serveur pour récupérer les données au format XML provenant d'un fichier enregistré sur le serveur.
Comme pour la modification du DOM, JQuery permet d'utiliser très facilement AJAX sans utiliser directement l'objet XMLHttpRequest de JavaScript mais en utilisant une syntaxe simplifiée gâce à la fonction $.ajax().
L'exemple donné ici va lire sur le serveur le fichier texte toto.txt contenant une seule ligne, et va écrire son contenu dans la balise unique ayant pour identifiant ma_balise.
Voici le code source de la fonction JavaScript lire_fichier :
function lire_fichier() {
$.ajax({
type: "GET",
url: "toto.txt",
error:function(msg){
// message en cas d'erreur :
alert( "Error !: " + msg );
},
success:function(data){
// affiche le contenu du fichier dans le conteneur dédié :
$('#ma_balise').text(data);
}
});
Remarque : la fonction $.ajax() de JQuery utilise ici seulement 4 paramètres type url error et success mais il existe bien d'autres paramètres utilisables, comme par exemple le type de données reçues (paramètre dataType : type des données qui doivent être retournées par le serveur : xml, html, script, json, text).
Voici la balise unique ayant comme identifiant ma_balise :
cette balise p a pour ID ma_balise |
Et voici le lien appelant la fonction lire_fichier :
Appeler la fonction lire_fichier
Beau, élégant, simple et efficace, non ? C'est ça JQuery ! ;-)
Réalisé par Jean-Christophe MICHEL
Juillet 2015