Accueil

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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 car le chargement via la méthode load() est forcément asynchrone.

Etudions maintenant le script.

Test de l'exemple

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.

Le rendu dans un Iframe :

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 ne 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

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".

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.

Le rendu

Affichez la console !

Cliquez sur le premier bouton puis sur le second, il y a alors un message d'erreur.
xhr.status retourne : "404" et xhr.statusText retourne "Not found".

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 à condition bien sûr que JS soit activé par le navigateur ...

Thème

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 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" :

Le fichier "entete.htm" :

Le fichier "menu.htm" :

Le fichier "pied.htm" :

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"

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.
Dans la pratique le chargement serait automatisé ...

La méthode $.ajax()

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

Le code de la page

Le rendu