TP et démonstations sur Ajax et JQuery
Placez vos réponses dans votre dossier distant.
Essais avec jQuery
- Que se passe-t-il avec le lien ci-dessus ?
- Réalisez à votre tour un ou deux exemples avec jQuery (ou un autre framework JavaScript).
- jQuery peut-il être utilisé pour un projet Ajax ?
Introduction à JavaScript et Ajax
JavaScript
JavaScript est un langage de script, reposant sur de la programmation é́vé́nementielle.
Le code et les fonctions sont incluses dans le code dʼune page HTML et exé́cutées, sur le client web,
soit à différents niveaux du cycle de vie de la page, soit en réponse à certaines actions de lʼutilisateur.
Par exemple, JavaScript :
- aide à contrôler les données saisies dans des formulaires HTML
- ou bien permet dʼinteragir avec le document HTML via l'interface DOM (Document Object Model).
Le ʻDocument Object Modelʼ décrit la structure et le contenu des pages web.
Ajax
Ajax (Asynchronous JavaScript and XML) est une combinaison de technologies comme :
- JavaScript et DOM (Document Object Model), qui sont utilisés pour modifier l'information présentée
dans le navigateur par programmation.
- l'objet XMLHttpRequest est utilisé pour dialoguer de manière asynchrone avec le serveur Web.
- CSS (Cascading Style Sheets ; feuilles de style en cascade)
- XML, utilisé pour lʼéchange de données. En alternative, les applications Ajax peuvent utiliser les fichiers texte ou JSON (JavaScript Object Notation).
Ajax permet de développer des sites web dynamiques (et des applications). Il sʼinscrit dans la mode du Web 2.0.
Avec cette nouvelle architecture, trois concepts sont utilisés :
- Des événements légers coté serveur : des composants dʼune application web peuvent effectuer
des petites requêtes sur le serveur, pour obtenir des informations qui ne vont modifier quʼune partie
du DOM ; le rafraichissement complet de la page nʼest pas nécessaire.
- Asynchronisme : les requêtes envoyées ne bloquent pas le navigateur, se sorte que lʼutilisateur peut
utiliser dʼautres parties de lʼapplication. Lʼinterface graphique peut lʼinformer de la requête en cours.
- Généralisation : tout événement de lʼutilisateur (clic souris, survol du pointeur, action sur des tou-
ches du clavier) peut déclencher une requête asynchrone.
Voir ces illustrations.
Travaux à réaliser :
- Analysez et expliquez le fonctionnement des trois exemples ci-dessous.
- Réalisez à votre tour un quatrième exemple ajaxisé.
Premier exemple
Hop, on essaye Ajax !
Deuxième exemple
Encore un essai d'Ajax !
Troisième exemple
Essais avec google maps API v3
Travail à réaliser :
- Copiez et adaptez ./map-geolocalisation.html pour, par exemple, ajouter un marqueur lors d'un clic sur la carte.
