jQuery et AJAX

Ce site est en principe limité à la programmation web côté client. Mais je ne peux m'empêcher de faire une exception et d'évoquer la technologie AJAX.

Pendant longtemps JavaScript n'était utilisé que par le navigateur (côté client).
Désormais JavaScript est de plus en plus utilisé côté serveur ; pensez à Node.js !
C'est la technologie AJAX qui a initié ce mouvement ; jQuery simplifie énormément la programmation de requêtes AJAX.

Mais qu'est-ce AJAX ?

AJAX est l'acronyme de Asynchronus JavaScript And Xml.

La technologie AJAX permet de récupérer des données auprès du serveur et donc d'actualiser la page sans pour autant devoir la recharger totalement. C'est donc très intéressant en particulier lorsque la page est lourde.

jQuery simplifie considérablement la programmation d'une requête AJAX en particulier grâce à sa méthode load().

JQuery propose d'autres méthodes dans le cadre de requêtes AJAX : $.ajax() et ses raccourcis ($.get(), $.post()). Dans ce chapitre je me contente d'évoquer la méthode load().

Premier exemple de requête AJAX-Jquery

Le code de la page (extraits)

<noscript> <p class ="remarque"><b>JavaScript est désactivé. La page ne peut s'afficher correctement !</b> </noscript> ... <h3>Vidéo : la mue d'une Araignée de mer </h3> <video width = '60%' height ='200' controls src = "../audio_video/mue.mp4" preload ='auto'></video> <h3>Ci-dessous boîte initialement vide ; texte à récupérer sur le serveur ! </h3> <div></div> <button>version française</button> <button>version anglaise</button> ... <script> $("button:eq(0)").click(function() {$("div").load("francais.txt");}); $("button:eq(1)").click(function() {$("div").load("anglais.txt");}); </script> ...

Bien évidemment il faut que JavaScript soit activé par le navigateur pour que la requête AJAX fonctionne.
Aussi il est préférable d'ajouter le conteneur noscript dans la page. Le code contenu dans ce conteneur s'affichera uniquement si JavaScript est désactivé !

Cette page contient une vidéo qui est préchargée automatiquement c'est à dire chargée en même temps que la page.
Donc le rechargement total de cette page est à éviter...

Cette page contient une boîte DIV sans contenu. Selon que vous cliquez sur le premier bouton ou le deuxième vous remplissez cette boîte avec un fichier texte en Français ou en Anglais.

Etudions maintenant le script.
Il s'agit de deux requête AJAX écrite en jQuery. Emploi dans chaque requête de la méthode load() de jQuery.

Le contenu des fichiers

Ci-dessous contenus des fichiers susceptibles d'être chargés par la requête AJAX.

francais.txt :

<h2>Mon tailleur est riche et sa femme est très jolie. <br>Je suis pauvre et ma femme est moche.</h2>

anglais.txt :

<h2>My taylor is rich and his wife is very pretty. <br>I am poor and my wife is ugly.</h2>

Test de l'exemple

Consignes : démarrez la lecture la vidéo puis cliquez successivement sur les deux boutons de commande afin de récupérer les fichiers sur le serveur.
Vous pouvez constater que la page est actualisée (boîte rose remplie avec le texte du fichier récupéré sur le serveur) sans que la vidéo s'interrompe (pour redémarrer au début) ce qui démontre qu'il n'y a pas rechargement complet de la page.

C'est ça l'avantage d'une requête AJAX par rapport à une requête HTTP !
A vous !

Un serveur web local

Si vous avez quelques connaissances en PHP vous savez que le code PHP contenu dans une page web s'exécute côté serveur et que donc pour tester en local ce code il faut passer par un serveur web installé sur votre poste.

Et bien une requête AJAX c'est pareil : il s'agit d'exécuter une requête auprès du serveur.
Pour tester la page contenant une requête AJAX en local il faut donc que votre PC dispose d'un serveur web.
Concrètement vous devez avoir installé un pack tel wampserver (contenant entre autres le serveur Apache).

Deuxième requête AJAX - jQuery

