Apprenez AJAX et créez un fil d'actualité interactif et graphique.

1. Bienvenue au cours !: Bonjour à tous et bienvenue à notre introduction à Ajax. C' est là que nous apprenons à utiliser Ajax pour récupérer des données dynamiquement à partir d'Internet et les mettre dans nos pages Web. Au cours de cette classe, vous apprendrez tout ce que vous devez savoir pour commencer à utiliser Ajax, y compris comment utiliser les données JSON, comment accéder aux API publiques, où proviennent les données, et bien sûr, tout ce que vous devez savoir pour faire une requête Ajax, qui est d'envoyer les données, lire les réponses, de gérer les erreurs et de garder nos utilisateurs amusés pendant qu'ils attendent la fin de notre requête Ajax. Pendant ce cours, bien sûr, nous allons construire un projet. C' est ce que nous allons construire. Cette petite page web récupère ici les titres d'une API de nouvelles, les affiche d'un côté de la page et lorsque notre utilisateur clique, puis affiche des GIF animés interprétant le titre, ce qui est la meilleure façon de penser, de donner un sens aux gros titres du monde en ce moment. Alors, pour qui est ce cours ? Eh bien, c'est une introduction à Ajax, mais vraiment, c'est une classe intermédiaire, en ce qu'il semble que vous connaissez déjà du JavaScript et que vous êtes à l'aise de travailler avec HTML. Bien sûr, si vous avez des questions ou des commentaires pendant la classe, veuillez me le faire savoir dans la zone de discussion. Je reviendrai vers vous tout de suite, sinon, n'oubliez pas d'appuyer sur le bouton Suivre et je serai impatient de vous voir à l'intérieur de la classe. 2. Alors, qu'est-ce qu'AJAX en fait ?: Donc, avant de plonger dans l'utilisation d'AJAX, nous allons avoir un peu parler de bien, qu'est-ce que cela signifie ? C' est quoi ce A-J-A-X ? Qu' est-ce qu'on en fait et quels sont les avantages et les inconvénients ? Donc, tout d'abord, jetons un oeil à ce que signifie AJAX. Eh bien, le premier A signifie Asynchrone, ce qui signifie que si nous voulons faire quelque chose de manière asynchrone, nous commençons un travail asynchrone, quoi que ce soit, puis nous allons faire autre chose pendant que le travail asynchrone fait sa propre chose, complétant nous l'espérons. Une fois qu'il sera terminé, il nous fera savoir que c'est fait et nous nous retirons de tout ce que nous faisions avant et nous allons ensuite nous occuper des résultats de cela. Mon analogie habituelle pour ça est de faire mon petit déjeuner. La première chose que je fais est de faire bouillir de l'eau et ensuite je fais le reste de mon petit-déjeuner. Je n'attends pas l'eau qui finit d'ébullition pour ma tasse de thé chaude. Avant de faire le reste de mon petit déjeuner, je commence la bouilloire, puis je fais tout reste et cette bouilloire est comme une opération asynchrone. J' espère que cette petite analogie fonctionnera pour vous. Se déplaçant à droite le long, le J se met sans surprise en avant JavaScript. Donc, nous avons JavaScript asynchrone et puis nous obtenons un autre A qui signifie plus, vraiment c'est un et. Pour une raison quelconque, les gens AJAX ont décidé qu'il devait toujours être écrit comme Javascript asynchrone Plus, c'est vraiment un Et, X qui signifie XML qui est ce que tout le monde utilisait à l' époque où AJAX était la première inventé, mais personne n'utilise vraiment plus XML dans les communications front-end AJAX. Tout le monde utilise JSON, JavaScript Object Notation. Nous allons avoir un mini regard sur ce que JSON est un peu plus tard dans la classe juste pour nous assurer que nous sommes tous à la pointe, rien de trop délicat, mais c'est le format de données qui est utilisé pour échanger des informations entre un serveur et un web navigateur. En parlant de ça, que fait AJAX ? Eh bien, notez ceci, c'est l'arrangement habituel que nous avons. C' est la façon connue AJAX d'envoyer des informations entre un navigateur et un serveur. C' est le scénario, dans lequel nous ne voulons pas vraiment utiliser AJAX. Imaginons que nous ayons un formulaire d'inscription pour un nouveau site Web et nous envoyons nos données au serveur frappant un inscription dans le point, puis le serveur renvoie toute notre nouvelle page web. Donc, tout dans notre navigateur change et boom, nous avons une toute nouvelle page chargée dans notre navigateur. Nous avons ce formulaire d'inscription dans notre histoire. Donc, si on appuie sur le bouton de retour, on retourne sur le formulaire d'inscription. Donc, c'est pour cela que nous utilisons AJAX. Imaginez que nous ayons une page web ouverte et que c'est une sorte d'outil de recherche, vous pouvez voir que vous avez une petite loupe dans son navigateur et nous envoyons notre requête. Nous avons frappé un point de terminaison appelé Search sur notre serveur et nous passons un paramètre que nous voulons rechercher, puis le service renvoie des données, il ne renvoie pas une toute nouvelle page Web. Ce que nous faisons, c'est que nous prenons ces données et les bloquons au milieu de notre page web existante, nous n'en chargeons pas une nouvelle. Donc, clairement, c'est une expérience tout à fait différente pour l'utilisateur. Vous ne voyez pas la page web, donc nous l'avons compris et je la vois recharger. Je vois juste la page qu'ils regardaient à l'origine avec les nouvelles choses apparaissant soudainement au milieu de celui-ci. Alors, quels sont les avantages et les inconvénients de l'utilisation d'AJAX ? Eh bien, du côté heureux, cela crée une excellente expérience utilisateur lorsqu'il est utilisé bien parce qu'il nous donne des pages web très interactives et réactives et, dans l'ensemble, nous envoyons moins de données. Nous envoyons simplement les données dont nous avons besoin à partir du serveur ou nous récupérons les données dont nous avons besoin à partir du serveur via le navigateur et pas une page web entière. Une des autres choses dont nous devons être un peu prudent avec AJAX, eh bien, cela peut introduire une complexité qui ne serait pas là autrement dans nos pages Web. Je pense que c'est un commerce équitable parce que nous obtenons fonctionnalités qui ne seraient pas là autrement aussi. Mais le fait est que l'utilisation d'AJAX peut rendre la logique de la façon dont le code JavaScript plus complexe. En utilisant un deux appels AJAX, cela n'introduit pas trop de problèmes pour nous, mais quand notre appel AJAX est terminé et doit faire un autre appel AJAX et qui se termine et qui nécessite un troisième appel AJAX, alors il peut être assez difficile de savoir ce qui se passe et si quelque chose ne va pas, débogage peut être assez difficile. Nous devons être très prudent enfin de ne pas casser le bouton de retour parce que si nous avons les résultats de quelques grandes requêtes AJAX assis dans une page Web et que l'utilisateur clique sur le lien, peut-être que c'est dans nos données AJAX et puis ils cliquent sur le bouton de retour, vont-ils voir les résultats des appels AJAX que nous avons effectués précédemment ? Eh bien, à moins que nous prenions soin de les mettre en cache et de les renvoyer, alors probablement pas. Ils seront de retour là où ils ont commencé avant que ces requêtes AJAX ne soient faites. Donc, vous pouvez dire, eh bien, que s'est-il passé ici ? Les utilisateurs sont habitués au bouton de retour leur montrant exactement la même page qu'ils ont laissée avant de suivre un lien hors de cette page. Donc, maintenant que nous avons examiné rapidement ce que signifie AJAX, nous avons vu ce qu'il fait et nous avons un peu regardé les avantages et les inconvénients, nous allons commencer à regarder comment il est réellement utilisé en JavaScript dans notre prochaine leçon vidéo. 3. Comment utiliser AJAX en JavaScript: D' accord. Donc, maintenant il est temps de parler de la façon dont nous faisons une requête AJAX en JavaScript. Aujourd'hui, nous allons regarder comment nous le faisons en JavaScript, évidemment, utilisant l'objet XMLHttpRequest, et comment nous pouvons réellement l'utiliser pour faire une requête. Donc, XMLHttpRequest. Alors, qu'est-ce que c'est ? Eh bien, c'est une partie standard de JavaScript dans un navigateur. Donc, il sera toujours disponible pour vous dans un navigateur. Il a tout ce dont nous avons besoin pour faire une requête AJAX dedans. Il est souvent, souvent, souvent, souvent abrégé en seulement XHR ou xhr en minuscules parce qu'il est assez boucheux. Enfin, il ne doit pas être confondu avec un certain nombre d'autres choses qui sont utilisées pour les requêtes asynchrones. Il y a beaucoup de choses construites sur XMLHttpRequest et il y a plus de choses cours d'intégration dans JavaScript pour gérer les opérations asynchrones comme les promesses, comme Async/Await, et nous obtenons quelque chose appelé fetch bientôt. Mais XMLHttpRequest est la méthode fondamentale que nous avons pour faire une requête AJAX. Juste une fois de plus que XML dans le nom est totalement trompeur. Nous n'avons pas besoin de récupérer XML. La plupart du temps, nous allons obtenir JSON et nous allons voir un petit exemple de cela sous peu. La première chose que nous devons faire est d'initialiser et ou créer un nouvel objet en utilisant le nouvel opérateur, puis nous appellerons open dessus. Nous allons examiner chacune de ces choses en détail dans une seconde seulement. Donc, ne vous inquiétez pas trop de cette liste que je traverse en ce moment, mais la première chose que nous devons faire est d'appeler ouvert, qui est de dire comment pouvons-nous faire notre demande et où allons-nous faire notre demande ? Ensuite, nous voulons assigner une fonction à quelque chose appelé onload, et c'est ce que nous allons être appelés lorsque la requête se termine avec succès. Nous voulons également affecter une fonction à une propriété appelée onerror, qui sera appelée s'il y a une erreur lors de la requête AJAX. Enfin, nous pouvons appeler envoyer, qui enverra effectivement la demande. Donc, regardons cela dans le code parce que c'est tout à fait un abstrait, la liste là-bas, et il vaudrait beaucoup mieux le voir fonctionner réellement. D' accord. Donc, je suis ici dans un exemple de document. C' est un fichier HTML avec du JavaScript à l'intérieur entre les balises de script. Je l'ai fait de cette façon juste pour m'assurer que tout est à cet endroit et facile à voir. J' ai inclus cela dans la section des ressources afin que vous puissiez aller jeter un coup d'oeil et jouer avec vous-même si vous voulez. Mais je vais juste descendre au bas du document ici et c'est là que se trouve notre HTML réel, juste ici. Je ne vois pas où je vais le sélectionner. On y va. C' est l'un de nos corps HTML réels et les bits qui nous intéressent vraiment sont ici. Nous avons un bouton lorsque vous cliquez sur exécutera une fonction JavaScript appelée Load image. Ensuite, nous avons une petite image avec un ID de GIF et des sources définies à rien. Donc, regardons cette fonction Charger l'image. Ici, c'est. On peut l'installer à l'écran, c'est génial. Donc, nous définissons une fonction appelée Load Image, et ici nous instancions un tout nouveau XMLHttpRequest. Passons ça pour l'instant, j'y reviendrai très bientôt. Ensuite, nous appelons ouvert sur notre nouvelle requête AJAX et nous disons bien que nous voulons exécuter une méthode GET contre une URL. Voici la définition de notre URL. Je l'ai divisé en bits juste pour décrire chaque partie de l'URL. Normalement, je ne le ferais pas comme ça, donc nous faisons une requête contre ce point de terminaison ici, qui fait partie de l'API de Giphy pour renvoyer un GIF aléatoire. En général, ajouter un point d'interrogation pour dire qu'il va y avoir quelques paramètres sur cette URL. Nous définissons notre note à G. Giphy est principalement du contenu fourni par les utilisateurs, certains utilisateurs aiment soumettre du contenu très difficile donc je m'en tiens au contenu classé G. Ensuite, nous avons notre séparateur pour les paramètres dans notre URL, puis nous avons enfin une clé API. Les clés API sont un moyen de dire à un service comme Giphy qui fait la demande. Normalement, nous allons demander à Giphy une clé API de notre propre et nous l'utiliserons dans toutes nos demandes. C' est un très vieux que Giphy utilisait pour tout le monde. Maintenant, ils en ont des individuels et nous allons obtenir une lorsque nous commencerons à construire notre exemple d'application. Quoi qu'il en soit, après avoir dit que c'est notre URL aléatoire Giphy et nous l'utilisons ici. Donc, nous disons s'il vous plaît ouvrir cette URL en utilisant la méthode GET. Ce drapeau ici vrai signifie le rendre asynchrone. Nous pourrions prendre cela à faux et le rendre synchrone mais tout le point d'AJAX est que c'est asynchrone. Donc, nous allons le faire, le rendre asynchrone. Ensuite, nous assignons une fonction à onload, et c'est ce que nous voulons faire lorsque la demande est terminée. Donc, la première chose que nous faisons est d'obtenir une référence à notre image, rappelez-vous qu'il y avait une image dans notre HTML avec un ID de GIF. Oh oui, je suis dans le camp de gens qui disent GIF pas JIF. Donc, je suis désolé si ça te dérange vraiment. Ensuite, nous voulons obtenir la réponse réelle qui est revenue du serveur pour notre requête et c'est dans une propriété appelée texte de réponse. Ensuite, ce que nous faisons est que nous le transformons en un objet JavaScript en utilisant l'analyse JSON. Donc, comme je l'ai dit, nous allons jeter un oeil à JSON et comment cela fonctionne très brièvement dans l'une des leçons à venir. Mais le fait est que nous pouvons transformer la réponse en un objet JavaScript et nous l'assignons aux données de réponse. Ensuite, nous obtenons quelque chose appelé, image URL originale, à partir de la partie données des données de réponse et l'assignons à l'attribut source de notre image. Mon Dieu ! Ceci pour descendre ici, rappelez-vous ici est notre image, elle a un ID de GIF et voici son attribut source, actuellement défini sur rien, mais nous allons lui attribuer cette valeur. Je vais également jeter un oeil à la documentation de l'API Giphy, donc vous pouvez savoir où trouver ces informations sur ce qui est à l'intérieur de ces réponses, parce que je sais que cela semble juste comme une liste aléatoire et mystérieuse d'attributs là-bas. Nous allons également attribuer sur l'attribut d'erreur. Donc nous disons, « Oh, ça va être une fonction », si quelque chose tourne mal, nous allons juste dire, « Montrez une alerte », et dire, « Oh, c'était une erreur ». Ensuite, nous l'envoyons enfin. Donc, c'est là que la demande est réellement envoyée et nous espérons qu'une fois qu'elle a été reçue et que les réponses envoyées avec succès, alors notre fonction onload sera exécutée, et ensuite notre image aura un attribut source qui lui est attribué, et nous serons en mesure de le voir dans notre navigateur. Donc, maintenant que nous avons vu tout cela, jetons un coup d'oeil dans le navigateur. D' accord. Donc, voici notre petite page de test AJAX, requête Giphy AJAX. Voici le bouton Charger l'image. Donc, si j'ai cliqué dessus. Il y a oui. C' est à peu près ce que vous attendez à obtenir si vous demandez une image aléatoire de Giphy, et nous pouvons continuer à appuyer sur ce bouton pour récupérer des images aléatoires. Ouais, et pour que je puisse continuer à charger ça toute la journée. Bonjour, Professeur. Ainsi, vous pouvez voir que l'API Giphy nous envoie des références à des images que nous pouvons charger dans notre navigateur. Donc, juste pour résumer, lorsque nous faisons une demande XHR, nous commençons par exécuter open sur notre nouvelle demande, nous assignons onload et onerror, qui indique à la demande ce qu'il faut faire quand elle réussit ou échoue. Ensuite, nous envoyons la demande. Nous avons vu cela implémenté dans notre code, nous pouvons voir que nous faisons une nouvelle demande d'abord, puis nous l'ouvrons. Nous assignons une fonction à onload, c'est ce que nous faisons lorsque la requête est résolue avec succès. Nous assignons une fonction à onerror, ce qu'il faut faire quand les choses tournent mal. Ensuite, nous l'envoyons enfin. Donc, c'est un exemple très court et rapide de la façon dont nous pouvons faire une requête AJAX. 4. API publiques - ce que vous devez savoir: D' accord. Bienvenue à notre introduction à Ajax tout le monde. Dans cette leçon, nous allons juste faire un tour rapide de la définition des termes et nous assurer que nous sommes au courant certains concepts fondamentaux dont nous aurions besoin pour le reste de cette classe. Alors, comment utiliser une API et la première chose dont nous devons parler est bien, qu'est-ce qu'une API ? Et puis nous arrivons à faire un peu de mise à jour JSON parce que JSON est le format de données qui est généralement utilisé pour transférer des données entre les clients et certaines API Web, puis nous allons sortir et sortir la clé d'API pour notre service de nouvelles et ensuite nous allons les documents pour ce service afin que nous ayons une idée de la façon de l'utiliser. Mais tout d'abord, qu'est-ce qu'une API ? Eh bien, cela signifie Application Programming Interface et vraiment c'est juste un endroit où nous pouvons envoyer des demandes de données. Donc, je peux dire « S'il vous plaît envoyez-moi toutes les photos qui ressemblent à des chiens » ou je pourrais dire « Hey, s'il vous plaît enregistrer et stocker cette nouvelle photo de ce chien. » Nous pouvons également recevoir des réponses comme cela nous enverra un grand tas de photos de chiens si nous utilisons une sorte d'API photo ou une API image comme Giphy ou si nous envoyons une demande pour enregistrer quelque chose, il pourrait revenir et dire « Hey, je l'a sauvé. Tout était bon » ou ça pourrait dire « Hey, il y a eu une erreur en sauvant votre photo de chien », puis nous pouvons déterminer ce qu'il faut faire après. Et une API est un terme vraiment super général. Tout type de bibliothèque tierce que nous utilisons a une API. Les interfaces web que nous allons regarder pendant cette classe, comme les interfaces de socket de très bas niveau. Toutes ces choses ont une façon définie d'interagir avec eux et maintenant nous allons avoir un peu de rafraîchissement rapide pour JSON. C' est incroyablement largement utilisé, mais je sais que tout le monde ne l'a pas réellement utilisé ou ne l'est familier, donc je vais y jeter un coup d'oeil maintenant, y compris jouer avec du code. Il signifie la notation d'objet JavaScript et ce que cela signifie vraiment, c'est une façon de prendre une chaîne formatée d'une certaine manière et de la transformer en un objet JavaScript, puis nous pouvons faire la même chose. Nous pouvons prendre un objet JavaScript et le transformer en une chaîne et ces chaînes sont super pratiques pour envoyer entre une API et un client comme votre navigateur parce que cela signifie que nous avons ce flux va en arrière et en avant que nous pouvons convertir en objet Java Script. Il est très facile de formater les données de cette façon parce que cela fait très peu d'effort mais aussi c'est très facile pour nous d'utiliser. C' est un format que nous pouvons éditer nous-mêmes pour que nous puissions lire facilement et c'est une forme très intuitive de données à utiliser. Et donc jetons un coup d'oeil à cela déjà dans un code en ce moment. Ok donc, voici un petit fichier qui est inclus dans les ressources du projet pour cette classe. Il s'appelle jsondemo.html et tout ce que j'ai ici est un petit peu de HTML en bas avec un bouton qui fait quelque chose, démo JSON quand il est cliqué et voici notre fonction de démo JSON et nous pouvons regarder cela dans le navigateur. Nous cliquons sur le bouton et certains trucs sont imprimés sur la console. Et maintenant, ce que nous regardons ici, c'est que j'utilise un ensemble de chaînes multi-lignes ES6. Cela signifie simplement que nous pouvons utiliser ceci comme un texte arrière pour définir une chaîne qui s' étend sur plusieurs lignes et c'est à quoi ressemble JSON. Nous allons envelopper le tout et quelques accolades bouclés , puis nous allons avoir une valeur de clé ou un nom de clé suivi d'une valeur et les clés apparaissent toujours comme une « chaîne » entre guillemets comme ceci et puis la valeur, eh bien il pourrait si c'est un nombre, il ne sera pas cité, si c'est une chaîne, elle sera citée, la valeur pourrait être un tableau ou pourrait être encore un autre type d'objet. Le fait est que nous pouvons prendre cette chaîne, la donner au JavaScript construit dans l'objet JSON et lui demander de passer notre chaîne SomeJSON et transformer en un objet et ensuite nous pouvons accéder aux propriétés de cet objet individuellement comme un objet JavaScript normal. Maintenant, nous pouvons enregistrer tous ces éléments individuellement à la console. Alors passons à notre navigateur, démo JSON, cliquez sur « S'il vous plaît vérifier la console » et je clique dessus et voici, ici nous avons toutes nos petites valeurs qui sortent sur la console. génial. Donc, bien sûr, si nous allons essayer, je vais juste décommenter cela, bien sûr juste pour montrer qu'il n'y a pas une magie particulière de l'interprétation de chaîne qui se passe ici, si nous revenons à notre chaîne SomeJSON et essayons d' accéder à un de cela et appuyez sur refresh , puis cliquez sur le bouton de la console et, s'il y en a, nous devenons indéfinis en disant que cette chose n'a pas propriété de chaîne parce que c'est juste une chaîne et que cette valeur est indéfinie. Maintenant, bien sûr, cela va dans l'autre sens aussi, disons que nous avons ce nouvel objet. Nous allons appeler un nouveau JSobJ, un objet, et de la manière JavaScript normale, nous lui donnons un nom, puis une valeur et continuons à le faire. Nous pouvons définir un tableau de choses bien sûr et ensuite nous pouvons aller et enregistrer cela sur la console comme un objet et bien sûr le navigateur va imprimer cela bien pour nous, être très utile et ensuite nous pouvons aller et tourner notre objet JSobJ dans une chaîne en utilisant JSON stringify, nouveau JSobJ et donc si nous vérifions cela dans le navigateur ou rechargeons à nouveau. Et ici, nous pouvons voir que notre objet a été tout d'abord imprimé parce que j'ai juste aimé le journal de la console et il a été brisé par le navigateur mais aussi nous avons transformé en une chaîne en utilisant JSON stringify et vous peut voir que nous avons juste cette très grande chaîne ici et c'est la chose que nous enverrions sur une API ou dans une réponse API ou une requête parce qu'il est plus facile d'envoyer un tas de caractères sur le fil, mais c'est plus de travail pour envoyer un objet réel du fil à son chemin. Et c'est pourquoi nous utilisons JSON. C' est très pratique, il est très lisible et intuitif pour nous à utiliser et c'est maintenant la norme par défaut pour communiquer avec une API du web. Donc, nous avons vu ce qu'est JSON, nous avons vu comment cela fonctionne. Ensuite, nous devons obtenir une clé API pour l'API que nous allons utiliser. Maintenant, rappelez-vous qu'une clé API est unique pour vous. C' est une chose que vous devez utiliser dans votre quête vers une API. En supposant qu'il s'agit d'une API publique et que ce n'est pas celle que vous avez implémentée vous-même sur un serveur quelque part, mais que vous obtenez votre clé API, elle vous identifie, cette façon, l'API sait si vous faites 100 milliards réponses ou demandes une seconde, alors vous êtes probablement sorte de problème et ils vous couperont, mais c'est une façon de vous identifier lorsque vous faites vos demandes. Et nous allons utiliser newsapi.org pour obtenir nos gros titres, j'espérais à l'origine utiliser l'API Google News mais je vois que c'est dans un état semi-arrêt. Je ne sais pas combien de temps ça va être là car il a été semi-fermé depuis assez longtemps , mais je pense que ça pourrait disparaître à tout moment. Quoi qu'il en soit, nous utilisons cet api.org et pour les utiliser, nous devrons obtenir une clé API alors dirigez-vous vers newsapi.org. Nous pouvons voir que nous sommes présentés avec cette page et la première chose que nous voyons est obtenir la clé API. Alors, allez-y et remplissez ça. Je suis Luke et mon adresse e-mail est terriblement faite, fabish@. C' est comme une adresse e-mail absurde gars. Et il se peut que je doive utiliser un autre mot de passe. Je suis un individu, je ne suis pas un robot. J' accepte les termes et oui, nous utiliserons éventuellement un lien d'attribution sur notre page. Soumettez, et non merci, je ne sauverai pas ça. Et donc enfin, nous avons notre clé API. C' est la valeur que nous devons utiliser dans nos requêtes à l'interface newsapi.org. Donc, maintenant que nous avons notre clé, nous ferions mieux de consulter la documentation de l'API. En supposant que ce n'est pas votre API, si c'est une API que vous avez écrite vous-même, alors vous savez probablement comment cela fonctionne. Et c'est aussi en supposant que la documentation existe et est cohérente et à jour. C' est un service public. Parfois, ils sont très bien documentés et parfois ils sont à peine documentés. Donc, passons en revue et vérifions la documentation pour l'API de nouvelles. Et vraiment ce que nous devons faire est juste de recharger cette page et la documentation est assez décente vraiment avec ces gars. C' est simple. Nous allons utiliser les demandes les plus populaires et ils fournissent un bel exemple de demandes en utilisant déjà notre clé API. Ils disent « Hé, c'est comme ça que vous faites une demande à notre API » et c'est ce que vous allez récupérer et ensuite vous donner cette belle structure pliable pour que vous puissiez voir le niveau supérieur, nous avons comme trois choses, statut et le nombre de résultats , puis ils nous donnent les articles et à l'intérieur des articles bien, c'est cette chose une source et l'auteur et un titre et une description et ainsi de suite. Donc, c'est vraiment très gentil. Et puis ils vont documenter quels sont les paramètres, quand ils peuvent être définis, puis enfin leur document, leur réponse et ce qu'il y a à l'intérieur de la réponse. Donc, c'est assez simple et assez facile à utiliser pour nous. Maintenant, dans la leçon suivante, nous allons jeter un oeil aux trois types d'états principaux que nous devons traiter dans une requête Ajax et nous allons commencer à utiliser cette API. J' ai donc hâte de vous voir dans la prochaine leçon et je me souviens si vous avez des questions ou si vous souhaitez que quelque chose soit clarifié s'il vous plaît laissez-moi savoir dans la zone de discussion et je vous répondrai directement. 5. Trois états AJAX fondamentaux (nous commencerons par attendre !): Bon, tout le monde est le bienvenu Dans cette leçon, nous allons examiner les trois états Ajax fondamentaux que nous devons traiter lorsque nous programmons un client Ajax ou que nous traitons des demandes et des réponses avec Ajax. Maintenant Ajax étant comme un protocole réseau, il y a comme un bazillion différents états dans lesquels les connexions réseau de bas niveau réelles peuvent être, mais il y a trois que nous avons vraiment besoin de nous occuper de nous-mêmes et ce code client qui est en attente. Donc, vous avez envoyé une demande et les utilisateurs attendent que la demande aime terminer ou faire quelque chose. Nous devons leur montrer quelque chose, leur dire que les choses se passent réellement et enfin le succès. Eh bien, notre demande a été complétée avec succès, donc nous devrions faire quelque chose avec la réponse. Dans le cas où les choses ne fonctionnent pas, nous devrions également gérer l'erreur. Alors, il est temps d'attendre. Alors c'est quoi cette affaire d'attendre ? Eh bien, nous devons dire à l'utilisateur que leur action a eu un effet quelconque. Parce que s'ils cliquent sur un bouton et que rien ne se passe, alors ils vont juste aimer continuer à cliquer sur ce bouton comme un fou probablement. Nous devons vraiment leur dire que, oui, votre action a été remarquée et quand faites quelque chose à ce sujet, même si vous n'avez pas encore les résultats, et comme je le disais, les commentaires aident les utilisateurs. Cela les aide à savoir que quelque chose se passe parce que l'obtenir requêtes asynchrones peuvent être très lentes parfois. Eh bien, pas super lent comme les minutes, mais ils peuvent être assez lents pour qu'un utilisateur commence à se gratter la tête en disant : « Eh bien, que se passe-t-il ? Je ne comprends pas. J'ai cliqué sur le bouton, rien ne se passe. » Ce que nous devons vraiment faire maintenant est de commencer à implémenter une demande à notre API de nouvelles. Donc, nous avons notre clé API, nous avons vérifié les documents. Donc, je vais implémenter une requête et montrer à l'utilisateur un peu de poids spinner. Nous ne ferons rien avec les résultats pour l'instant, c'est pour la leçon suivante, mais nous verrons comment nous pouvons le faire dès maintenant. Je vous encourage fortement à coder avec moi, parce que dans nos ressources de projet, nous avons giphy-news.html, qui est html squelette, qui inclut un lien vers un CSS prédéfini, qui mettra une page un peu et un style assez minime juste pour nous aider à commencer. Aussi et il semble qu'il y ait quelque chose appelé news-api.js, là aussi, qui est juste un fichier JavaScript vide. C' est ce que nous allons remplir. Donc, vous avez tout ce dont vous avez besoin pour coder aussi. Je pense que c'est une excellente façon d'apprendre et de vous encourager fortement à appuyer sur Pause chaque fois que j'ai fini de faire quelque chose et de l'implémenter également. Donc, juste pour vous donner un aperçu rapide de ce HTML plus d'inclure quelques JavaScript et CSS, nous avons le corps, nous avons H1 va aussi bien nous, vous savez ce que nous regardons. Nous avons div vide, avec un ID ajax-wait et une classe en attente. L' animation et le spinner et tout est entièrement fait en CSS. Donc, consultez ce fichier si vous êtes intéressé pour voir comment il fait cela. C' est fondamentalement un div avec une bordure pointillée. Il tourne autour et il a une taille et une position prédéfinies. Donc, cela le rend facile à afficher et à cacher. Ensuite, quand nous entrons dans notre section principale de notre page, nous avons trois divs ; erreur, titres, gifs. Nous allons remplir chacun de ces éléments au besoin. Vous pouvez voir que notre html a fourni des espaces pour nos trois types d'états ici. Nous avons notre div d'attente que nous afficherons quand quelque chose se passe mais pas encore terminé. Nous avons un div d'erreur pour quand les choses tournent mal et ces deux sont pour remplir quand les choses vont bien. Alors, commençons à implémenter notre JavaScript. Donc la première chose que je pense que nous voulons est une fonction et nous l'appellerons montrer les gros titres. Partez à un bon début. Nous voulons nous assurer que cette fonction est appelée lorsque la page a été chargée ou terminée le chargement. Donc, nous allons dire tout droit hors la fenêtre de chauve-souris. AddeventListener, Correct. Voici où nous voulons faire notre demande d'API. Donc, je vais juste ajouter ceci assez rapidement pour vous éviter la douleur de me regarder passer de nombreuses heures à faire mes fautes de frappe. Donc, ce que nous voulons comme la première chose est bien, où devrions-nous envoyer notre demande ? Nous savons qu'en regardant notre documentation et ici, nous sommes de retour à la page de documentation de l'API News. Nous savons que nous pouvons utiliser ce point de terminaison top des titres ici. C' est génial. On aura ça là-dedans. Ensuite, nous devons avoir un petit point d'interrogation pour dire qu'il y a des paramètres sur notre URL et que notre- eh bien, nous allons chercher aux États-Unis. Notre prochain paramètre définira la catégorie à divertissement. J' utilise le divertissement parce que l'utilisation générale est un peu sombre parfois. J' ai pensé que je le garderais grand et puis finalement nous allons mettre en place la clé API. Ceci est ma clé API, s'il vous plaît n'utilisez pas ma clé API. On ne veut pas obtenir les nouvelles ou les gens se mêlent à ça. Donc, il est là. Nous avons notre URL. Maintenant, qu'avons-nous besoin de faire après ça ? Comme nous l'avons vu dans notre leçon précédente, lorsque nous démontrons l'API Giphy, nous devons créer une requête et ensuite nous devons l'ouvrir. Dites, demande ouverte. Nous allons utiliser GET jusqu'ici. Nous ne stockerons aucune donnée sur ces API, nous allons donc utiliser GET afin que nous puissions obtenir des données à partir de là. Ensuite, nous voulons enfin que ce soit une requête asynchrone donc nous disons True. Donc, les choses que nous devons définir bien sûr sont dire onload, ce qui ne fera rien du tout en ce moment. De même, nous devrons avoir une sorte de gestionnaire d'erreurs, que faisons-nous quand les choses tournent mal. Nous allons définir cela aussi sur une fonction vide pour le moment. Mais ce que nous voulons faire est, bien sûr, envoyer notre demande et ensuite, à ce stade, nous voulons montrer à notre utilisateur que quelque chose se passe réellement et mettre en œuvre notre fonctionnalité d'attente. Pour ce faire, nous pouvons définir notre ID ou notre div plutôt que Ajax Attendre pour simplement voler. Actuellement, c'est caché. Il n'y a pas d'affichage. Nous pouvons régler l'affichage pour bloquer. Donc, nous allons dire très rapidement et dire document.getElementById ('ajax-wait') 'block'. Maintenant, nous ne voulons pas vraiment faire ce genre de chose au milieu de notre show- Headlinescode mais c'est quelque chose qui va se cacher dans une autre fonction très bientôt. Mais nous voulons juste nous assurer que nous pouvons vraiment faire quelque chose. Donc, sortons notre navigateur et donnons cela un tourbillon, et là il tourne heureux. Comme vous pouvez le voir, il est toujours là filant. Notre demande a évidemment été faite et envoyée et nous affichons notre gif filant. Cependant, la demande a-t-elle été complétée ? Y a-t-il une erreur ? On ne sait pas. Nous ferions mieux de cacher cette chose une fois que nous aurons fini notre demande. Donc, nous allons dans notre fonction et, bien sûr, nous voulons mettre cela à zéro maintenant. Très bien. Revenons donc à notre rechargement de navigateur. Comme vous pouvez le voir comme je suis en train de recharger, nous affichons un peu div filant et puis il disparaît à nouveau parce que nous avons terminé notre demande. Avons-nous terminé avec succès ou sans succès ? Qui sait, c'est le succès du journal. Regardez cela et ici je vais dire recharger l'erreur. Regardez notre console, succès ou très bon et succès. Donc, nous pouvons voir que nous configurons notre URL avec quelques paramètres dessus, créant un nouvel objet XMLHttpRequest. Nous l'ouvrons, disant que nous voulons effectuer un GET HttpRequest, avec notre URL qui a été définie. Nous voulons qu'il soit asynchrone, lorsque notre requête se termine avec succès, nous devrions exécuter la fonction onload. qui est défini comme ça jusqu'à présent. Quand il y a une erreur, nous voulons le faire. Enfin, nous l'envoyons, afin que l'un d'entre eux soit exécuté. Enfin, nous voulons afficher [inaudible] pour donner à l'utilisateur des commentaires, que leur action a effectivement eu un effet quelconque. Maintenant, la prochaine petite chose que je vais faire est juste de cacher notre document GetElementByID blah blah blah blah y colle. Boom, c'est là. Donc, nous utilisons essentiellement une fonction qui prend un ID et une valeur d'affichage, obtenant l'élément du document, vérifiant que l'élément existe et définissant l'affichage sur ce qui a été passé. Ensuite, nous avons une fonction show and hide, l' un d'eux passe dans le bloc à seteleDisplay l'autre que les passes dans none. Enfin, nous sommes libres de descendre et de dire HideEle ('ajax-wait'), puis de faire la même chose là. Oups, et ensuite on peut dire « show ». Nous allons tester cela dans notre navigateur à nouveau, recharger, que l'on a pris un certain temps. Là, vous pouvez voir que nous avons affiché notre petit div blanc, notre commentaire blanc et ensuite nous avons terminé avec succès et supprimé notre div d'attente de la page. Maintenant, tout est bien et bien, mais vous pouvez voir que nous ne montrons pas encore de gros titres dans notre page, qui est, vraiment, ce que nous voulons vraiment faire. Donc, dans notre prochaine leçon, nous allons examiner le cas de réussite où nous lisons la réponse de l'API et écrirons les titres individuels sur notre page Web. Comme toujours, si vous avez des problèmes, les choses ne fonctionnent pas pour vous, faites-le moi savoir tout de suite dans la zone de discussion et je vous aiderai dès que possible. 6. Lire les gros titres de notre API d'information: Ok alors. Donc, dans cette leçon, nous allons vérifier comment nous pouvons enfin lire les résultats de notre demande de titres de notre API de nouvelles. Nous avons vu comment nous allons les attendre et nous savons que notre demande est terminée avec succès, mais nous n'avons encore rien fait avec la réponse. Donc, aujourd'hui, nous allons voir comment nous pouvons lire les résultats. Nous verrons comment nous les analysons, déjà vu comment le faire dans JSON mais nous allons travailler à travers cela de toute façon. Enfin, nous allons en fait montrer nos gros titres. Donc, nous sommes ici dans notre code JavaScript et si nous allons regarder notre propre fonction de charge. Vous pouvez voir, comme vous vous souvenez, nous cachons simplement notre petit spinner puis nous enregistrons le succès sur la console. Pas super excitant mais ce que nous pouvons faire à la place, probablement la prochaine chose pas si excitante mais plus utile, est au lieu de la réussite de la journalisation, nous pouvons enregistrer la demande ResponseText. Donc, maintenant, ResponseText est tout ce que l'API nous a renvoyé, et rappelez-vous que c'est un gros flux au format JSON, donc ce n'est pas un objet JavaScript avec lequel nous pouvons faire quelque chose d'utile, mais nous pouvons le flouter dans le journal et voir ce qui est à l'intérieur. Donc, je vais sauver ça. Retournez au navigateur, rechargez. Ça prend un moment. Il est chargé maintenant et vous pouvez voir qu'en effet nous avons quelque chose de retour de notre API. Dit, « Statut OK, total des résultats 20 », puis il va dans les articles. Vous pouvez voir que vous avez un carré, crochet au début, ce qui signifie que c'est un tableau et ensuite il sort juste du bord de la ligne de la console parce qu'il est assez grand. Donc, à ce stade, je me dis  : « Mec, je veux voir ce qu'il y a dans cette réponse. » Donc, revenons à notre documentation de l'API de nouvelles et pendant que nous pouvons aller à la documentation de réponse ici et voir, oh oui. Nous obtenons un statut, des résultats, des articles. Tout cela correspond à nos attentes de ce que nous avons vu dans notre console, puis à l'intérieur du tableau de l'article, nous avons source, auteur, titre. Il s'agit du titre ou du titre de l'audio. C' est la chose avec laquelle on veut jouer, non ? Donc, revenons d'abord à cette page web, et maintenant notre code et à la place ce que nous allons faire est nous allons dire NewsData. Signe utilisateur JSON.parse. Oui. Donc, nous pouvons le faire et juste pour que nous sachions que quelque chose de sensé se passe, imprimons notre gamme d'articles. Donc, nous allons prendre notre journal de console à partir d'ici et récupérer nos articles NewsData. Encore une fois, ce n'est pas comme une chose super utile mais cela nous vérifiera que nous avons un objet JavaScript et nous pouvons voir les articles. Donc, recharger, et bon vieux Firefox, je veux dire Firefox ici nous a donné un tableau que nous pouvons aller regarder ici. Eh bien, et nous pouvons voir que la première chose est quelque chose sur Rihanna et autre chose sur les Avengers et Kylie Jenner. Tellement excitant. Donc, maintenant ce que nous pouvons faire est d'avoir une vieille boucle pleine et simple et dire, « Pour var articleIDX est zéro. » Disons que ArticleIDX est inférieur à - longueur articleIDX, nous ferons un plus. Je ne suis pas un super fan de ces types d' opérateurs, mais gardez la vie simple. Je peux y aller maintenant. D' accord. Donc, j'ai une petite boucle complète et finalement, je ne suis pas satisfait de ce formatage. Comme je l'ai dit, nous allons maintenant imprimer exactement un article, non ? Donc nous allons dire des articles de presse. Nous allons imprimer le titre de chaque article. On sait qu'il y a un titre là-dedans. Alors, essayons ça. Nous allons revenir à notre navigateur et ce que nous enregistrons maintenant est un tas d'articles ou de titres d'articles sur notre console, ce qui est génial. Donc, nous nous rapprochons de plus en plus de ce que nous voulons réellement. Maintenant, la prochaine chose à faire est de mettre tout cela dans la page Web au lieu de la console, et pour ce faire, je vais faire ce truc bizarre. Nous appellerons que la sortie est un tableau. Donc, ce que nous allons faire est que nous allons construire un tableau de HTML que nous pouvons confectionner dans nos articles ou nos titres, div. Donc, rappelez-vous que nous avons cette div avec un id de gros titres et nous allons y coller un tas de trucs. L' étape la plus simple que nous pouvons faire est de dire, « Output.Push the title », puis enfin, nous pouvons dire, « Get by id », et c'était les titres, HTML interne, sortie de signe utilisateur. join, comme ça. Alors, qu'est-ce qu'on fait ? Nous recevons nos titres div. Nous disons que nous voulons que le HTML, fondamentalement tout à l'intérieur de la div soit égal à notre tableau de sortie joint avec un tas de nouvelles lignes. Donc, nous pouvons aller jeter un coup d'oeil à ça et ensuite nous obtenons un tas de gros titres dans une grande masse ininterrompue au milieu de notre page là-bas. Encore une fois, jusqu'à présent si bon. Mais nous l'exécutons, c'est un peu plus bien et chaque fois que nous faisons le titre, mettons-le à l'intérieur de son propre div. Cela les fera apparaître sur une nouvelle ligne et nous donne l'occasion d'appliquer un style à eux aussi, parce que regardez quelques styles prédéfinis prêts pour nos articles. Donc, on va ouvrir un div. Nous allons mettre notre article, titre ou titre à l'intérieur, puis nous fermerons ce div, et encore une fois nous pouvons obtenir le bénéfice de cela juste en joignant notre sortie dans une grande chaîne longue et en l'affectant au HTML sur l'élément de nos titres. Donc, revenons à cela et nous allons recharger, et vous pouvez voir que j'ai une petite ligne au-dessus et au-dessous de chacun des titres de l'article. Juste pour les séparer un peu, et vous pouvez ils apparaissent individuellement sur chaque ligne. Donc, nous nous rapprochons de plus en plus de la façon dont nous voulons qu'ils apparaissent réellement. Mais rappelez-vous, nous voulons qu'ils soient cliqueux. Vous voudrez avoir à cliquer dessus. Donc, la prochaine chose que nous pouvons faire est de les mettre à l'intérieur et une étiquette. Donc, nous allons dire, « un href est égal. Donc, on peut les mettre à l'intérieur dans une étiquette comme ça. Maintenant, quand nous retournons à notre navigateur, nous rechargeons et ils cliquent tous ce qui est génial, mais quand nous cliquons sur eux, ils ne font rien vraiment. Mais maintenant, cela devient un peu occupé à l'intérieur de ces fonctions onload ici, et je veux vraiment mettre tout cela à l'intérieur d'une fonction propre juste pour le séparer un peu. Donc, je vais aller au sommet ici et je dis que j'essaie de MakeHeadline. Vous pouvez voir comment j'ai pu penser à cela avant. Et nous allons avoir ici, nous aurons notre titre, c'est tout ce que nous devons vraiment savoir. Et oui, alors mettez tout ça là-dedans. Et ça devient juste titre. Et alors ce que nous voulons faire est de retourner notre sortie. Donc, nous pouvons passer la sortie, et la retourner à nouveau avec quelques choses à l'intérieur. Donc, maintenant nous devons utiliser notre fonction MakeHeadline. Étonnamment, j'ai supprimé ce texte très utile. De toute façon. Là, il est de retour. Essayons si ça marche. Recharger et bien sûr j'ai besoin d'inclure aussi notre sortie et dire que la sortie est assignée là. Ok, enfin on peut faire ça, et d'accord. Donc, c'est ce dont nous avons besoin ici, et assurez-vous que tout fonctionne comme prévu. Et il le fait, si bien et bien. Cependant, nous avons besoin de notre MakeHeadline, nous avons besoin d'un petit href pour faire quelque chose quand il est cliqué. Donc, nous allons dire onclick égal, disons juste log. Étonnamment, nous devons commencer à échapper des citations ici, cliqué. Juste pour s'assurer que cela va marcher pour nous aussi. Ok, sauve ça. Retournez à notre navigateur, et nous pouvons dire cliquer, cliquer, cliquer, cliquer, cliquer. Nous pouvons voir que cela s'exécute là. Et on pourrait nous pardonner de penser que la prochaine chose à faire est de bien décider, mettons juste notre titre là-dedans. Comme ça ? D'accord. Alors, vérifions. Voyez comment cela fonctionne. Donnez à cela un rechargement. Enfin, super, nous montrons tous nos titres ici, et choisissons un très soigneusement pour cliquer sur, et excellent qui affiche le titre dans notre console, et la façon dont nous voulons. Nous cliquons sur cette ligne, erreur de syntaxe, un crochet manquant, fermer les crochets après la liste des arguments. Donc, nous pouvons voir que j'ai choisi l'un de ces titres, il y a une citation. Et bien sûr, nous utilisons des guillemets simples ici pour joindre notre titre. Donc, malheureusement, nous allons devoir faire quelque chose sur les citations qui sont à l'intérieur du titre. Et la chose rapide et facile que nous pouvons faire est de remplacer tous nos guillemets simples. Et tous. Donc, j'ai mis un g là pour dire, obtenir tout ce que vous trouvez dans la chaîne, pas seulement la première, et ensuite nous voulons remplacer cela par une barre oblique inverse, et parce que c'est une barre oblique inverse, nous devons faire une double échappement de la barre oblique inverse. Ce qui est super ennuyeux. J' utiliserais des guillemets doubles pour cela. Bon, alors qu'est-ce qu'on fait ici ? Nous disons que ce que nous voulons faire, c'est remplacer chaque citation, une barre oblique inverse suivie d'une citation unique. Donc, nous les échappons fondamentalement, disant que cette citation unique n'a aucune fonction dans cette chaîne. C' est juste pour l'affichage. Je veux dire que nous utilisons deux barres obliques inverses parce que nous disons ne pas faire l'évasion maintenant, faire l'échappement dans la chaîne réelle qui est imprimée. Bon sang, et donc ce que nous devons faire maintenant, c'est retourner à notre nouvelle giphy, page web, recharger. Et choisissons quelque chose qui n'a pas de guillemets dedans. Donc, il y en a un sur Karlie Kloss. On voit que Karlie Kloss est imprimé sur la console, heureusement. Et Avengers Infinity. Voir ici nos guillemets simples apparaissant dans la console. Joyeux jours. Et enfin avoir quelque chose avec des guillemets doubles dedans. Oh chéri, chaîne littérale ininterrompue. Donc, ça va causer des problèmes, cause de la double citation. Il va y avoir une dernière chose que nous allons faire ici. Nous allons dire Encodeuricomponent. Maintenant, c'est quelque chose qui est intégré dans Javascript, qui est pour préparer une chaîne à utiliser dans une URL mais nous donne d'autres avantages tels que l'encodage de nombreuses chaînes qui causent, ou l'encodage de nombreux caractères qui causent, nous problèmes. Cependant, les guillemets simples ne sont pas traités par Encodeuricomponent. La tête en arrière. Nous rechargeons notre page, cliquez sur ce titre le plus gênant et vous pouvez voir ce que nous avons ici. Les espaces ont été transformés en pourcentage deux zéro, qui est une valeur hexadécimale pour un espace, et nos autres caractères problématiques ont également été convertis. Vous pouvez voir que le double guillemet est maintenant deux pour cent deux, et nous avons toujours notre citation unique là qui a été échappé avec une barre oblique inverse, c'est pourquoi il apparaît heureux dans notre console. Et le fait est que nous avons maintenant une valeur que nous pouvons alimenter dans l'API giphy pour récupérer un tas d'images qui correspondent à Drake houblons sur N*E*R*D et Lemon Remix de Rihanna. Donc, c'est aussi loin que nous allons prendre cela pour cette leçon parce que ce nous avons fait est d'envoyer avec succès une requête à l'API de nouvelles. Nous avons reçu une réponse. Nous avons traité la réponse et l'avons mise sur notre page Web. Nous prenons des mesures lorsque la réponse ou lorsque le tittle est cliqué. Et la prochaine chose que nous voulons faire est envoyer cela à l'API giphy pour récupérer un tas d'images. Comme toujours, si vous rencontrez des problèmes pendant cette leçon, en faisant quelque chose vous-même, n' oubliez pas de me le faire savoir dans la zone de discussion et je vous aiderai tout de suite. Sinon, je te verrai dans la prochaine leçon. 7. Gérer les échecs d'AJAX: D' accord. Donc, cela nous amène au dernier des trois états Ajax dont j'ai parlé, ceux dont nous devons prendre soin si nous avons l'utilisation bien Ajax et c'est l'échec. Qu' est-ce qu'on fait quand les choses ne vont pas bien ? Eh bien, il s'agit de gérer les erreurs évidemment. Donc, si nous envoyons une demande et la réponse indique qu'elle n'a pas réussi pour une raison quelconque, et nous devrions informer l'utilisateur que les choses ne se sont pas déroulées correctement. Ce qu'ils essayaient de faire n'a peut-être pas réussi. Devraient-ils essayer à nouveau ? Tout cela fait partie de s'assurer que l'utilisateur comprend le résultat de son action. Encore une fois, ce sera un peu de code. S' il vous plaît, copiez encore une fois le codage au fur et à mesure que vous allez. C' est juste une excellente façon d'apprendre et beaucoup mieux que de s'asseoir et de regarder parce que évidemment je vais le faire aussi, en même temps. Donc, revenons dans le code, et comme un rafraîchissement rappelez-vous que nous avons cette div ici avec un identifiant d'erreur. C' est celui que nous allons utiliser pour afficher le message d'erreur, et il a un démarrage spécial prédéfini dans notre CSS pour le faire paraître un peu rouge et une colère comme une erreur. Il est également configuré pour avoir un affichage de non [inaudible], sorte que nous ne le voyons pas normalement. Donc, nous voici dans notre code Javascript, et voici la fonction de notre titre de spectacle et juste perdu là pendant une minute. Ici, nous sommes en erreur. Donc, nous assignons une fonction à la propriété on error de la requête. La première chose que nous faisons est de cacher les dents blanches, afin que l'utilisateur sache que sa demande est terminée. Donc, la dernière chose que je vais faire est d'obtenir notre élément d'erreur, et de le définir à un message d'erreur. On y va. La dernière chose que nous devons faire est de montrer un élément, qui est l'élément erreur. Donc, nous y voilà. Je vais juste recharger le fichier. page Web, et vous devez cliquer sur celui-ci, et je peux voir est toujours se comporter comme il l'a fait avant. Maintenant, le titre apparaît dans la console et tout va bien. Nous ne voyons aucun message d'erreur que si nous allons éteindre notre WiFi et « Hey presto, je vais faire un rechargé ». Nous voyons un message d'erreur tout simplement pas le plus beau message d'erreur dans le monde, mais nous pouvons dire que nous indiquons assez clairement qu'il y a eu un problème et nous attrapons le fait qu'il y avait un problème et dire à l'utilisateur ça. Bien sur un rechargement, et là nous avons encore nos gros titres. Donc c'est tout, une démonstration très rapide de la façon dont nous pouvons montrer quand les choses ont mal tourné sans requête Ajax. Dans notre prochaine leçon, nous allons continuer à mettre en pratique tout ce que vous avez appris jusqu' à présent en vous inscrivant à l'API Giphy. Consultez les documents, puis adaptez nos titres dans l'API Giphy pour afficher quelques images. 8. Accédez à l'API GIPHY grâce à vos nouvelles compétences AJAX: D' accord. Il est donc temps de mettre vos nouvelles compétences en action. C' est l'heure de la pratique. La pratique vous aidera à consolider vraiment tout ce que vous avez appris jusqu'à présent. Nous allons utiliser le moteur de recherche GIPHY. Nous allons prendre le titre que nous avons, ou l'un des titres sur lesquels nous pourrions cliquer dans notre page Web, et alimenter ce titre dans la recherche d'images GIPHY, puis afficher toutes les images qui correspondent à ce titre. Nous allons le faire une étape à la fois. Donc, je ne dis pas, « Hé, va juste faire ça maintenant. » La première chose que nous devons faire, c'est de vous inscrire pour une clé API chez GIPHY. Alors, dirigez-vous vers developers.giphy.com. Cliquez sur le bouton Connexion. Cliquez sur Joindre GIPHY qui est en minuscule écriture au bas du formulaire de connexion. Retournez sur developers.giphy.com, parce qu'une fois que vous avez rejoint, je pense qu'il vous laisse sur giphy.com. Cliquez sur Créer une application. Remplissez ensuite le formulaire pour créer l'application. Ensuite, il vous montrera votre clé API. Vous pourrez l'utiliser dans tous les appels à l'API que vous effectuez. Je vais le faire maintenant. Je suis sûr que vous vous êtes déjà inscrit aux services en ligne. Donc, il n'y aura rien de super difficile ici. Mais, je vous encourage toujours à y aller et essayer avant que vous me regardiez le faire aussi. D' accord. Donc, nous voici à la page des développeurs GIPHY. C' est probablement tout ce que vous attendez de GIPHY. Donc, je vais cliquer sur Se connecter. Je vais cliquer sur le petit lien GIPHY Joignez-vous à GIPHY. Je trouve que leur page d'inscription est assez distrayant. Je vais utiliser mon luke.fabish @lukefabish. Je vais définir mon nom d'utilisateur sur lukefabish-gifs, et mon mot de passe serait génial, quelque chose autour de ça. On y va. Je ne sais pas si tu peux l'entendre sur le micro. Cette page fait tourner les fans de mon ordinateur portable et tourbillonner comme des fous. Donc, je vais cliquer sur Rejoindre et descendre de ceci dès que possible. Je dirais que ne sauve pas ça. D' accord. Donc, nous avons rejoint et maintenant je peux cliquer sur Créer une application. Bon, on va dire, toutes les nouvelles que GIPHY peut nous donner. Je l'appellerai GIPHY News. Je vais cliquer sur Créer une application et boum. Il y a ma clé API, que j'ai sélectionnée et copiée. Donc, c'est la clé que nous pouvons utiliser pour faire des requêtes d'API contre l'API GiPhys. Maintenant, que nous avons fait cela, nous ferions mieux d'aller examiner les documents de l'API GIPHY. Donc, nous pouvons les trouver sur developers.giphy.com/docs. Il y a juste un peu de navigation à gauche. Consultez la documentation technique. Cliquez sur Rechercher le point de terminaison. Ensuite, vous serez en mesure d'examiner leurs paramètres dans les demandes et vous pouvez voir ce qui est inclus dans la réponse de ces demandes. Une partie de ces réponses est quelque chose qui s'appelle l'objet GIF, je crois. Donc, consultez les définitions de schéma, encore une fois, dans la navigation de gauche. Cliquez sur l'objet GIF. Surtout, ne vous inquiétez pas. Je vais passer à travers en utilisant la réponse GIPHY, en particulier l'objet GIF, qui est un peu grand. Je me suis trouvé un peu perplexe. Mais on va faire ça ensemble. D' accord. Donc, vous n'avez pas besoin de taper cette URL dans votre barre d'adresse. Nous pouvons simplement cliquer sur l'élément de menu Docs. C' est sur un joyeux et comme Giphy à nouveau. Mais sur le côté gauche, nous avons la documentation technique. Vérifie ça. Voici notre recherche GIFS. Donc, nous allons au point de terminaison de recherche. Vous pouvez voir l'hôte est api.giphy.com. Voici notre chemin et il nous dit ce qui devrait aller dans la demande. Notre clé API, bien sûr, les requêtes, que nous allons mettre à notre titre, et quelques autres choses que nous, ou l'autre que nous allons réellement utiliser est l'écriture. Nous allons mettre à G pour nous protéger contre certains des contenus GIPHY les plus difficiles. La réponse nous dit que nous obtenons quelque chose appelé données. Ce sera que nous aurons un tableau d'objets GIF, de pagination, et quelque chose appelé l'objet Meta. Celui que nous avons vraiment besoin de vérifier, oh, mon fan va devenir sauvage en ce moment, est l'objet GIF. On peut juste cliquer ici pour y aller et le regarder. Mais, j'ai dit que c'est dans les définitions de schéma, et c'est GIF Object. On y va. Il nous dit que nous devons taper une carte d'identité, une limace, beaucoup de choses en fait, comme beaucoup, et beaucoup et beaucoup de choses. Inclut la plupart des images. Donc, nous devons aller regarder l'objet images. C' est là que réside réellement nos données d'image ou URL pour trouver l'image. Il y a un tas de différents types dans cette réponse. Il y a une hauteur fixe, et une largeur fixe, et une largeur fixe encore, et une largeur fixe désamplée, et ainsi de suite, et ainsi de suite, et ainsi de suite. Vous découvrirez que nous arrivons à l'original. D' accord. Donc, c'est celui que nous allons utiliser. Donc, nous allons trouver notre original, qui est un autre objet, qui a une URL. Nous utiliserons simplement cette URL pour afficher notre image. Comme je l'ai dit, c'est beaucoup de détails. La chose que nous voulons est enterrée assez profondément dans la réponse. Je vais vous montrer comment on peut y accéder dans notre code. Donc, un pas à la fois. Comment allons-nous faire notre recherche GIF ? Donc, c'est le peu où je veux que vous lanciez votre éditeur de texte, allez de là où nous nous sommes retrouvés avec nos autres étapes jusqu'à présent, et que vous faites une copie de la fonction de notre titre de spectacle que nous avons déjà et que vous l'appelez Afficher les GIF si vous comme. Nous allons remplacer quelques choses là-dedans pour commencer. Donc, vous savez comment nous construisons l'URL avec certains paramètres. Maintenant, notre URL devrait être la suivante, http://api.giphy.com/v1/gifs/search. Nous devrions utiliser les paramètres comme suit. La note devrait être G, Q devrait être le titre, et je vais en parler juste dans un instant, et l'ApiKey devrait être réglé sur quelle que soit votre clé API s'est avérée être. Ensuite, affectez une fonction à onload pour votre nouvelle requête http XML. Il suffit de le faire imprimer les résultats de la demande d'API sur la console du navigateur. Ensuite, la propriété onerror peut être à peu près comme elle l'était avant avec un message légèrement différent, non ? Une erreur s'est produite lors de l'obtention des GIF au lieu d'une erreur lors de l'obtention des titres. Mais la chose que je voulais vraiment revenir est pour les paramètres. J' ai dit que Q devrait être égal à leur titre cliqué. Donc, vous savez où nous construisons notre lien. Ici, c'est juste ici. Nous construisons notre lien. Nous avons onclick=console.log. Modifiez cela par le nom de votre nouvelle fonction, Afficher les GIF, si c'est ce que vous avez décidé de l'appeler. Nous transmettrons notre titre encodé URI. Ensuite, cela sera à votre disposition pour passer dans la demande de recherche GIPHY. Donc, s'il vous plaît, essayez de mettre en œuvre cela. Comme je l'ai dit, nous pouvons commencer par une copie de notre fonction Afficher les titres, modifier en utilisant les informations que vous avez ici. Une fois que vous aurez fait cela, je vais voir comment nous pouvons commencer à afficher des images individuelles dans la page Web. Donc, nous voilà de retour et je vais maintenant rendre ma fonction Show GIF. Donc, comme je l'ai dit, je vous encourage vraiment, super fortement à y aller par vous-même avant de suivre ici. Juste parce que c'est comme une super bonne pratique. Je vais commencer par une copie de notre fonction de titre de spectacle et sur le haut de la dernière accolade bouclée, erreur de calcul fatale. Donc, ce que nous voulons faire, laissez-moi l'appeler Show GIF. D' accord. Donc, nous avons Show GIF dans nos titres URL va devenir notre URL GIF. GIF URL, je vais l'utiliser ici. Ok et je vais remplacer cela par l'API GIPHY Fin of Point. Alors je veux que notre note soit égale à g. Je dirai que q est égal à, eh bien, nous devons avoir ce passé. Je vais dire, je vais juste l'appeler Terme de recherche, parce que nous pourrions certainement l'utiliser à nouveau dans le futur. Donc, nous allons chercher, nous pourrions l'utiliser pour chercher plus que des titres. D' accord. Donc, il y a notre URL avec des paramètres. Nous faisons notre demande comme avant. Nous émettons un Get car nous demandons des informations et n'essayons pas de mettre à jour les informations sur le serveur. Ça devrait être un poste. Maintenant, nous commençons à définir notre onload. Encore une fois, ils vont cacher notre élément de poids. On va dire, eh bien, oui, alors, on va juste envoyer ça à la console, non ? Comme je l'ai dit, nous ferions console.log. Le reste, nous pouvons nous en débarrasser pour l'instant. En cas d'erreur, nous dirons : « Il y a eu une erreur lors de la récupération des GIF. Veuillez réessayer. » Donc, la dernière chose que nous devons faire est de nous assurer que cette chose est appelée quand l'un de nos titres est cliqué, donc nous allons revenir à l'endroit où nous construisons le titre et nous allons dire, « ShowGIF ». On y va. Donc, je vais recharger notre page GIPHY News. Laissez-moi cliquer sur un titre, et vous pouvez voir notre blanc s'affiche, puis disparaît. Ensuite, vous pouvez voir que nous avons tous ces trucs ici de GIPHY, donc c'est la réponse de l'API de GIPHY. Comme promis, il commence par une clé de données, qui est un tableau des objets GIF comme nous l'avons vu défini dans la documentation GIPHY. Donc, nous sommes de retour à notre fonction GIF show, et je vais aborder cela de la même manière que nous l'avons fait précédemment. Nous allons le parcourir un peu à la fois juste pour que nous puissions lentement naviguer vers l'affichage de ces choses sur la page Web dans un format que nous voulons. Donc, la première chose que je vais faire est de définir un objet. Je vais l'appeler GifData égal à JSON.parse (req.responseText). Sortons cela à la place, GifData. Donc, je vais enregistrer cela, retourner à notre navigateur, recharger, cliquer sur un titre et voir que nous pouvons voir que cela a été décomposé maintenant en un objet réel et être imprimé joliment pour nous par Firefox. Nous avons trois éléments fondamentaux de notre réponse. On a des données, on a des méta et de la pagination. pagination est des informations sur le nombre de résultats qu'il y a, nombre de résultats dans une page, et elle nous permet de parcourir de grands ensembles de résultats. Mais, nous ne le ferons pas, nous ferons juste la première, la première page de résultats. Un peu de métadonnées nous parlent de notre état, 200 ok, le message est correct, et nous donne l'ID de réponse, et enfin, des données avec nos objets GIPHY, qui sont toutes ces choses. Si nous examinons l'un de ces trucs, nous pouvons voir que ce que nous avons vu dans la documentation est ici. Nous sommes intéressés par les images. Revenons avec les images, et enfin après tout cela, nous pouvons voir qu' il y a un original avec l'URL. Nous pouvons utiliser cette URL pour réellement regarder un GIF. Je me demande ce qu'est ce GIF. Cliquons dessus. Très bien. Alors, commençons à utiliser ces données. Donc, au lieu de simplement enregistrer les données GIF, ce que nous pouvons faire est de mettre en place une autre petite boucle pour. Je dirai pour, dire que c'est moins que le nombre d'éléments dans notre réponse. Donc, je vais dire « gifData.Data.Length. » Je dirai, « GiFIDX », encore une fois par brièveté en utilisant un opérateur unitaire, pas un ventilateur. Alors, qu'est-ce qu'on peut faire avec ça ? Eh bien, ce que nous pouvons faire est que nous pouvons dire, ok, s'il vous plaît nous montrer des données (GiFIDX) .images.original.url. Mon Dieu, donc je pense que c'est correct. Je ne me souviens pas exactement. Voyons ce que nous avons dans notre console. Rechargez-le. Cliquez sur un titre, et ici nous obtenons un tas de GIF. Maintenant, cliquez sur un, voyons ce que nous obtenons. Je trouve ce peu addictif de cliquer sur ces choses pour voir ce qu'elles sont. Bref, alors maintenant que nous avons ça, nous avons tout ce dont nous avons besoin pour commencer à insérer des images dans notre page Web. Mais comment allons-nous faire ça ? Eh bien, vraiment ce que je veux faire est de créer un tas de balises d' image et de les mettre dans notre div GIF parce que si vous vous souvenez, notre HTML a un div avec un ID de GIF, donc je veux le remplir avec des images, chacune avec ses attributs source définis sur tout ce que notre GifData, GiFIDX, images.original.url est tel tout droit. Je sais que je vais vouloir une nouvelle fonction pour ça. Invenons-en un, AddGifimage comme ça. Cela va être quelque chose qui ajoute notre URL pour créer une image à l'intérieur d'un conteneur. Donc, notre conteneur va être ce div appelé GIF. Alors on veut tout ça là-dedans. Ces sons drôles que vous pouvez m'entendre faire juste moi en utilisant des commandes. Donc, nous avons une définition d'une fonction pour le faire pour nous. Donc, passons à ci-dessus montrer les GIF et créer cette fonction appelée fonction addgifimage addToelementid et imgsrc. Donc, ce que nous voulons faire est de créer une nouvelle image, et nous allons dire, parce que nous allons demander au navigateur de le faire pour nous de créer un nouvel élément d'image, CreateElement de type img. Maintenant que nous avons une nouvelle image, nous pouvons dire que c'est une source, et dire newimg.source égale la source de l'image. Ce que nous voulons faire maintenant, c'est ajouter ceci à notre image, bien un conteneur pour nos images. Nous avons passé le nom de ce conteneur ici, AddToElementid. Je pourrais appeler ça ImageContainerID. Cela semble être un nom plus intuitif. Donc, nous dirons que containeRele est égal document.getElementById (imageContainerId). Ensuite, nous pouvons dire containerele.add. Non, c'est append. Merci de me le rappeler. Éditeur de texte un NewIMG. On est assez finis. Alors, que va-t-il se passer ici ? Chaque fois que nous regardons l'une de ces URL, nous devons appeler addGifImage, et nous allons dire, s'il vous plaît créer un nouvel élément d'image, définir la source de cette URL et l'ajouter à notre conteneur GIF. Donc, nos GIF div. Voyons comment cela se passe dans le navigateur. Rechargez, attendez, et je vais cliquer sur « Volonté et grâce » Renouvelé. Ok, et regarde ce qu'on a. Voici un tas de GIF apparaissant à partir de GIPHY. Ils correspondent plus ou moins à cette nouvelle entreprise Will and Grace. Donc, oui et ils apparaissent comme ça côte à côte et les GIF apparaissent dans ce format de colonne juste à nouveau, cause du CSS que j'ai configuré précédemment pour cela. Donc, c'est plutôt bon. Alors, regardons un autre, Bella Hadid et quelque chose ou autre, et que se passe-t-il ici ? Certaines choses semblaient avoir changé, d'autres pas. Je ne suis pas sûr que notre cote G fonctionne vraiment comme il devrait ici, mais nous avons comme des charges plus de GIF que nous devrions avoir. Ce qui se passe ici, c'est, parce que nous appelons cet AppendChild à notre conteneur, il ajoute beaucoup de GIF à celui-ci ou à ces images, mais il n'efface pas les anciens. Donc, nous ferions mieux de le faire avant de faire autre chose. Donc, ce que nous allons faire à nouveau, disons juste document.getElementById, GIF, point, comme ça. Donc, ça veut dire, hey, tout dans notre div GIFs ne l'a mis à rien, chaîne vide. Alors, voyons comment cela fonctionne dans le navigateur maintenant. On va recharger ça. Je vais cliquer sur ce truc à propos de Barbra Streisand. Je vais me débarrasser de notre console. Eh bien, voici nos GIF. Wow, Prince Charles. Donc, nous avons d'autres images Prince ici clairement, mais nous pouvons voir que ces GIF précédents sont effacés et nous les avons remplacés par tous ces autres types de GIF Princey. Donc, c'est à peu près l'application que nous avions l'intention de la construire. Nous avons des titres d'un côté, GIF de l'autre qui correspondent aux titres lorsque nous cliquons sur eux. Nous obtenons toutes ces données à partir de deux API différentes où nous obtenons les titres de l'API de nouvelles. Nous alimentons un titre dans l'API GIPHY pour obtenir un tas d'images GIF correspondantes. 9. Il est temps de dire au revoir !: D' accord. Tout le monde, c'est tout pour notre classe. Nous avons couvert beaucoup de terrain. Nous avons vu comment nous travaillons avec JSON. Nous avons vu comment nous accédons aux API publiques, comment nous pouvons utiliser AJAX pour faire des demandes, lire des réponses et gérer les erreurs, et bien sûr, nous avons construit notre petite page Web pour montrer des cadeaux qui correspondent aux gros titres du monde. N' oubliez pas de poster votre projet dans la zone des projets. J' aime voir le travail que font les étudiants, et, bien sûr, je suis ici prêt à vous aider si vous rencontrez des problèmes pendant que vous construisez votre projet. Sinon, n'oubliez pas de suivre si vous souhaitez voir plus de cours comme celui-ci et j'ai hâte de vous revoir à l'avenir.