Share
Cette série de didacticiels vise à familiariser les concepteurs front-end et les développeurs débutants avec AJAX, une technique front-end essentielle..
Dans ce premier tutoriel, nous aborderons les bases d’AJAX. Nous allons commencer à explorer différentes choses qui y sont liées, apprendre exactement de quoi il s'agit, comment cela fonctionne et où se trouvent ses limites. Commençons!
Remarque: Cette série suppose que vous maîtrisez les technologies de base, telles que HTML et CSS..
AJAX signifie «JavaScript et XML asynchrones». Ce n'est pas une technologie unique ni nouvelle. En fait, il s’agit d’un groupe de technologies existantes (HTML, CSS, JavaScript, XML, etc.) qui s’unissent pour créer des applications Web modernes..
Avec AJAX, un client (c'est-à-dire un navigateur) communique avec un serveur Web et demande des données. Ensuite, il traite la réponse du serveur et apporte des modifications à la page sans la recharger complètement..
Décomposons l'acronyme AJAX:
«Asynchrone» signifie que lorsqu'un client demande des données à un serveur Web, celles-ci ne sont pas figées tant que le serveur n'a pas répondu. Au contraire, l'utilisateur peut toujours naviguer dans les pages. Dès que le serveur renvoie une réponse, une fonction appropriée manipule les données renvoyées en arrière-plan..
"JavaScript" est le langage qui instancie une requête AJAX, analyse la réponse AJAX correspondante et met enfin à jour le DOM..
Un client utilise les API XMLHttpRequest ou XHR pour adresser une demande à un serveur. Considérez l’API (Application Programming Interface) comme un ensemble de méthodes spécifiant les règles de communication entre les deux parties intéressées. Cependant, notez que les données entrantes d’une demande AJAX peuvent être dans n’importe quel format et pas seulement XML format.
Pour vous faire une idée du fonctionnement d’AJAX, jetez un coup d’œil à la visualisation suivante:
Cette visualisation décrit un scénario typique basé sur AJAX:
L'utilisateur veut voir plus d'articles, alors il ou elle clique sur le bouton cible. Cet événement déclenche un appel AJAX.
Une demande est envoyée au serveur. Parallèlement à la demande, différentes données peuvent être transmises. La demande peut pointer sur un fichier statique (par exemple,. exemple.json) qui est stocké sur le serveur. Alternativement, il est possible d’exécuter un script dynamique (par exemple. functions.php) à quel moment le script communique avec la base de données (ou un autre système) pour récupérer des données.
La base de données renvoie les articles demandés au serveur. Ensuite, le serveur les envoie au navigateur..
JavaScript analyse la réponse et met à jour des parties spécifiques du DOM (la structure de la page). Ici, par exemple, seule la barre latérale est mise à jour. Les autres parties de la page ne changent pas.
Dans cet esprit, vous pouvez comprendre pourquoi AJAX est un concept important pour le Web moderne. En développant des applications utilisant AJAX, nous sommes en mesure de contrôler la quantité de données téléchargées à partir du serveur..
AJAX est partout. Pour le démontrer, citons brièvement quelques sites populaires qui en tirent parti.
Commençons par examiner le fonctionnement de Facebook et Twitter. Lorsque vous faites défiler l'écran, un nouveau contenu apparaît grâce à AJAX. Deuxièmement, lorsque vous votez à la hausse ou à la baisse d'une question ou d'une réponse sur le dépassement de capacité, un appel AJAX est déclenché. Enfin, dès que vous recherchez quelque chose sur Google ou Youtube, plusieurs requêtes AJAX sont exécutées..
De plus, si on veut, on peut suivre les demandes. Par exemple, sur la console de Chrome, nous le faisons en cliquant avec le bouton droit de la souris et en vérifiant la Journal XMLHttpRequests option.
Comme mentionné ci-dessus, pour configurer une demande AJAX, nous utilisons l'API XMLHttpRequest. En outre, jQuery, la bibliothèque JavaScript la plus populaire, propose plusieurs fonctions et méthodes liées à Ajax..
Tout au long de cette série, nous allons passer en revue différents exemples utilisant JavaScript et jQuery pour envoyer une requête à un serveur..
Lorsque nous récupérons des données d’un serveur Web, celles-ci peuvent être dans différents formats. XML, JSON, JSONP, texte brut et HTML sont des formats de données possibles.
XML (eXtensible Markup Language) est l’un des formats les plus répandus pour l’échange de données entre applications. Similaire au HTML, XML utilise des balises pour définir sa structure. Cependant, notez que le XML ne contient aucune balise prédéfinie. En fait, nous établissons un document XML en spécifiant nos propres balises. Un exemple de sa structure est présenté ci-dessous:
Mike Mathew australien Anglais Espanol français russe
Il existe de nombreux éditeurs en ligne que vous pouvez utiliser pour créer des documents XML. Mon éditeur préféré est:
Sur la base de cet éditeur, notre exemple serait visualisé comme suit:
JSON (JavaScript Object Notation) est un autre format d'échange de données populaire. En utilisant JSON, la structure XML susmentionnée ressemblerait à ceci:
"nom": "Mike", "nom de famille": "Mathew", "nationalité": "australien", "langues": ["anglais", "espagnol", "français", "russe"]
Encore une fois, vous pouvez trouver de nombreux éditeurs JSON en ligne sur le Web. Voici les éditeurs que j'aime utiliser:
Basé sur l'outil JSON Editor Online, l'exemple précédent ressemble à ceci:
Avant de commencer à utiliser AJAX, il est important de comprendre ses limites. Plus précisément, nous allons mentionner deux problèmes communs.
Tout d'abord, considérons l'erreur suivante qui apparaît dans la console de Chrome:
Cette erreur se produit lorsque notre demande pointe sur un fichier local. Ici, nous avons essayé d’accéder aux données stockées dans un fichier local (i.e. Demo.json) et non sur un serveur. Pour résoudre ce problème, nous pouvons installer un serveur local (par exemple, configurer XAMPP en tant qu’environnement de développement local) et y stocker le fichier cible..
Deuxièmement, regardez le message d'erreur suivant:
Cela se produit lorsque nous demandons des données situées sur un autre domaine par rapport à notre page (connues sous le nom de restriction de politique de même origine). Ici, par exemple, les données sont stockées sur un serveur local, alors que la page est stockée sur le serveur de Codepen. Heureusement cependant, il existe des solutions à cette restriction.
Une solution consiste à tirer parti du mécanisme CORS (Cross-Origin Resource Sharing) proposé par le W3C. Notez que ce mécanisme nous oblige à apporter quelques modifications aux fichiers de configuration de notre serveur. Par exemple, cette page explique comment personnaliser le serveur Web Apache..
Une autre option consiste à utiliser la technique JSONP (JSON avec Padding).
Cet aperçu devrait vous donner une bonne idée de ce qu'est AJAX, des endroits où vous l'avez peut-être déjà rencontré et des problèmes potentiels. Il a également rapidement examiné les formats d’échange de données les plus populaires. Dans le prochain tutoriel, nous allons passer à un exemple de travail. On se voit là-bas!
Si vous voulez en savoir plus sur AJAX et Codepen, assurez-vous de consulter les ressources suivantes:
Accentsconagua