Le squelette du code HTML, les styles CSS et fonctions JS embarquées
• HTML
► Remarquer les balises META indiquant notamment que ce fichier est encodé en UTF8.
► Le HEAD contient les styles et le Javascript.
► Le BODY est composé de blocs : HEADER, SECTION et FOOTER qui s'utilisent comme des DIV.
► Au début du BODY on trouve 3 DIV spécifiques :
♦ AjaxLoader qui est l'image de la roue qui tourne durant la requête AJAX.
♦ CodePopup qui permettra d'afficher un contenu en mode popup.
♦ Overlay qui est le rideau qui recouvre la page pendant qu'une popup est affichée.
► A voir aussi sur la page d'accueil les liens appliqués à de gros pavés de texte. Commentaires dans le code.
• CSS
► La feuille de style externe « highlight-php ... css » servira à coloriser le texte source dans la popup.
► Le squelette CSS donne en premier les styles applicables sur tous les écrans, puis surcharge les styles spécifiques à des écrans de plus en plus petits.
► Remarquer le style pour les liens dans leurs différents états : on les stylera à notre goût.
► Remarquer les classes « .BlocXXX » qui seront utilisées pour le contenu sous forme de pavé. En réduisant la largeur de la fenêtre du navigateur on constate que les différents styles s'appliquent.
► La classe .BlocFlex s'utilisera chaque fois qu'une section contiendra plusieurs blocs.
• JAVASCRIPT
► La fonction « Element » retournant un objet du DOM selon son ID sera utilisée intensivement.
► Les fonctions AfficherPopup et CacherPopup admettent plusieurs paramètres. Voir les commentaires.
► Les fonctions JS suivantes participent au processus AJAX : CreateXHR, SendData et GetResponse.
► Remarquer le code Javascript embarqué dans les attributs « onclick ».
Une requête AJAX vers un script PHP situé sur le serveur
Le bouton « Voir sources » ci-dessous va effectuer une requête vers un script PHP qui renverra le code de cette page avec une coloration syntaxique. Celui-ci s'affichera dans une popup. Comment ça marche ?
• Le click sur le bouton exécute la fonction SendData.
• La fonction « SendData » prend 4 paramètres :
► ImageLoader : l'id de la DIV contenant l'image de la roue tournante
► FormData : Objet conteneur de données, non utilisé ici
► URL : La destination de la requête
► Fun : Le nom de la fonction de rappel qui recevra la réponse
• L'URL fournie est paramétrée « exemples.ajax.php?Action=VCO&Source=page1.htm » car j'ai décidé que le script PHP (étudié plus tard) attend un paramètre nommé « Action » et un autre nommé « Source ». Noter que « location.href.split('/').slice(-1) » renvoie le nom de la page actuelle.
• La fonction de callback « GetResponse » est exécutée au retour de la requête AJAX et son paramètre « Texte » contient la réponse fournie par le script PHP.
• Au début d'AJAX les échanges de données se faisaient au format XML atrocement verbeux ; maintenant c'est souvant au format JSON qui introduit quand-même une complexité supplémentaire inutile dans les cas simples.
Une fenêtre popup pour afficher la réponse AJAX - Récupérer en JS une valeur CSS calculée
La réponse à la requête comporte une première ligne de paramètres suivi des données, ici c'est un code « HTML décrivant du HTML » colorisé !
Il faut d'abord extraire les paramètres dont le premier est un code action.
• La fonction GetResponse va ensuite initialiser les dimensions de la popup, puis modifier certains styles et la remplir.
• Tout le texte est dans une balise « code », elle même dans une balise « pre » Pour ne pas toucher au fichier highlight .... css on va :
► Supprimer les scrollbars de « code » car on en a mis sur la popup
► Récupérer la couleur de fond de « code » avec « getComputedStyle » et l'appliquer à la popup.
• Enfin la fonction affiche la popup.
• On a ajouté un « onclick » sur la DIV de l'overlay afin qu'un click hors popup efface celle-ci.
