DHTML & Ajax

← Le volet web · 25 diapositives · flèches ou clic pour avancer

DHTML & AJAX - Concepts & techniques
Et si on utilisait la visibilité CSS des objets HTML pour faire des effets d'apparition ?
DHTML - Des données sont cachées dans les div cachées ou dans des balises script. Le JAVASCRIPT récupère des éléments déjà cachés dans la page et les fait apparaître ou disparaître. - Deux approches - possibles - AJAX - Les données ne sont pas toutes présentes dans la page au départ. Le JAVASCRIPT communique avec un SCRIPT SERVEUR pour demander de nouvelles informations et ensuite les afficher.…
Comment faire apparaitre - et disparaitre des contenus ? - Pour faire apparaitre et disparaitre des boîtes - On peut utiliser la propriété display - display: none; (fait disparaitre la boîte) - display: block; (fait apparaitre la boîte) - Il faut combiner l'approche avec un positionnement absolue dans un parent positionnel - #boite { position: absolute; top: 200px; left: 100px; } -…
1. - DHTML - C'est le HTML dynamique
L'IDÉE du DHTML - C'est d'avoir caché à l'avance des informations que l'on va afficher dynamiquement plus tard dans l'interface utilisateur. - Cela peut être : - des messages d’erreur qui apparaissent à coté des champs - des contenus cachés qui sont injectés dans un affichage central - des aperçus de nouvelles qui sont agrandies avec un petit + - mais que l’information est déjà cachée dans la page
Exemple de vedette - pokémon - #cible - #pikachu-detail - #pokemon2-detail - #autrepokemon-detail - #blablabl-detail - #blablabl-detail - #blablabl-detail - On veut prendre le contenu des boites cachées et le transvider dans la cible centrale.
Exemple de vedette - pokémon - #cible - #pikachu-detail - #pokemon2-detail - #autrepokemon-detail - #blablabl-detail - #blablabl-detail - #blablabl-detail - On veut prendre le contenu des boites cachées et le transvider dans la cible centrale. - var detailPikachu = document.getElementById(‘pikachu-detail’).innerHTML; - document.getElementById(‘cible’).innerHTML = detailPikachu;
Exemple d’erreurs de formulaire - # formulaire-inscription - # message-erreur-nom - La boite cachée est déplacée et rendus visible par le JAVASCRIPT - # message-erreur-courriel - # message-erreur-motdepasse - # message-erreur-courriel - #champs-nom - #champs-courriel - #champs-motdepasse
Exemple d’erreurs de formulaire - # formulaire-inscription - # message-erreur-nom - La boite cachée est déplacée et rendus visible par le JAVASCRIPT - # message-erreur-courriel - # message-erreur-motdepasse - # message-erreur-courriel - #champs-nom - #champs-courriel - #champs-motdepasse - var boiteErreur = document.getElementById(‘message-erreur-courriel’); - boiteErreur.style.display = ‘block’;…
Exemple d’aperçus contextuels - # nouvelle-1 - Pluie de grelons mardi ! Toute une surprise attendait les résidents du Québec mardi ... - #nouvelle-1-detail - blablabla tout le reste du texte blabla bla blablabla tout le reste du texte blabla bla blablabla tout le reste du texte blabla bla - # nouvelle-2 - Printemps attendu en mars ! - À cause de notre marmotte nationale nous savons que ... -…
Exemple d’aperçus contextuels - # nouvelle-1 - Pluie de grelons mardi ! Toute une surprise attendait les résidents du Québec mardi ... - #nouvelle-1-detail - # nouvelle-2 - Printemps attendu en mars ! - À cause de notre marmotte nationale nous savons que ... - #nouvelle-2-detail - # nouvelle-1 - Pluie de grelons mardi ! Toute une surprise attendait les résidents du Québec mardi ... -…
Exemple d’aperçus contextuels - # nouvelle-1 - Pluie de grelons mardi ! Toute une surprise attendait les résidents du Québec mardi ... - #nouvelle-1-detail - # nouvelle-2 - Printemps attendu en mars ! - À cause de notre marmotte nationale nous savons que ... - #nouvelle-2-detail - # nouvelle-1 - Pluie de grelons mardi ! Toute une surprise attendait les résidents du Québec mardi ... -…
Greffage de l’événement - Afin de ne pas mettre de JavaScript dans le code HTML, on veille à greffer l’événement déclencheur, souvent le onclick, à partir du javascript. - document.getElementById(‘champs-courriel’).onblur = validerCourriel; - listePlus = document.getElementsByClassName(‘action-agrandir-nouvelle’); - for(position in listePlus) { var actionPlus = listePlus[position];…
1. - AJAX - C'est le HTML dynamique - grâce à la contribution - du serveur
L'IDÉE du AJAX - C’est d’interagir avec le serveur pour obtenir des infos ou pour envoyer des informations. Cela permet de rester connecté plus dynamiquement avec les autres utilisateurs comme sur les réseau sociaux. - On mets à jour une sous-fenêtre de la page web à l’aide du serveur SANS navigation vers une autre page. - L’AJAX n’est pas la même chose que les websocket (voir diaporama) car on…
Le processus AJAX - Événement déclencheur - Requête JS - avec objet XMLHttpRequest - Affichage - dans une cible HTML (id ou classe) - Traitement par le PHP - Réponse XML - ou JSON - ou texte - ou HTML
Événement - Greffer l’événement de l’extérieur - var pokemon = document.getElementById(‘apercu-pokemon-pikachu’); - pokemon.onclick = function() { }; - ou - pokemon. on click = function(this) { laVraieFonction ();}; - ou - pokemon.addEventListener(‘click’, laVraieFonction); - ou - pokemon.addEventListener(‘click’, (evenement) => {laVraieFonction(evenement)});
Requête Ajax - var ajax = new XMLHttpRequest(); - ajax .open("GET", "http://url.du.serveur/nom-du-script.php", true); - ajax .send();
Traitement par le PHP - En GET - Le script PHP reçoit une demande selon son url - Il reçoit parfois des données dans $_GET - L’id de l’item demandé - Un critère pour filtrer les données de la réponse - Il demande les données à la base de données selon les paramètres - Il donne une réponse détaillées des données attendues - en XML, en JSON, en HTML ou en texte - En POST - Le script PHP reçoit les…
Réponse reçue par le JS - var ajax = new XMLHttpRequest(); - ajax.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - alert(ajax.responseText); - var xml = ajax.responseXML; - var valeur = xml.getElementsByTagName(‘balise’)[0].innerHTML; - } - }; - xhttp.open("GET", "http://url.du.serveur/nom-du-script.php", true); - xhttp.send();
Affichage de la réponse - Selon le format reçu on doit ou non transformer les données avant de les injecter. - On va souvent récupérer la zone d’affichage par son id absolu et afficher - document.getElementById(‘zone-affichage’).innerHTML = ajax.responseText; - Il arrive que ce soit plus complexe et qu’on doive récupérer la zone d’affichage relativement à l’objet déclencheur de l’événement et…
4 formats = 4 stratégies - HTML - XML - JSON - TEXTE
...
Bon Ajax - ...