Short video - AJAX (Asynchronous Javascript and XML)

10 Sept 2022 · 1 min

Watch on YouTube

0:58

The speaker explains that traditional multi‑page websites reload the entire page—including shared elements like navigation menus and banners—each time a user navigates, which wastes bandwidth. While browsers can cache resources and developers can use iframes to keep common parts static, both approaches have drawbacks: caching cannot eliminate all redundant transfers and iframes hinder SEO and indexing. The speaker introduces AJAX (Asynchronous JavaScript and XML) as the preferred solution, allowing only the new data to be fetched and inserted asynchronously, preserving shared components, reducing bandwidth usage, and improving user experience without the SEO drawbacks of iframes.

Chapters

Imaginons que vous avez créé un site web composé d'un ensemble de pages. Bien entendu, ces différentes pages contiennent des informations différentes les unes des autres. Cependant, des éléments comme le menu de navigation et la bannière sont les mêmes sur toutes les pages ou presque. Or, quand l'utilisateur clique sur un lien pour se rendre sur une nouvelle page, les éléments de cette dernière sont chargés entièrement, y compris le menu de navigation et les autres éléments communs. On imagine donc que la bande passante est pénalisée par le rechargement des mêmes données à chaque fois sans aucune utilité. Certes, les navigateurs disposent d'un cache qui mémorise les éléments déjà chargés afin de ne pas les recharger inutilement, mais cette technique a des limites. On peut également se servir des frames à l'aide de la fameuse balise iframe afin de maintenir les éléments inchangés dans le navigateur et ne charger que les nouvelles données, mais cette technique a quelques inconvénients en l'occurrence vis-à-vis du référencement et l'indexation des pages web sur les outils de recherche. La solution tant espérée à ce problème s'appelle AJAX.