Tutoriel sur Javascript

jQuery et AJAX

Ce tuto 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.
Dans ce chapitre j'utilise le framework jQuery pour réaliser des 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.

Par ailleurs le rechargement partiel de la page n'est pas bloquant : les autres instructions du script sont exécutées. On dit que le traitement est asynchrone.

La méthode load() de jQuery

Cette méthode est très simple à mettre en oeuvre mais offre peu de possibilités de personnalisation du chargement ; La requête est forcément asynchrone !

Premier exemple avec la méthode load()

Le code de la page

Cette page contient une boîte DIV sans contenu. Lorque vous cliquez sur le bouton de commmande, cette boite charge le fichier "bio_appro.php".

Le rendu

Dans la boite DIV le texte "Bonjour mes amis ... " s'affiche avant l'affichage du gros document PHP.
Ce qui signifie que la deuxième instruction du script s'exécute alors que la première instruction (la requête AJAX) n'est pas encore terminé. Il s'agit donc d'un traitement asynchrone !

Deuxième exemple de requête AJAX avec la méthode load()

Avec la méthode load() on peut demander le chargement partiel d'un fichier et de plus la méthode accepte en deuxième paramètre une fonction de rappel. Cette fonction s'avère très utile en cas d'échec du chargement : explique les raisons de l'échec.

Le code HTML du document

Le script

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 que le contenu identifié "fran".

Le deuxième argument de la méthode load() est une fonction de rappel avec trois paramètres :
• reponse : contient les données résultant de la demande
• statut : contient l'état de la demande ("success", "notmodified", "error", "timeout", ou "parsererror")
• xhr : référence l'objet XMLHttpRequest ; a plusieurs propriétés dont xhr.status & xhr.statusText.

La deuxième instruction est délibéremment fausse, le nom de la source est mal orthographiée ('texto.htm #engl') au lieu de "texte.htm#angl".
Ceci pour vous montrer tout l'intérêt de la fonction de rappel en cas d'échec du chargement.

Le contenu du fichier "texte.htm"

Il comprend deux parties identifiés chacune par un ID. <p id ="fran"> Toutes les connaissances que les hommes avaient mises sur Internet lui étaient accessibles. ... son savoir, se connecter à une nouvelle caméra vidéo, ou même se connecter à des robots. </p> <p id="angl"> As a single parent for nearly a decade-she and Richard's father, Daniel Stallman, were married in 1948, ... two forces intertwined, Lippman says, that she and her son experienced their biggest battles. </p>

Le rendu

Cliquez sur le premier bouton puis sur le second, le texte en anglais ne s'affiche pas dans la boite par contre une boite de dialogue indique une erreur (error 404 donc fichier non trouvé).
Notez par ailleurs que le texte "Version anglaise du texte s'affiche alors que l'instruction précédente est en cours. Encore une fois le traitement est asynchrone.

Méthode load : exemple 3

Dans cette exemple je vous montre que la technologie AJAX peut se substituer aux inclusions de fichiers via PHP.

Thème

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

Toutes les pages ont la même structure :
• un en-tête de page
• un menu de navigation
• le corps de la page
• le pied de page

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 les contenus de l'en-tête, du menu de navigation et du pied de page changent très régulièrement en fonction de l'actualité.
Il serait donc très maladroit d'écrire directement dans chaque page le code HTML correspondant aux zones en-tête, navigation et pied de page.
Il faut donc inclure des fichiers dans chaque page web.

Deux technologies possibles :
• utiliser les fonctions include() / require() de PHP ; les pages web doivent alors avoir l'extension .php
• utiliser des requêtes AJAX ; les pages web peuvent alors avoir l'extension .htm ou .html

Le code des fichiers à inclure dans chaque page web

La feuille de style externe nommée : "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; }

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)

Le code HTML

Le script

Des requêtes AJAX qui batissent la page web.

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

Toutes les pages du site auront la même structure que "activités.htm".

Les conteneurs style, header, nav, footer sont vides de tout contenu !
Si clic sur l'élément button appel des requêtes AJAX qui chargent différents fichiers et les affecte dans le bon conteneur : le fichier "style.css" dans le conteneur STYLE ; le document "entete.htm" dans le conteneur HEADER ; etc.

Le rendu dans un Iframe :

Si vous cliquez sur le bouton de commande les boites se remplissent de leur contenu et il y a mis en forme de la page.
On pourrait imaginer bien sûr que l'appel du script soit automatique.

La méthode $.ajax()

La méthode load() est simple à mettre en oeuvre mais offre peu de possibités de paramétrage.

Or il peut être intéressant :
• de suivre l'évolution du chargement
• d'afficher un message d'erreur si échec de chargement
• de réaliser un chargemenent synchrone
• de limiter le temps de chargement
• etc.

Exemple

Le chargement d'un gros document ne doit pas bloquer l'incrémentation d'un compteur.

Le code HTML du document

Le script

document.body.onload = function()
{
	var temps =0; 
	var compteur = document.querySelector('article');
	var stop = setInterval(function(){temps++;compteur.innerHTML = "temps écoulé :" + temps;},1000); 
};

$('button').on('click',function()
{
    var boite = $('#texte');
    $.ajax({
			type: 'GET',
           url: 'bio_appro.php',
		   asynch : true,
		   timeout: 10000,
           success: function (data) {boite.html(data);},
           error: function() {boite.html("Désolé, aucun résultat trouvé.");}
    });

});

Le script comprend deux parties :
• incrémentation d'un compteur chaque seconde : script écrit en JS natif
• requête AJAX écrite en jQuery et basée sur la méthode $.ajax()

La méthode $.ajax() qui permet de personnaliser sensiblement la requête :
• type : GET pour chargement ou POST pour versement (envoi)
• asynch: si valeur est false, la requête est synchrone
• timeout : ici le chargement est limité à 10 secondes
• succes : action en cas de succès de la requête
• error: action en cas d'échec du chargement

Le rendu