« AJAX » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 24 : Ligne 24 :
# Envoyer une requête qui peut :
# Envoyer une requête qui peut :
#* Demander tout simplement des informations sans en envoyer
#* Demander tout simplement des informations sans en envoyer
#* Envoyer des informations sans en demander (e.g. à travers un formulaire)
#* Envoyer des informations sans en demander, par exemple à travers un formulaire, mais également de manière "cachée" comme dans les systèmes de tracking de l'activité
#* Envoyer et demander des informations en même temps (e.g. spécifier des informations pour obtenir une réponse spécifique)
#* Envoyer et demander des informations en même temps (e.g. spécifier des informations pour obtenir une réponse spécifique)
# Recevoir une confirmation sur le résultat de la transaction (par exemple si la page n'a pas été trouvée ou s'il manque l'authorization pour pouvoir accéder à la ressource)
# Incorporer les éventuelles informations reçues en réponse dans la page
# Incorporer les éventuelles informations reçues en réponse dans la page



Version du 15 février 2018 à 17:17

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.



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. Dans des cas plus rares, on peut récupérer également des fichiers plus lourds comme des images ou des streams audio/vidéo.

Pour cette raison, on se réfère de plus en plus à AJAX comme l'une des Web API (voir la page JavaScript pour la liste) qui permet de récupérer de l'information depuis un serveur, mais l'utilisation de l'acronyme est encore très répandue.

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 :

  1. Identifier la page qui contient les informations d'intérêt
  2. Envoyer une requête qui peut :
    • Demander tout simplement des informations sans en envoyer
    • Envoyer des informations sans en demander, par exemple à travers un formulaire, mais également de manière "cachée" comme dans les systèmes de tracking de l'activité
    • Envoyer et demander des informations en même temps (e.g. spécifier des informations pour obtenir une réponse spécifique)
  3. Recevoir une confirmation sur le résultat de la transaction (par exemple si la page n'a pas été trouvée ou s'il manque l'authorization pour pouvoir accéder à la ressource)
  4. 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