Télécharger cours: Utiliser AJAX

Extrait du cours 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:
– 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:
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.
if (window.XMLHttpRequest) // Objet standard
{
xhr = new XMLHttpRequest(); // Firefox, Safari, …
}
else if (window.ActiveXObject) // Internet Explorer
{
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}

……..
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)
Télécharger cours: Utiliser AJAX (653 Ko)  (Cours DOC)
Cours ajax

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *