Pourquoi et comment utiliser AJAX avec des exemples applications

Beaucoup d’entres vous me l’ont réclamés !
Voici des cours sur la fameuse technologie AJAX.

Une longue vidéo pour commencer avec les tenants et les aboutissants. Puis, vous trouverez des exemples d’applications.

Tout est dans le cours ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Pourquoi et comment utiliser AJAX avec des exemples applications

Bonjour à tous et bienvenu sur Développement Facile.

Ensemble on va attaquer une nouvelle série de cours dédiée à Ajax. Enfaite, Ajax ça rejoint ensemble, ça assemble ensemble plusieurs technologies, qui est bien évidemment le JavaScript, le HTML 5 et le CSS3 pour la présentation. Dans les cours précédents vous avez eu des cours sur toutes les nouveautés HTML 5, vous avez eu des cours sur toutes les nouveautés CSS3, et vous avez des cours sur JavaScript professionnel. Maintenant, vous avez tout ce qu’il faut pour apprendre à utiliser Ajax dans vos sites Internet.

AJAX ?

Alors déjà Ajax qu’est-ce que ça signifie ?
C’est un acronyme, qui veut dire Asynchonous JavaScript And XML, ça veut dire communication entre JavaScript et XML de façon asynchrone, sans attendre la réponse. C’est une approche complètement innovante de la conception des pages web, l’objectif est d’optimiser l’interactivité avec l’utilisateur et le confort d’utilisation, l’ergonomie des sites Internet pour l’internaute. Comme je vous l’ai dit, Ajax c’est une utilisation avancée de plusieurs technologies que vous avez vues précédemment mis de manière une peu cloisonnée, séparée, donc il y a le X HTML, donc les page HTML avec les feuilles de styles CSS, le JavaScript, le fameux DOM (Document Object Model), il y a l’objet XMLHttpRequest, et il y a également le XML et le XSL.
On peut en rajouter, ça dépend comment vous utilisez Ajax, moi je rajoute aussi le PHP et MySQL à tout ça.
Ajax qu’est-ce que c’est ?
L’Xhtml et les feuilles de styles CSS s’occupent de la présentation des pages, de façon standardisé, ça respecte les normes W3C, JavaScript c’est vraiment indispensable pour les applications Ajax, c’est ce qui va s’occuper de communiquer avec le serveur et de récupérer les informations le Javascript, et le DOM c’est aussi indispensable, ça va vous permettre de modifier des éléments en direct dans votre page HTML, avec le DOM vous pouvez accéder à tel ou tel div, tel ou tel paragraphe, tel ou tel bouton de formulaire, telle ou telle image, tout ça, grâce au DOM (Document Object Model). Et l’objet XMLHttpRequest, lui il permet justement de lancer des requêtes de la page Web vers le serveur pour récupérer des informations, des fichiers XML, des fichiers de textes, des informations d’une base de données, des fichiers PHP.
Il effectue des requêtes de façon asynchrone, avec XMLHttpRequest, c’est en arrière-plan et de façon complètement transparente pour l’utilisateur, l’utilisateur sélectionne des éléments sur votre site Internet, derrière il y a XMLHttpRequest via le JavaScript qui interroge le serveur, récupère les données dès qu’elles sont disponibles, les affiches à l’utilisateur.
Comme je vous l’ai dit, les données récupérées peuvent être au format XML, XSL, PHP, texte, voilà.

Alors Ajax, enfaite, comme je vous l’ai dit, c’est des techniques combinées du JavaScript, XML en passant par le DOM, l’objet XMLHttpRequest, tout ça, des techniques, des langages qui sont éprouvés, standardisés et maitrisés depuis plusieurs années. Enfaite, Ajax, c’est compatible avec la très grande majorité des navigateurs, que ce soit sur Smartphone, sur tablette, ordinateur portable, ordinateur de bureau, etc. Linux, Mac, Windows. Et donc l’utilisation conjointe de toutes ces technologies, JavaScript, XML, CSS, HTML 5, ça créé le fonctionnement d’Ajax.

Exemple AJAX

Ajax il fonctionne généralement de la façon suivante, il y a un internaute qui arrive sur votre site Internet, sur votre page Web, la page web s’affiche dans le navigateur et l’internaute effectue des interactions, il remplit un formulaire, il clique sur tel ou tel bouton, au moment de ses actions, des actions de l’utilisateur c’est pris en charge par les événements JavaScript, on les récupère, et là le code JavaScript il lance une requête XMLHttpRequest vers le serveur, donc pour récupérer un fichier XML, interroger un fichier PHP, etc., le fichier XML, ou le fichier PHP, toutes les données sont renvoyées vers le navigateur de l’utilisateur, après analyse JavaScript, bien évidemment, et ensuite c’est le DOM qui entre en charge, le DOM va récupérer des éléments de la page HTML, tel ou tel paragraphe, telle ou telle div, telle ou telle image, et via le JavaScript ça va être traité et affiché de façon dynamique dans la page HTML que l’internaute est en train de manipuler.
Toute cette procédure se passe de façon complètement transparente pour l’internaute, et il n’y a pas besoin de recharger la page, c’est génial, donc d’une part Ajax permet d’accélérer grandement l’affichage des pages web, parce qu’on ne recharge pas toute la page, juste cette partie d’élément qui nous intéresse, et ça apporte un bien meilleur confort pour l’utilisateur vu qu’il n’y a pas la page qui se recharge, il n’y a que la zone sur laquelle il travaille qui se recharge, il est guidé, complètement rassuré dans son expérience utilisateur avec votre site Internet.

Avantages Ajax

Alors comme je vous l’ai dit avec Ajax une nouvelle information peut être récupérée dans un fichier qui est situé sur le serveur, et cette information peut être affichée dans une zone de la page et complétée ainsi la page initiale, ça affiche des informations supplémentaires, ça peut modifier des informations existantes, ou complètement supprimer des informations de la page, en évitant l’actualisation de la page, évidemment il y a une perte de temps que ça entraîne mais les applications elles gagnent aussi en fluidité, et l’ergonomie comme je vous l’ai dit, elle est grandement améliorée car l’utilisateur il peut rester concentré sur la lecture de la page en cours, ou la page qu’il est en train d’effectuée, très pratique l’utilisation de la page.

La puissance d’Ajax est tellement impressionnante qu’il est possible de créer des applications Web qui se rapproche des applications de bureaux classiques qu’on connait.
Il y en a de plus en plus qui se développes partout, vous le voyez de plus en plus, donc ça modifie complètement la richesse de l’interface et la potentialité des services offerts par les pages web. Sur le fonctionnement très réactif d’Ajax permet de complètement reconsidérer l’ergonomie des sites Internet, l’utilisateur, vos internautes deviennent les éléments centraux des préoccupations des développeurs, les sites Internet sont analysés, conçus, créés pour les internautes pour que ce soit le plus simple, le plus ergonomique possible. Regardez Apple qui est un exemple d’ergonomie, l’internaute il sait où se situe tel ou tel bouton, c’est un modèle à suivre Apple, au niveau de l’ergonomie. Il faut savoir qu’Ajax est mis en avant et soutenu par le géant Google, donc de nombreuses applications Google utilisent Ajax comme Gmail, Calendar, Google Maps, tout ça, ça utilise Ajax à foison.
Il existe même un site de développement Ajax pour les développeurs, vous trouverez le lien sur cette page web, sous la vidéo sur cette page web et sur cette vidéo.

Différents exemples Ajax

Voici différents exemples Ajax, comme je vous l’ai dit, Google Maps avec les cartes géographiques, le calcul d’itinéraires, les vues satellites, Google suggest, quand vous tapez un mot-clé dans votre moteur de recherche, Google vous propose des mots-clés correspondants, des expressions correspondantes avec le nombre de résultats potentiels juste à côté, Google agenda qui permet de gérer votre emploi du temps et celui de votre équipe si vous êtes chef de projet en toute simplicité, de façon très conviviale et colorée, donc je vous ai mis également les liens dans cette vidéo, vous retrouverez les liens sous cette vidéo.

Votre plan d’actions !

Maintenant c’est parti ! A votre tour d’utiliser la puissance d’Ajax dans vos applications Web, posez moi vos questions directement sous le cours vidéo, si vous souhaitez des cours particuliers avec Ajax, profitez-en, choisissez-les directement utilisez la zone commentaires pour me dire les cours que vous souhaitez en priorité, moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Exemples d’applications AJAX

Google est un grand partisan d’AJAX, voici plusieurs de ses applications qui utilisent cette technologie géniale !

• Google Maps : cartes géographiques, calcul d’itinéraires et de vues satellites.
• Google Suggest : suggère automatiquement une liste de 10 mots ou expressions qui se rapprochent de ce qui est dans la zone de texte consacrée aux mots-clés.
• Google Agenda : permet de gérer votre emploi du temps en toute simplicité, de façon très conviviale et colorée.

Choisissez vos cours AJAX

Utilisez la zone commentaire, pour me choisir, les cours et concepts qui vous intéressent sur la technologie AJAX.