Sommaire: Cours Ajax

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

♣ Extrait du cours

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.

Comment cela fonctionne? 

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.
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
open(mode, url, boolean) :
–   mode: type de requête, GET ou POST
– url: l’endroit ou trouver les données, un fichier avec son chemin sur le  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
Commentaires sur le code:
new ActiveXObject(Microsoft.XMLHTTP)
Ce constructeur est pour Internet Explorer.
new XMLHttpRequest()
Ce constructeur est pour tout autre navigateur incluant Firefox.
http.onreadystatechange
On associe un traitement (une fonction anonyme en l’occurrence) à cet indicateur d’évènement.
http.readyState == 4
L’état 4 signifie que la réponse est envoyée par le serveur et disponible.
http.status == 200
Ce status signifie ok, sinon un code d’erreur quelconque est envoyé, 404 par exemple.
http.open( « POST », « data.xml », true);
– POST ou GET
-url du fichier.
– true pour asynchrone (false pour synchrone).
http.setRequestHeader(« Content-Type », « application/x-www-form-urlencoded »);
Cette méthode s’utilise seulement avec POST.
http.send(document.getElementById(« TYPEDTEXT »).value);
Envoi des données au serveur. Les données sont prises dans le champ dont l’id est
« TYPEDTEXT » et qui est rempli par l’utilisateur grâce à un formulaire.
……..