AJAX : technologie, utilisation, animation, problèmes...

Résumé du document

? HTML (ou XHTML) pour la structure sémantique des informations
? CSS pour la présentation des informations
? DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée
? L'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web
? XML pour stocker ou lister les informations
(...)

Extraits

[...] XML pour stocker ou lister les informations Définition AJAX est composé de trois parties importantes. Il peut très bien fonctionner sans une d'elles, mais ceci n'est pas considéré comme du vrai AJAX Le A dans AJAX Le A de AJAX veut dire asynchrone, elle définie la méthode de discussion entre le client et le serveur. Dans un langage asynchrone chaque partie, ici le client et le serveur font le travaille sans attendre d'avoir une réponse de l'autre partie. Par exemple en AJAX, le client clique sur un bouton pour calculer une somme de chiffre, mais ne devra pas attendre une réponse pour faire une autre action Le JA dans AJAX Le JA dans AJAX veut dire JavaScript, c'est un des principaux langages utilisé par la méthode AJAX, il permet de communique entre le client et le serveur et donc de modifier dynamiquement des informations de la page sans la recharger Le X dans AJAX Le X dans AJAX veut dire XML, c'est le langage utilisé pour stocker et lister les données à modifier, à contrôler, à afficher Ce langage permet une grande diversité de stockage car la hiérarchie du XML est entièrement personnalisable Fonctionnement Voila un petit schéma qui permet de mieux comprendre la différence en AJAX et une autre méthode pour afficher du contenue. [...]

[...] Le client fait une action sur la page. Par exemple, il clique sur un bouton ou un lien Dans le code HTML, le bouton ou le lien utilisé par le client contient du JavaScript qui fait partie de la méthode AJAX Le code JavaScript questionne le serveur grâce à l'objet XMLHttpRequest Le serveur envoie les données demandé à la partie AJAX sous forme de données XML Grâce au code JavaScript les données XML sont géré et affiche sur la page Le Client peut voir la modification sans que la page ne soit rechargée Chargement partiel Comment se fait-il qu'il n'y a pas de rechargement de la page avec AJAX ? [...]

[...] Certaines animations peuvent aussi empêcher le référencement. Problèmes avec AJAX Les utilisateurs désactivant JavaScript ne pourront souvent pas utiliser un site avec AJAX. Il faut alors trouver une solution de remplacement Comment avertir l'utilisateur Pour avertir l'utilisateur que tel ou tel page fonctionne avec AJAX (JavaScript), il faut utiliser la balise Le contenue à l'intérieur de la balise ne s'affichera que si l'utilisateur ne peut pas faire fonctionner le JavaScript. Voila un exemple de code : document.write(Affichage avec JavaScript) ; Pour afficher le contenue de cette page, il faut activer le JavaScript Pour simplifier cet exemple, seul le du code JavaScript et utilisé ce n'est donc pas de l'AJAX mais ça ne change rien au fonctionnement de la balise Exemple Voila le message de Google si on désactive le JavaScript : Et sous iGoogle : 2 Comment utiliser une solution de remplacement Pour utiliser une solution de remplacement, il faut toujours utiliser la balise mais cette fois pour mettre un code de remplacement dans celle-ci. [...]

[...] Cette fonction, souvent appelée spoil est utilisé sur les forums pour ne pas révéler, par exemple, la fin d'une histoire. L'utilisateur peut ou non cliquer sur le bouton pour afficher le code. Affichage d'un partie du contenue. Par exemple, dans une FAQ seul le texte de la question sélectionné est affiché. Si, on clique sur une autre question, l'ancien texte disparaît et la nouvelle réponse apparaît. L'auto-complétion dans les formulaires. [...]

[...] Par exemple, pour un menu dynamique, pour faire une animation sur une partie de la page ou pour avoir une auto- complétion pour un champ de recherche. Il ne faut pas utiliser AJAX partout dans la page. Cela surcharge celle-ci pour rien et ce n'est pas utile. Fonction spoil La fonction spoil permet d'avoir un texte caché et de l'afficher en cliquant sur un bouton. Ce genre de fonction est très utilisé dans les forums pour ne pas révéler des fins d'histoire ou des réponses d'énigmes Exemple : Texte non-dévoilé : Texte dévoilé : 2 Remarque Cette fonction est un très bon exemple d'utilisation d'AJAX. [...]