Cours comment utiliser AJAX, tutoriel complet et gratuit pour apprendre à coder en AJAX document & cours AJAX site du zero PDF.
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 »);
}
……..
Utiliser AJAX (653 Ko) (Cours DOC)