Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js

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.
Vous pouvez bien sûr réaliser une requête AJAX en JS natif mais c'est tellement plus simple en JS-jQuery.

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 tâches se poursuivent. On dit que le traitement est asynchrone.

jQuery simplifie la programmation d'une requête AJAX, ce framework propose différentes méthodes : $.ajax(), $.get(), $.post() mais aussi une méthode ultra simple à mettre en oeuvre : load().

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 d'emploi de load()

Le code de la page

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. Le texte 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.

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" sans que la lecture de la vidéo soit interrompue.

Etudions maintenant le script.

Le rendu

Consignes : démarrez la lecture la vidéo puis cliquez successivement sur le bouton de commande afin de récupérer le fichiers sur le serveur.
Vous pouvez constater que la page est actualisée (boite remplie avec le texte du fichier récupéré sur le serveur) sans que la vidéo s'interrompe.

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 pour 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 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 CSS & HTML

Le script

$('button:eq(0)').click(function() {
		$('div').load('texte.htm #fran', function(reponse, statut, xhr)
	{
        if(statut == "error")
        console.log("Erreur: " + xhr.status + ": " + xhr.statusText);
    });
  });

$('button:eq(1)').click(function() {
		$('div').load('texto.htm #engl', function(reponse, statut, xhr)
	{
           if(statut== "error")
        console.log("Erreur: " + xhr.status + ": " + xhr.statusText);
    });
  });

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 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 volontairement fausse, le nom de la source est mal orthographiée ('texto.htm #engl') au lieu de "texte.htm#angl".
Ainsi vous verrez tout l'intérêt de la fonction de rappel à l'occasion de l'échec du chargement

Le contenu du fichier "texte.htm"

Il comprend deux parties identifiés chacune par un ID.

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.


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.

Le rendu

Affichez la console !
Cliquez sur le premier bouton puis sur le second, il y a alors un message d'erreur.

Méthode load : exemple 3

Dans mon site toutes les pages ont pour extension .php afin de pouvoir inclure un petit script PHP.
Ce script est basé sur la fonction PHP require("nomdusommaire").
En effet chaque page doit inclure le sommaire du tuto, sommaire qui est un fichier .htm

Sachez que l'inclusion de fichiers dans une page peut se faire autrement qu'en PHP mais avec une requête AJAX.

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 le contenu de l'en-tête, du menu de navigation et du pied de page changent régulièrement en fonction d'évènements.

Il serait donc maladroit d'écrire directement 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.

Le code des fichiers à inclure dans chaque page

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)

Toutes les pages du site auront la même structure que "activités.htm" ... <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> <button onclick ="misenpage()">Mise en page du document</button> <script> function misenpage() { $("style").load("style1.css"); $("header").load("entete.htm"); $("nav").load("menu.htm"); $("footer").load("pied.htm"); } ...

Les conteneurs style, header, nav, footer sont vides de tout contenu !
Si clic sur l'élément button appel d'une fonction d'une requête AJAX qui charge différents fichiers et les affecte dans le bon conteneur : le fichier "style.css" dans le conteneur STYLE, "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.

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 (ce qui exceptionnel)
• de limiter le temps de chargement
• etc.

Rappels :
• synchrone : bloque le flux d'exécution de la page tant que le chargement n'est pas terminé
• asynchrone : ne bloque pas le flux d'exécution de la page même si le chargement traine un peu

Exemple

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

Le code HTML

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 = $('div');
    $.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()

J'utilise cette fois 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