Avec la méthode load() on ne peut demander le chargement partiel d'un fichier.
Et la méthode accepte en deuxième paramètre function(liste d'instructions) ...

Le contenu du fichier "texte.htm"

Au lieu de deux fichiers texte comme dans l'exemple précédent il y a ici qu'un seul fichier contenant le texte en français et en anglais.

<h2 id ="fran">Mon tailleur est riche et safemme est très jolie. <br>Je suis pauvre et ma femme est moche.</h2> <h2 id="angl">My taylor is rich and his wife is very pretty. <br>I am poor and my wife is ugly.</h2>

Notez deux balises H2 identifiées respectivement "fran" et "angl"

Le script de la deuxième requête AJAX

$('button:eq(0)').click(function() { $('div').load('texte.htm #fran', function() { alert('boîte DIV mise à jour'); }); }); $('button:eq(1)').click(function() { $('div').load('texte.htm #angl', function() { alert('boîte DIV mise à jour'); }); });

Notez bien le premier paramètre de la méthode load() dans la première instruction : 'texte.htm #fran'. Ce qui veut-dire : ne charger dans le fichier "texte.htm" que le contenu identifié "fran".

Le deuxième argument de la méthode est une fonction anonyme qui ne comprend qu'une instruction alert.
Testez cette deuxième requête !

Troisième requête AJAX-jQuery

Le site d'un hôtel trois étoiles comprend une dizaine de pages.

Dans toutes les pages l'en-tête, la zone de navigation et le pied de page sont identiques.
Seul le corps de page est différent selon les pages.
Par ailleurs le contenu de l'en-tête, du menu de navigation et du pied de page changent régulièrement.

Il serait donc maladroit d'écrire dans chaque page le code HTML des boîtes en-tête de page, navigation et pied de page.
Il faut aussi externaliser la feuille de style qui est commune aux différentes pages.

Généralement un site web est basé sur une série de fichiers pouvant être appelés dans différentes pages.
C'est ce qu'on appelle faire de la gestion de contenu ou CMS (Content Management System).
WordPress est un célèbre logiciel de CMS

Dans un logiciel CMS l'inclusion de ces petits fichiers dans les différentes pages est faite côté serveur : emploi du PHP et plus précisément de la fonction include.

Mais, bonne nouvelle, avec la méthode load de jQuery on peut aboutir au même résultat.

Donc dans chaque page du site on va inclure différents petits fichiers pour bâtir le code HTML & CSS de la page.

Le code des fichiers d'inclusion

La feuille de style externe (style1.css) :

* {font-size : 14px ; margin :0px ; padding :0px ; color : olive ; text-decoration :none ; } body {width : 98% ; margin :auto ; } header, nav, article, footer {background : lime ; margin-bottom : 10px ; box-shadow : 5px 5px 5px olive ; } header {width : 100% ; float : left ;height :100px ; } nav {width : 29% ; float : left ; height :400px ;} article{width : 69% ; float : right ;height :400px ; } footer {width : 100% ; float : left ;height :100px ; } h1, h2 {text-align : center; font-size : 150%;} p {text-align : justify; padding : 5px ;} a {display : block ; padding : 5px; }

Dans le cadre du "site adaptatif" la largeur est exprimée en % (de la largeur de l'écran).

Le fichier "entete.htm" :

<h1>En-tête de page</h1> <p>Blabla <br>Blabla ...</p>

Le fichier "menu.htm" :

<h2>Liens</h2> <a href ="#" >Lien 1</a> <a href ="#" >Lien 2</a> <a href ="#" >Lien 3</a> <a href ="#" >Lien 4</a> <a href ="#" >Lien 4</a> <a href ="#" >Lien 5</a>

Le fichier "pied.htm" :

<h2>Pied de page</h2> <p>Blabla ... <br>Blabla ...</p>

Le code de la page "activites.htm" (une des pages du site)

... <style></style> </head> <body> <header></header> <nav></nav> <article> <h1>Les activités</h1> <h2>L'espace détente</h2> <p>Blabla ... <br>Blabla ... <h2>Le mini golf</h2> <p>Blabla ... <br>Blabla ... <br>Blabla ... <br>Blabla ... <h2>L'espace multi média</h2> <p>Blabla ... <br>Blabla ... <br>Blabla ... <br>Blabla .. </p> </article> <footer></footer> ...

Les conteneurs style, header, nav, footer sont vides !

Le script dans chaque page du site

	$("style").load("style1.css");
	$("header").load("entete.htm");
	$("nav").load("menu.htm");
	$("footer").load("pied.htm");

Les boîtes style, header, nav, footer sont remplies grâce à des requêtes AJAX écrites avec jQuery !
Affichez la page "activités" élaborées grâce à des requêtes AJAX

La page "activités" s'affiche parfaitement (contenu et mise en forme). Donc non seulement le code CSS est externalisé mais aussi une grande partie du code HTML.
Vous comprenez, j'en suis certain, l'intérêt pratique de cette solution. Si par exemple, vous voulez changer l'en-tête de page (ajouter une image en guise de logo par exemple) il suffit de modifier un seul fichier (entete.htm) et non pas toutes les pages ...
Autre avantage : le développeur web n'a plus besoin de connaître le langage PHP (fonctions include ou require).

Inconvénient : il faut impérativement que le JavaScript soit activé et il peut y avoir un temps de latence avant la mise en page par la requête car la mise en page se fait côté client !
Retour menu