« AJAX » : différence entre les versions
Ligne 11 : | Ligne 11 : | ||
== Description et intérêt == | == Description et intérêt == | ||
Par rapport à une application web "traditionnelle" (avec des formulaires et un bouton "submit"), AJAX permet de créer des applications qui ont des interfaces plus riches et qui permettent d'échanger des données avec un serveur sans recharger la page. | Par rapport à une application web "traditionnelle" (avec des formulaires et un bouton "submit"), AJAX permet de créer des applications qui ont des interfaces plus riches et qui permettent d'échanger des données avec un serveur sans recharger la page. Cela signifie qu'on peut, par exemple, incorporer progressivement des informations qui sont récupérées sur une autre page, se trouvant même sur un autre site si celui-ci le permet (voir Cross-Origin Ressource Sharing, ou CORS plus bas dans la page). | ||
Originairement, AJAX a été conçu pour donner une expérience plus proche des applications desktop, notamment en ce qui concerne la transition entre états de l'application. Un site web "traditionnel" se compose d'un état différent pour chaque page et pour passer d'un état à l'autre il est nécessaire de cliquer sur un lien et par conséquent enchaîner le mécanisme de réponse/requête à la base du [[Le fonctionnement du protocole HTTP|protocole HTTP]]. | |||
Avec AJAX, il est possible d'envoyer une nouvelle requête HTTP ''en arrière plan'', c'est-à-dire que la requête est envoyée par la page même sur laquelle vous vous trouvez. Avec cette page, vous avez téléchargé également un ou plusieurs fichiers [[JavaScript]] qui contiennent les instructions pour envoyer une ou plusieurs requêtes AJAX à d'autres pages (voir plus bas pour des exemple de code). Ce code s'occupe généralement de : | |||
# Identifier la page qui contient les informations d'intérêt | |||
# Envoyer une requête qui peut : | |||
#* Demander tout simplement des informations sans en envoyer | |||
#* Envoyer des informations sans en demander (e.g. à travers un formulaire) | |||
#* Envoyer et demander des informations en même temps (e.g. spécifier des informations pour obtenir une réponse spécifique) | |||
# Incorporer les éventuelles informations reçues en réponse dans la page | |||
== Architecture et fonctions == | == Architecture et fonctions == |
Version du 8 novembre 2017 à 15:21
Introduction
AJAX est un acronyme signifiant Asynchronous JavaScript and XML et qui designe un ensemble de technologies pour créer des pages web dynamiques et qui peuvent communiquer avec un serveur. AJAX est donc une technologie utilisé pour créer des rich internet applications (RIA). La plupart des applications web 2.0 utilisent la technologie AJAX.
L'acronyme a été maintenu en dépit du fait que :
- Les requêtes ne doivent pas être forcément asynchrones
- JavaScript n'est pas la seule manière pour faire ce type de requêtes (mais sans doute la plus fréquente)
- Le format d'échange ne se limite pas à XML, on peut utiliser par exemple du JSON (très fréquent), du HTML, ou même des simples fichiers de texte.
Description et intérêt
Par rapport à une application web "traditionnelle" (avec des formulaires et un bouton "submit"), AJAX permet de créer des applications qui ont des interfaces plus riches et qui permettent d'échanger des données avec un serveur sans recharger la page. Cela signifie qu'on peut, par exemple, incorporer progressivement des informations qui sont récupérées sur une autre page, se trouvant même sur un autre site si celui-ci le permet (voir Cross-Origin Ressource Sharing, ou CORS plus bas dans la page).
Originairement, AJAX a été conçu pour donner une expérience plus proche des applications desktop, notamment en ce qui concerne la transition entre états de l'application. Un site web "traditionnel" se compose d'un état différent pour chaque page et pour passer d'un état à l'autre il est nécessaire de cliquer sur un lien et par conséquent enchaîner le mécanisme de réponse/requête à la base du protocole HTTP.
Avec AJAX, il est possible d'envoyer une nouvelle requête HTTP en arrière plan, c'est-à-dire que la requête est envoyée par la page même sur laquelle vous vous trouvez. Avec cette page, vous avez téléchargé également un ou plusieurs fichiers JavaScript qui contiennent les instructions pour envoyer une ou plusieurs requêtes AJAX à d'autres pages (voir plus bas pour des exemple de code). Ce code s'occupe généralement de :
- Identifier la page qui contient les informations d'intérêt
- Envoyer une requête qui peut :
- Demander tout simplement des informations sans en envoyer
- Envoyer des informations sans en demander (e.g. à travers un formulaire)
- Envoyer et demander des informations en même temps (e.g. spécifier des informations pour obtenir une réponse spécifique)
- Incorporer les éventuelles informations reçues en réponse dans la page
Architecture et fonctions
AJAX est ni une technologie en elle-même ni une norme. Ce terme désigne simplement une combinaison de technologies client (pages web):
- XHTML (ou HTML) plus CSS, pour la mise en page
- La norme DOM qui permet à JavaScript de manipuler tous les élément affichés à l'écran.
- L'objet JavaScript XMLHttpRequest qui permet de communiquer avec un serveur sans recharger la page.
- XML est utilisé (parfois) pour transporter les données entre le client (le navigateur) et un serveur.
Du côté serveur, n'importe quel environnment peut être utilisé, comme par exemple PHP
Alternatives:
Exemples d'applications et d'utilisation
La liste serait très longue puisque la plupart des applications web 2.0 de type RIA sont crées avec AJAX.
Il faut aussi rappeler que certaines applications web traditionnelles utilisent quelques composants AJAX, par exemple la plateforme Moodle (version 2008) permet de déplacer des éléments de cours.
Liens et bibliographie
- Asynchronous JavaScript and XML (Wikipédia)
- Web 2.0
- JSON