Comment faire un site Ajax?

Pourquoi utiliser Ajax?

Ajax permet de modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière.
Par exemple le contenu d’un champ de formulaire peut être changé, sans avoir à recharger la page avec le titre, les images, le menu, etc.
Ajax permet ainsi d’effectuer des traitements sur le poste client (avec JavaScript) à partir d’informations prises sur le serveur. Cela répartit la charge de traitement. Auparavant, toutes les modifications de pages étaient faites sur le serveur ce qui nécessitait des échanges maintenant inutiles.
Ajax est une technique qui fait usage des éléments suivants:
• HTML.
• CSS (Cascading Style-Sheet) pour la présentation de la page.
• JavaScript (EcmaScript) pour les traitements locaux, et DOM (Document Object Model) qui accède aux éléments de la page ou du formulaire ou aux éléments d’un fichier xml pris sur le serveur (avec la méthode getElementByTagName par exemple)…
– L’objet XMLHttpRequest lit des données ou fichiers sur le serveur de façon asynchrone.
– Si besoin, DOMparser intègre un document XML.
• PHP ou un autre langage de scripts peut être utilisé coté serveur.
Le terme « Asynchronous », asynchrone en français, signifie que l’exécution de JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. Tandis qu’en mode synchrone, le navigateur serait gelé en attendant la réponse du serveur.
Dynamic HTML est aussi un ensemble de techniques, qui comprend: HTML, CSS, JavaScript.
Cela permet de modifier le contenu d’une page selon les commandes de l’utilisateur, à partir de données préalablement fournies ou avec un texte tapé par l’utilisateur.
Ajax est DHTML plus l’objet XHR pour communiquer avec le serveur.

Comment cela fonctionne?

Schéma du fonctionnement d’Ajax
Ajax utilise un modèle de programmation comprenant d’une part la présentation, d’autre part les évènements.
Les évènements sont les actions de l’utilisateur, qui provoquent l’appel des fonctions associées aux éléments de la page.
L’interaction avec l’utilisateur se fait à partir des formulaires ou boutons html.
Ces fonctions JavaScript identifient les éléments de la page grâce au DOM et communiquent avec le serveur par l’objet XMLHttpRequest.
Pour recueillir des informations sur le serveur cet objet dispose de deux méthodes:
• open: établit une connexion.
• send: envoie une requête au serveur.
Les données fournies par le serveur seront récupérées dans les champs de l’objet XMLHttpRequest:
• responseXml pour un fichier XML ou
• responseText pour un fichier de texte bru.
Noter qu’il faut créer un nouvel objet XMLHttpRequest, pour chaque fichier que vous voulez charger.
Il faut attendre la disponibilité des données, et l’état est donné par l’attribut readyState de XMLHttpRequest.
Les états de readyState sont les suivants (seul le dernier est vraiment utile):
0: non initialisé.
1: connexion établie.
2: requête reçue.
3: réponse en cours.
4: terminé.
L’objet XMLHttpRequest
Elle permet d’interagir avec le serveur, grâce à ses méthodes et ses attributs.

Attributs

readyState le code d’état passe successivement de 0 à 4 qui signifie « prêt ».
status 200 est ok
404 si la page n’est pas trouvée.
responseText contient les données chargées dans une chaîne de caractères.
responseXml contient les données chargées sous forme xml, les méthodes de DOM servent à les extraire.
onreadystatechange propriété activée par un évènement de changement d’état. On lui assigne une fonction.

Méthodes

mode: type de requête, GET ou POST
open(mode, url, url: l’endroit ou trouver les données, un fichier avec son chemin sur le boolean) disque.
boolean: true (asynchrone) / false (synchrone). en option on peut ajouter un login et un mot de passe.
send(« chaine ») null pour une commande GET.
Construire une requête, pas à pas
Première étape: créer une instance
C’est juste une instance de classe classique mais deux options à essayer pour compatibilité avec les navigateurs.
1 if (window.XMLHttpRequest) // Objet standard
2 {
3 xhr = new XMLHttpRequest(); // Firefox, Safari, …
4 }
5 else if (window.ActiveXObject) // Internet Explorer
6 {
7 xhr = new ActiveXObject(« Microsoft.XMLHTTP »);
8 }

Pourquoi utiliser Ajax?
Comment cela fonctionne?
L’objet XMLHttpRequest
Elle permet d’interagir avec le serveur, grâce à ses méthodes et ses attributs.
Attributs
Méthodes
Construire une requête, pas à pas
Exemple de programme Ajax
Utiliser un fichier externe
Comment faire un site Ajax?
Inconvénients d’Ajax