Lerne AJAX und erstelle einen interaktiven, grafischen Newsfeed.

1. Willkommen zum Kurs!: Hallo, alle und herzlich willkommen zu unserer Einführung in Ajax. Hier lernen wir, wie man Ajax nutzt, um Daten dynamisch aus dem Internet abzurufen und in unsere Webseiten einzufügen. Während dieser Klasse lernen Sie alles, was Sie wissen müssen, um Ajax zu verwenden, einschließlich der Verwendung von JSON-Daten, Zugriffs auf öffentliche APIs, woher die Daten stammen, und natürlich alles, was Sie wissen müssen, um Stellen Sie eine Ajax-Anfrage, die die Daten sendet, Antworten liest, Fehler behandelt und unsere Benutzer amüsiert, während sie warten, bis unsere Ajax-Anfrage abgeschlossen ist. Während dieses Unterrichts werden wir natürlich ein Projekt aufbauen. Das ist es, was wir bauen werden. Diese kleine Webseite ruft Schlagzeilen von einer Nachrichten-API ab, zeigt sie auf einer Seite der Seite an und wenn unser Benutzer klickt, dann zeigt sie animierte GIFs an, die die Überschrift interpretieren, was der beste Weg ist, an den ich denken kann, den Sinn für die Schlagzeilen der Welt jetzt zu machen. Also, für wen ist diese Klasse? Nun, es ist eine Einführung in Ajax, aber wirklich, es ist eine Zwischenklasse, da es scheint, dass Sie bereits etwas JavaScript kennen und dass Sie bequem mit HTML arbeiten. Natürlich, wenn Sie Fragen oder Kommentare während des Kurses haben, lassen Sie es mich bitte im Diskussionsbereich wissen. Ich werde mich sofort bei Ihnen melden, sonst vergessen Sie nicht, den Folgen-Button zu drücken und ich freue mich darauf, Sie in der Klasse zu sehen. 2. Soooo, was ist überhaupt AJAX?: Also, bevor wir in die Verwendung von AJAX eintauchen, werden wir ein wenig darüber reden, was bedeutet das? Was ist das für A-J-A-X? Was machen wir eigentlich damit, und was sind die Vor- und Nachteile der Verwendung? Lassen Sie uns zunächst einen Blick darauf werfen, was AJAX bedeutet. Nun, das erste A steht für Asynchron, was bedeutet, dass, wenn wir etwas asynchron tun wollen, wir asynchrone Arbeit beginnen, was auch immer das sein mag, dann gehen Sie los und tun Sie etwas anderes, während der asynchrone Job ist seine eigene Sache zu tun, Abschluss wir hoffen. Sobald es fertig ist, wird es uns wissen lassen, dass es erledigt ist und wir sind wieder weg von der Arbeit, die wir vorher gemacht haben, und dann gehen wir uns mit den Ergebnissen davon befassen. Meine übliche Analogie dafür ist, mein Frühstück zu machen. Das erste, was ich mache, ist etwas Wasser zu kochen und dann mache ich den Rest meines Frühstücks. Ich warte nicht auf das Wasser, das für meine heiße Tasse Tee kocht. Bevor ich den Rest meines Frühstücks mache, beginne ich einfach mit dem Wasserkocher und mache dann alles andere und der Wasserkocher ist wie eine asynchrone Operation. Ich hoffe, dass die kleine Analogie für Sie funktioniert. Wenn Sie sich rechts entlang bewegen, steht das J nicht überraschend nach vorne JavaScript. Also, wir haben asynchrone JavaScript und dann bekommen wir ein weiteres A, das für Plus steht, wirklich ist es ein und. Aus irgendeinem Grund entschieden die AJAX-Leute, dass es immer als asynchrones Javascript Plus geschrieben werden muss , das ist wirklich ein And, X, das für XML steht, was jeder damals benutzt hat , als AJAX zuerst war erfunden, aber niemand verwendet XML mehr wirklich in Front-End-AJAX-Kommunikation. Jeder verwendet JSON, Javascript Object Notation. Wir werden einen Mini-Blick darauf werfen, was JSON ein wenig später in der Klasse ist , nur um sicherzustellen, dass wir alle auf dem Laufenden sind, nichts zu schwierig, aber das ist das Format von Daten, das für den Austausch von Informationen zwischen einem Server und einem Web verwendet wird -Browser. Apropos, was macht AJAX? Nun, beachte das, das ist das übliche Arrangement, das wir haben. Dies ist die bekannte AJAX-Methode zum Senden von Informationen zwischen einem Browser und einem Server. Dies ist das Szenario, in dem wir AJAX nicht wirklich verwenden möchten. Stellen wir uns vor, wir haben ein Anmeldeformular für eine neue Website und wir senden unsere Daten an den Server schlagen eine Anmeldung in der Punkt und dann sendet der Server zurück unsere ganze neue Webseite. Also, alles in unserem Browser ändert sich und boom, wir haben eine brandneue Seite in unserem Browser geladen. Wir haben das Anmeldeformular in unserer Geschichte. Also, wenn wir den Zurück-Button drücken, gehen wir zurück auf das Anmeldeformular. Also, das ist, wofür wir AJAX verwenden. Stellen Sie sich vor, wir haben eine Webseite geöffnet und es ist eine Art Suchwerkzeug, Sie können sehen, dass Sie eine kleine Lupe in ihrem Browser haben und wir senden unsere Anfrage. Wir haben einen Endpunkt namens Search auf unserem Server getroffen und wir übergeben einen Parameter, nach dem wir suchen möchten, und dann sendet der Dienst einige Daten zurück, er sendet keine ganz neue Webseite zurück. Was wir tun, ist, dass wir diese Daten nehmen und sie in die Mitte unserer bestehenden Webseite stampfen, wir laden keine neue. Also, klar, das ist eine ganz andere Erfahrung für den Benutzer. Sie sehen die Webseite nicht, also bekommen wir das und ich sehe es neu laden. Ich sehe nur die Seite, die sie ursprünglich angeschaut haben, mit dem neuen Zeug, das plötzlich in der Mitte auftauchte. Also, was sind die Vor- und Nachteile der Verwendung von AJAX? Nun, auf der glücklichen Seite, schafft dies eine großartige Benutzererfahrung, wenn es gut verwendet wird, weil es uns sehr interaktive und reaktionsschnelle Webseiten gibt und insgesamt senden wir weniger Daten. Wir senden nur die Daten, die wir vom Server benötigen, oder wir holen die Daten, die wir brauchen, vom Server über den Browser und nicht über eine ganze Webseite. Eines der anderen Dinge, die wir mit AJAX ein wenig vorsichtig sein müssen, nun, es kann Komplexität einführen, die sonst nicht in unseren Webseiten vorhanden wäre. Ich denke, das ist ein fairer Handel, weil wir Funktionalität bekommen , die sonst auch nicht da wäre. Aber die Sache ist, dass die Verwendung von AJAX die Logik, wie JavaScript-Code komplexer machen kann. Mit einem zwei AJAX-Aufrufen bringt es uns nicht zu viel Mühe, aber wenn unser AJAX-Aufruf abgeschlossen ist und einen anderen AJAX-Aufruf machen muss und das abgeschlossen ist und das einen dritten AJAX-Aufruf erfordert, kann es ziemlich sein schwierig zu wissen, was los ist und wenn etwas schief läuft, kann das Debuggen ziemlich schwierig sein. Wir müssen sehr vorsichtig sein, um endlich nicht den Zurück-Button zu brechen, denn wenn wir die Ergebnisse einiger großer AJAX-Anfragen haben , die auf einer Webseite sitzen und der Benutzer auf den Link klickt, vielleicht ist das in unseren AJAX-Daten und dann klicken sie auf den Zurück-Button, werden sie die Ergebnisse der AJAX-Aufrufe sehen, die wir zuvor gemacht haben? Nun, es sei denn, wir waren vorsichtig, sie zwischenzuspeichern und erneut zu senden, dann wahrscheinlich nicht. Sie werden wieder dort sein, wo sie begonnen haben, bevor diese AJAX-Anfragen gestellt wurden. Also, du sagst vielleicht, was ist hier passiert? Benutzer sind daran gewöhnt, die Schaltfläche „Zurück“ zeigt ihnen genau die gleiche Seite, die sie verlassen haben, bevor sie einem Link aus dieser Seite gefolgt sind. Nun, da wir einen kurzen Blick darauf gehabt haben, was AJAX bedeutet, haben wir gesehen, was es tut, und wir haben ein bisschen einen Blick auf die Vor- und Nachteile gehabt, werden wir anfangen zu schauen, wie es tatsächlich in JavaScript in unserer nächsten Video-Lektion verwendet wird. 3. So verwendest du AJAX in JavaScript: Ok. Also, jetzt ist es Zeit, darüber zu sprechen, wie wir eine AJAX-Anfrage in JavaScript stellen. Heute werden wir uns ansehen, wie wir das in JavaScript machen, offensichtlich mit dem XMLHttpRequest-Objekt, und wie wir es tatsächlich verwenden können, um eine Anfrage zu stellen. Also, XMLHttpRequest. Also, was ist das? Nun, das ist ein Standardteil von JavaScript in einem Browser. Also, es wird immer für Sie in einem Browser verfügbar sein. Es hat alles, was wir brauchen, um eine AJAX-Anfrage zu stellen. Es wird oft oft nur auf XHR oder xhr in Kleinbuchstaben abgekürzt , weil es ziemlich ein Bissen ist. Schließlich ist es nicht mit einer Anzahl anderer Dinge zu verwechseln , die für asynchrone Anfragen verwendet werden. Es gibt eine Menge Dinge, die auf XMLHttpRequest gebaut werden, und es gibt mehr Dinge in JavaScript integriert werden, um asynchrone Operationen wie Versprechen wie Async/Await zu behandeln , und wir bekommen bald etwas namens fetch. Aber XMLHttpRequest ist die grundlegende Methode, die wir haben, um eine AJAX-Anfrage zu stellen. Nur noch einmal, dass XML im Namen völlig irreführend ist. Wir müssen XML nicht zurückbekommen. Die meiste Zeit werden wir JSON bekommen und wir werden in Kürze ein kleines Beispiel dafür sehen. Das erste, was wir tun müssen, ist, ein neues Objekt mit dem neuen Operator zu initialisieren und zu erstellen, und dann werden wir offen darauf aufrufen. Wir werden uns jedes dieser Dinge in nur einer Sekunde im Detail ansehen. Also, mach dir keine Sorgen um diese Liste, die ich gerade durchstürze, aber das erste, was wir tun müssen, ist offen anzurufen nämlich zu sagen, wie wollen wir unsere Anfrage stellen und wo werden wir unsere Anfrage stellen? Dann möchten wir eine Funktion zu etwas namens onload zuweisen, und das ist, was wir aufgerufen werden, wenn die Anfrage erfolgreich abgeschlossen wird. Wir möchten auch eine Funktion zu einer Eigenschaft namens onerror zuweisen, die aufgerufen wird, wenn es einen Fehler beim Erstellen der AJAX-Anfrage gibt. Schließlich können wir senden anrufen, die tatsächlich die Anfrage senden wird. Schauen wir uns das im Code an, denn das ist ziemlich abstrakt, die Liste dort, und es wird viel besser sein, es tatsächlich funktioniert zu sehen. Ok. Also, hier bin ich in einem Beispieldokument. Es ist eine HTML-Datei mit etwas JavaScript darin zwischen Skript-Tags. Ich habe es so gemacht, nur um sicherzustellen, dass alles an einem Ort ist und leicht zu sehen ist. Ich habe dies in den Ressourcenbereich aufgenommen, so dass Sie gehen und einen Blick darauf werfen und mit ihm selbst spielen können, wenn Sie wollen. Aber ich gehe hier unten zum Ende des Dokuments und hier ist unser eigentlicher HTML, genau hier unten. Ich sehe nicht, wo ich es auswählen werde. Da gehen wir. Dies ist einer unserer tatsächlichen HTML-Körper und die Bits , die wir wirklich interessiert sind, sind hier. Wir haben eine Schaltfläche, wenn geklickt wird eine JavaScript-Funktion namens Bild laden ausführen. Dann haben wir ein kleines Bild mit einer ID von GIF und Quellen auf nichts gesetzt. Also, lassen Sie uns diese Load Image Funktion überprüfen. Hier ist es. Wir können es auf den Bildschirm passen, das ist großartig. Also definieren wir eine Funktion namens Load Image, und hier instanziieren wir eine brandneue XMLHttpRequest. Lassen Sie uns das vorerst überspringen, ich werde bald darauf zurückkommen. Dann rufen wir unsere brandneue AJAX-Anfrage auf und wir sagen gut, wir wollen eine GET-Methode gegen eine URL ausführen. Hier ist die Definition unserer URL. Ich habe es in Bits aufgeteilt, nur um jeden Teil der URL zu skizzieren. Ich würde es normalerweise nicht so tun, also stellen wir hier eine Anfrage gegen diesen Endpunkt, der Teil der Giphy-API ist, um ein zufälliges GIF zurückzugeben. Generell ein Fragezeichen anhängen, um zu sagen, dass es einige Parameter für diese URL geben wird. Wir setzen unsere Bewertung auf G. Giphy ist meist von Benutzern beigetragene Inhalte, einige der Nutzer gerne sehr anspruchsvolle Inhalte einreichen , so dass ich mich an den G bewerteten Inhalten halte. Dann haben wir unser Trennzeichen für Parameter in unserer URL und dann haben wir endlich einen API-Schlüssel. API-Schlüssel sind eine Möglichkeit, einem Dienst wie Giphy mitzuteilen, wer die Anfrage stellt. Normalerweise würden wir gehen und Giphy nach einem eigenen API-Schlüssel fragen , und wir würden das in all unseren Anfragen verwenden. Das ist ein sehr altes, das Giphy für jeden benutzt hat. Jetzt haben sie einzelne und wir werden übergehen eine zu bekommen, wenn wir anfangen, unsere Beispielanwendung zu erstellen. Wie auch immer, nachdem wir alles gesagt haben, das ist unsere Giphy-Zufalls-URL und wir verwenden es hier. Also, wir sagen, bitte öffnen Sie diese URL mit der GET-Methode. Dieses Flag hier true bedeutet, es asynchron zu machen. Wir könnten dies zu false nehmen und es synchron machen aber der ganze Sinn von AJAX ist, dass es asynchron ist. Also, wir machen das, machen es asynchron. Dann weisen wir eine Funktion zu onload, und das ist, was wir tun wollen, wenn die Anfrage abgeschlossen ist. Also, das erste, was wir tun, ist einen Verweis auf unser Bild zu bekommen, denken Sie daran, dass es ein Bild in unserem HTML mit einer ID von GIF gab. Oh ja, ich bin im Lager von Leuten, die GIF nein JIF sagen. Also, es tut mir leid, wenn das dich wirklich stört. Dann möchten wir die tatsächliche Antwort erhalten, die vom Server für unsere Anfrage zurückkam und das ist in einer Eigenschaft namens Antworttext. Dann, was wir tun, ist, dass wir das in ein JavaScript-Objekt mit JSON-Parse verwandeln. Also, wie ich schon sagte, wir werden JSON einen kleinen Blick darauf werfen und wie es sehr kurz in einem der kommenden Lektionen funktioniert . Aber der Punkt ist, dass wir die Antwort in ein JavaScript-Objekt verwandeln können und das den Antwortdaten zuweisen. Dann erhalten wir etwas namens, Bild ursprüngliche URL, aus dem Datenteil der Antwortdaten und weisen es dem Quellattribut unseres Bildes zu. Meine Güte! Dies, um hier unten zu kommen, denken Sie daran, hier ist unser Bild, es hat eine ID von GIF und hier ist sein Quellattribut, derzeit auf nichts gesetzt, aber wir werden diesen Wert ihm zuweisen. Ich werde auch einen Blick auf die Giphy-API-Dokumentation werfen, so dass Sie wissen können, wo Sie diese Informationen darüber finden, was in diesen Antworten ist, weil ich weiß, dass das genau wie eine zufällige und geheimnisvolle Liste von Attributen scheint. Wir werden auch auf Fehler Attribut zuweisen. Also sagen wir: „Oh, das wird eine Funktion sein“, wenn etwas schief geht, sagen wir einfach „Zeig eine Warnung“ und sagen: „Oh, das war ein Fehler“. Dann schicken wir es endlich. Also, hier wird die Anfrage tatsächlich gesendet und wir hoffen, dass, sobald sie empfangen wurde und die Antworten erfolgreich gesendet wurden, unsere Onload-Funktion ausgeführt wird, unsere Onload-Funktion ausgeführt wird, und dann wird unserem Bild ein Quellattribut zugewiesen, und wir werden in der Lage sein, das in unserem Browser zu sehen. Also, jetzt, wo wir all das gesehen haben, werfen wir einen Blick auf es im Browser. Ok. Also, hier ist unsere kleine Test-AJAX-Seite, Giphy AJAX Anfrage. Hier ist die Schaltfläche „Bild laden“. Also, wenn ich darauf geklickt habe. Da ja. Es ist ziemlich genau das, was Sie erwarten würden, wenn Sie nach einem zufälligen Bild von Giphy fragen, und wir können weiterhin diesen Knopf drücken, um zufällige Bilder zurück zu bekommen. Ja, und damit ich die den ganzen Tag weiter beladen kann. Hallo, Professor. So können Sie sehen, dass die Giphy-API uns Verweise auf Bilder sendet, die wir in unseren Browser laden können. Also, nur um zusammenzufassen, wenn wir eine XHR-Anfrage stellen, beginnen wir mit der Ausführung open auf unserer neuen Anfrage, weisen wir onload und onerror zu, was der Anfrage mitteilt, was zu tun ist, wenn sie erfolgreich ist oder fehlschlägt. Dann senden wir endlich die Anfrage. Wir haben gesehen, dass in unserem Code implementiert, wir können sehen, dass wir zuerst eine neue Anfrage stellen, dann öffnen wir sie. Wir weisen eine Funktion onload zu, das ist, was wir tun, wenn die Anfrage erfolgreich aufgelöst wird. Wir weisen eine Funktion zu onerror zu, was zu tun ist, wenn Dinge schief gehen. Dann schicken wir es endlich. Also, das ist ein sehr kurzes und schnelles Beispiel dafür, wie wir eine AJAX-Anfrage stellen können. 4. Öffentliche APIs – was du wissen musst: Ok. Willkommen zurück zu unserem Intro bei Ajax alle. In dieser Lektion werden wir nur einen schnellen Durchlauf der Definition von Begriffen machen und sicherstellen, dass wir mit einigen grundlegenden Konzepten, die wir für den Rest dieser Klasse benötigen, auf dem Laufenden sind. Also, wie man eine API verwendet und das erste, worüber wir sprechen müssen, ist gut, was ist eine API? Und dann bekommen wir eine kleine JSON-Aktualisierung zu tun, weil JSON das Datenformat ist , das normalerweise verwendet wird, um Daten zwischen Clients und einer Web-API zu übertragen , und dann gehen wir los und bekommen API-Schlüssel für unseren Nachrichtendienst und dann werden wir Schauen Sie sich die Dokumente für diesen Dienst an, damit wir eine kleine Vorstellung davon haben, wie man ihn benutzt. Aber vor allem, was ist eine API? Nun, es steht für Application Programming Interface und wirklich ist es nur ein Ort, an den wir Anfragen für Daten senden können. Also kann ich sagen: „Bitte schick mir alle Fotos, die wie Hunde aussehen“ oder ich könnte sagen: „Hey, bitte speichern und speichern Sie dieses neue Foto von diesem Hund.“ Wir können auch Antworten erhalten, wie es uns eine große Menge von Fotos von Hunden zurücksendet , wenn wir eine Art Foto-API oder eine Bild-API wie Giphy verwenden oder wenn wir eine Anfrage senden, etwas zu speichern, könnte es zurückkommen und sagen: „Hey, ich hat es gerettet. Alles war gut“ oder es könnte sagen: „Hey, es gab einen Fehler beim Speichern Ihres Hundefotos“, und dann können wir herausfinden, was wir danach tun müssen. Und eine API ist ein wirklich super allgemeiner Begriff. Jede Art von Drittanbieter-Bibliothek, die wir verwenden, hat eine API. Die Webschnittstellen, die wir während dieser Klasse betrachten werden, wie sehr Low-Level-Socket-Schnittstellen. All diese Dinge haben eine definierte Art, mit ihnen zu interagieren , und jetzt werden wir eine kleine schnelle Auffrischung für JSON haben. Es ist unglaublich weit verbreitet, aber ich weiß, dass nicht jeder es tatsächlich benutzt hat oder damit vertraut ist , also werde ich es jetzt kurz ansehen, einschließlich des Spielens mit etwas Code. Es steht für JavaScript-Objektnotation und was das wirklich bedeutet, ist, dass es eine Möglichkeit Zeichenfolge in einer bestimmten Weise formatiert zu nehmen und sie in ein JavaScript-Objekt zu verwandeln und dann können wir dasselbe tun. Wir können ein JavaScript-Objekt nehmen und es in eine Zeichenfolge verwandeln, und diese Strings sind super praktisch für das Senden zwischen einer API und einem Client wie Ihrem Browser, weil es bedeutet, dass wir diesen Stream rückwärts und vorwärts haben , dass wir konvertieren in ein Java Script-Objekt. Es ist sehr einfach, Daten auf diese Weise zu formatieren weil es sehr wenig Aufwand macht, aber es ist auch sehr einfach für uns zu verwenden. Es ist ein Format, das wir selbst bearbeiten können, so dass wir leicht lesen können und es ist eine sehr intuitive Form von Daten zu verwenden. Und so werfen wir einen Blick auf das bereits in irgendeinem Code jetzt. Okay, hier ist eine kleine Datei, die in den Projektressourcen für diese Klasse enthalten ist. Es heißt jsondemo.html und alles, was ich hier habe, ist ein kleines bisschen HTML unten mit einem Knopf, der etwas tut, JSON-Demo, wenn es angeklickt wird und hier ist unsere JSON-Demo-Funktion und wir können das im Browser betrachten. Wir klicken auf die Schaltfläche und einige Sachen werden auf die Konsole gedruckt. Und jetzt, was wir hier betrachten, ist, dass ich ein mehrzeiliges ES6-String-Set verwende. Das bedeutet nur, dass wir dies als Rücktext verwenden können, um eine Zeichenfolge zu definieren, die sich über mehrere Zeilen erstreckt, und so sieht JSON aus. Wir werden das Ganze einpacken und einige geschweifte Klammern und dann werden wir einen Schlüsselwert oder einen Schlüsselnamen haben , gefolgt von einem Wert und Schlüssel erscheinen immer als „String“ in Anführungszeichen wie diesem und dann der Wert, gut Wenn es sich um eine Zahl handelt, wird es nicht in Anführungszeichen gesetzt, wenn es sich um eine Zeichenfolge handelt, wird es in Anführungszeichen gesetzt, der Wert könnte ein Array sein oder eine andere Art von Objekt sein. Der Punkt ist, dass wir diese Zeichenfolge nehmen können, sie dem JavaScript-eingebauten Objekt JSON geben und ihn bitten, unsere SomeJSON-Zeichenfolge zu übergeben und sie in ein Objekt zu verwandeln, und dann können wir auf die Eigenschaften dieses Objekts einzeln wie ein normales JavaScript-Objekt. Jetzt können wir alle diese einzeln in die Konsole einloggen. Also lassen Sie uns zu unserem Browser gehen, JSON Demo, klicken Sie auf „Bitte überprüfen Sie die Konsole“ und ich klicke darauf und siehe, hier haben wir alle unsere kleinen Werte kommen auf der Konsole. großartig. Also, natürlich, wenn wir gehen und versuchen, werde ich das einfach auskommentieren, natürlich nur um zu zeigen, dass hier keine eigentümliche Zeichenfolgeninterpretation Magie passiert, wenn wir zu unserer SomeJSON-Zeichenfolge zurückkehren und versuchen auf eine -Eigenschaft von diesem und drücken Sie auf Refresh und klicken Sie dann auf die Konsolenschaltfläche und wenn überhaupt, werden wir undefiniert, indem wir sagen, dass dieses Ding keine String-Eigenschaft hat, weil es nur eine Zeichenfolge ist und dieser Wert nicht definiert ist. Nun geht es natürlich auch in die andere Richtung, sagen wir, dass wir dieses neue Objekt haben. Wir werden neue JsObj, Objekt aufrufen, und in der normalen JavaScript-Weise geben wir ihm einen Namen und dann einen Wert und machen das weiter. Wir können natürlich eine Reihe von Dingen definieren und dann können wir gehen und protokollieren, dass auf der Konsole als Objekt und natürlich wird der Browser das schön für uns drucken, sehr hilfreich und dann können wir gehen und unser Objekt drehen JsObj in eine Zeichenfolge mit JSON stringify, neue JsObj und so, wenn wir das im Browser auschecken oder erneut laden. Und hier können wir sehen, dass unser Objekt zuerst ausgedruckt wurde , weil ich einfach das Konsolenprotokoll mochte und es vom Browser schön ausgebrochen wurde, aber auch haben wir uns in eine Zeichenfolge mit JSON stringify verwandelt und Sie sehen können, wir haben gerade diese sehr große Zeichenfolge hier und das ist die Sache, die wir über eine API oder in einer API-Antwort oder einer Anfrage senden würden, weil es einfacher ist, eine Reihe von Zeichen über den Draht zu senden , aber es ist mehr Arbeit, ein tatsächliches Objekt der Leitung zu senden in seinem Weg. Und deshalb verwenden wir JSON. Es ist sehr praktisch, es ist sehr lesbar und intuitiv für uns zu verwenden und es ist jetzt der Standardstandard für die Kommunikation mit einer API des Web. Also, wir haben gesehen, was JSON ist, wir haben gesehen, wie es funktioniert. Als nächstes müssen wir einen API-Schlüssel für die API erhalten, die wir verwenden werden. nun daran, dass ein API-Schlüssel für Sie einzigartig ist. Es ist eine Sache, die Sie bei Ihrer Suche nach einer API verwenden müssen. Angenommen, dies ist eine öffentliche API und es ist keine, die Sie sich irgendwo auf einem Server implementiert haben, aber Sie erhalten Ihren API-Schlüssel, es identifiziert Sie, so dass die API weiß, ob Sie 100 Milliarden machen Antworten oder Anfragen eine Sekunde, dann sind Sie wahrscheinlich Art von Ärger und sie werden Sie abschneiden, aber es ist eine Möglichkeit, Sie zu identifizieren, wenn Sie Ihre Anfragen stellen. Und wir werden newsapi.org verwenden, um unsere Schlagzeilen zu erhalten, ich hatte ursprünglich gehofft, die Google News API zu verwenden, aber ich sehe , dass es sich in einem Semi-Shutdown-Zustand befindet. Ich weiß nicht, wie lange es da sein wird, denn es ist schon lange halbabgeschaltet , aber ich denke, es könnte jeden Moment verschwinden. Wie auch immer, wir verwenden diese api.org und um sie zu verwenden, müssen wir einen API-Schlüssel bekommen, also gehen Sie zu newsapi.org. Wir können sehen, dass wir mit dieser Seite präsentiert werden und das erste, was wir sehen, ist API-Schlüssel. Also, geh weiter und fülle das aus. Ich bin Luke und meine E-Mail-Adresse ist schrecklich erledigt, fabish@. Das ist wie ein Unsinn Email-Adresse Jungs. Und ich muss vielleicht ein anderes Passwort verwenden. Bin ein Individuum, ich bin kein Roboter. Ich stimme den Bedingungen zu und ja, wir werden irgendwann einen Attributionslink auf unserer Seite verwenden. Einreichen, und nein danke, ich werde das nicht speichern. Und so endlich haben wir unseren API-Schlüssel. Dies ist der Wert, den wir in unseren Anfragen an die newsapi.org Schnittstelle verwenden müssen. Also, jetzt, da wir unseren Schlüssel haben, schauen wir uns besser die API-Dokumentation an. Angenommen, es ist nicht Ihre API, wenn es eine API ist, die Sie selbst geschrieben haben, dann wissen Sie wahrscheinlich, wie es funktioniert. Und das geht auch davon aus, dass die Dokumentation existiert und kohärent ist und auf dem neuesten Stand ist. Es ist ein öffentlicher Dienst. Manchmal sind sie sehr gut dokumentiert und manchmal sind sie kaum dokumentiert. Also, lassen Sie uns gehen und überprüfen Sie die Dokumentation für die Nachrichten-API. Und wirklich, was wir tun müssen, ist einfach die Seite neu zu laden und die Dokumentation ist ziemlich anständig wirklich mit diesen Jungs. Das ist einfach. Wir werden die Top-Schlagzeilen Anfragen verwenden und sie bieten eine schöne Beispiel-Anfragen mit unserem API-Schlüssel bereits. Sie sagen: „Hey, so stellen Sie eine Anfrage an unsere API“ und das ist, was Sie zurückbekommen und Ihnen dann diese schöne zusammenklappbare Struktur geben, damit Sie die oberste Ebene sehen können, wir haben wie drei Dinge, Status und die Anzahl der Ergebnisse und dann geben sie uns die Artikel und innerhalb der Artikel gut, es ist dieses Ding eine Quelle und der Autor und einen Titel und eine Beschreibung und so weiter. Also, das ist wirklich ziemlich nett. Und dann dokumentieren sie, was die Parameter sind, wann sie auf eingestellt werden können und schließlich ihr Dokument, ihre Antwort und was in der Antwort ist. Also, das ist ziemlich unkompliziert und ziemlich einfach für uns zu verwenden. Jetzt in der nächsten Lektion werden wir einen Blick auf die drei Arten von Hauptzuständen wir in einer Ajax-Anfrage erfüllen müssen, und wir werden diese API verwenden. Also freue ich mich darauf, Sie in der nächsten Lektion zu sehen und erinnere mich, wenn Sie Fragen haben oder etwas Klärung wünschen , bitte lassen Sie es mich im Diskussionsbereich wissen und ich werde mich direkt bei Ihnen melden. 5. Drei grundlegende AJAX-Zustände (wir beginnen mit Warten!): Okay, alle willkommen zurück. In dieser Lektion werden wir uns die drei grundlegenden Ajax-Zustände ansehen , die wir berücksichtigen müssen, wenn wir einen Ajax-Client programmieren oder mit Anfragen und Antworten mit Ajax umgehen. Jetzt Ajax ist wie ein Netzwerkprotokoll, gibt es wie eine Bazillion verschiedene Zustände, in denen die tatsächlichen Low-Level-Netzwerkverbindungen sein können, aber es gibt drei, die wir wirklich brauchen, um uns selbst und diesen Client-Code zu kümmern die wartet. Sie haben also eine Anfrage gesendet und die Benutzer warten darauf, dass die Anfrage beendet oder etwas tut. Wir müssen ihnen etwas zeigen, ihnen sagen, dass die Dinge tatsächlich geschehen und dann endlich Erfolg haben. Nun unsere Anfrage erfolgreich abgeschlossen, also sollten wir etwas mit der Antwort tun. Falls die Dinge nicht funktionieren, sollten wir auch den Fehler behandeln. Also, Zeit zu warten. Also, was ist das für ein Geschäft mit Warten? Nun, wir müssen dem Benutzer sagen, dass seine Aktion eine Wirkung hat irgendeiner Art gehabt. Denn wenn sie auf eine Schaltfläche klicken und nichts passiert, dann werden sie einfach gerne weiter auf diesen Button klicken wie verrückt wahrscheinlich. Wir müssen ihnen wirklich sagen, dass, ja, Ihre Aktion wurde bemerkt und wenn etwas dagegen tun, auch wenn Sie noch nicht die Ergebnisse haben, und wie ich schon sagte, Feedback hilft Benutzern. Es hilft ihnen zu wissen, dass etwas passiert, weil asynchrone Anfragen manchmal sehr langsam sein können. Nun, nicht super langsam wie Minuten, aber sie können langsam genug sein, damit ein Benutzer anfängt, sich den Kopf zu kratzen und zu sagen: „Nun, was ist los? Ich verstehe es nicht. Ich habe auf die Schaltfläche geklickt, nichts passiert.“ Was wir jetzt wirklich tun müssen, ist mit der Implementierung einer Anfrage an unsere Nachrichten-API. Also haben wir unseren API-Schlüssel, wir haben die Dokumente ausgecheckt. Also werde ich eine Anfrage implementieren und dem Benutzer ein wenig Gewicht Spinner zeigen. Wir werden noch nichts mit den Ergebnissen machen, das ist für die folgende Lektion, aber wir werden sehen, wie wir das jetzt tun können. Ich ermutige Sie dringend, mit mir zu codieren, denn in unseren Projektressourcen haben wir giphy-news.html, das Skelett HTML ist, das einen Link zu einem vordefinierten CSS enthält, das eine Seite ein wenig anlegt und wenden Sie etwas ziemlich minimales Styling an, nur um uns zu helfen, loszulegen. Auch und es scheint, dass es dort auch etwas namens news-api.js gibt, das nur eine leere JavaScript-Datei ist. Das ist es, was wir ausfüllen werden. Also, Sie haben alles, was Sie brauchen, um auch zu codieren. Ich denke, das ist eine gute Möglichkeit, zu lernen und Sie stark zu ermutigen, Pause zu drücken, wenn ich etwas getan habe und es auch implementiert habe. Also, nur um Ihnen einen kurzen Überblick über das, was HTML neben einigen JavaScript und CSS haben wir den Körper, wir haben H1 gehen auch uns, Sie wissen, was wir betrachten. Wir haben ein leeres div, mit einer ID ajax-wait und einer Klasse warten. Die Animation und der Spinner und alles ist komplett in CSS gemacht. Schauen Sie sich diese Datei an, wenn Sie daran interessiert sind, zu sehen, wie das funktioniert. Es ist im Grunde ein div mit einem gestrichelten Rahmen. Es dreht sich um und es hat eine vordefinierte Größe und Position. So, das macht es einfach, anzuzeigen und zu verstecken. Wenn wir dann in unseren Hauptbereich unserer Seite kommen, haben wir drei divs; Fehler, Schlagzeilen, Gifs. Wir füllen diese nach Bedarf aus. Sie können sehen, dass unser HTML hier Leerzeichen für unsere drei Arten von Zuständen zur Verfügung gestellt hat. Wir haben unser wartendes Div, das wir anzeigen werden , wenn etwas passiert, aber noch nicht fertig ist. Wir haben einen Fehler div, wenn Dinge schief gehen und diese beiden sind zum Ausfüllen, wenn die Dinge richtig gehen. Also, lasst uns anfangen, unser JavaScript zu implementieren. Also das erste, was ich denke, wir wollen, ist eine Funktion und wir nennen es zeigen Schlagzeilen. zu einem guten Start. Wir möchten sicherstellen, dass diese Funktion aufgerufen wird , wenn die Seite geladen oder abgeschlossen geladen wurde. Also, wir werden sagen, direkt aus dem Fledermaus-Window.AddEventListener , Korrigieren. Hier ist, wo wir unsere API-Anfrage stellen wollen. Also, ich werde das einfach ganz schnell hinzufügen, um Ihnen den Schmerz zu vermeiden mich viele Stunden damit zu verbringen, meine Tippfehler zu tun. Also, was wir wollen, als Erstes ist gut, wohin sollen wir unsere Anfrage senden? Wir wissen, dass wir aus dem Blick auf unsere Dokumentation und hier wieder auf der Nachrichten-API-Dokumentationsseite sind. Wir wissen, dass wir diesen Top-Schlagzeilen Endpunkt genau hier verwenden können. Das ist großartig. Wir werden das da drin haben. Dann müssen wir ein kleines Fragezeichen haben, um zu sagen, dass es einige Parameter auf unserer URL gibt und dass unsere - na ja, wir werden in den USA suchen. Unser nächster Parameter setzt die Kategorie auf Unterhaltung. Ich benutze Unterhaltung, weil der allgemeine Gebrauch manchmal etwas düster ist. Ich dachte, ich würde es groß halten und dann werden wir endlich den API-Schlüssel aufstellen. Dies ist mein API-Schlüssel, bitte verwenden Sie nicht meinen API-Schlüssel. Wir wollen weder die Nachrichten noch die Leute damit verwechseln. Also, da ist es. Wir haben unsere URL. Nun, was müssen wir danach tun? Wie wir in unserer vorherigen Lektion gesehen haben, müssen wir, als wir die Giphy-API demonstrierten, eine Anfrage erstellen und dann müssen wir sie öffnen. Sagen Sie, bitte offen. Wir werden GET den ganzen Weg hier durch benutzen. Wir werden keine Daten auf diesen APIs speichern, daher werden wir GET verwenden, damit wir Daten von dort erhalten können. Dann wollen wir endlich, dass dies eine asynchrone Anfrage ist, also sagen wir True. Also, die Dinge, die wir setzen müssen, sind natürlich Onload, die im Moment überhaupt nichts tun wird. In ähnlicher Weise müssen wir eine Art Fehler-Handler haben, was wir tun, wenn Dinge schief gehen. Wir setzen das auch auf eine leere Funktion für den Moment. Aber was wir tun wollen, ist natürlich unsere Anfrage zu senden und dann an dieser Stelle wollen wir unserem Benutzer zeigen, dass etwas tatsächlich passiert und unsere Wartefunktion implementieren. Um dies zu tun, können wir unsere ID oder unser div anstelle von Ajax Wait setzen , um einfach zu fliegen. Momentan ist es versteckt. Es hat eine Anzeige von keiner. Wir können die Anzeige auf Block setzen. Also, wir werden sehr schnell sagen und document.getElementById ('ajax-wait') 'block' sagen. Nun, wir wollen nicht wirklich diese Art von Sache in der Mitte unserer Show tun - Headlinescode, aber das ist etwas, das sehr bald in einer anderen Funktion verstecken wird. Aber wir wollen nur sicherstellen, dass wir etwas tun können. Also, lasst uns unseren Browser raus und geben dem einen Wirbel, und dort dreht es sich glücklich weg. Wie Sie sehen können, ist es immer noch da Spinnen. Unsere Anfrage wurde offensichtlich gestellt und gesendet und wir zeigen unser Spinning GIF an. Nun, aber ist die Anfrage abgeschlossen? Gibt es einen Fehler? Wir wissen es nicht. Wir tun besser etwas, um dieses Ding zu verstecken, sobald wir unsere Anfrage beendet haben. Also, hier gehen wir in unsere Funktion und natürlich wollen wir das jetzt auf keine setzen. Sehr gut. Also, lassen Sie uns zurück zu unserem Browser neu laden. Wie Sie sehen können, wie ich neu lade, zeigen wir ein kleines drehendes div und dann geht es wieder weg, weil wir unsere Anfrage abgeschlossen haben. Haben wir erfolgreich oder erfolglos abgeschlossen? Wer weiß, das ist Log-Erfolg. Schau dir das an und hier werde ich sagen, Fehler neu laden. Schauen Sie sich unsere Konsole, Erfolg oder sehr gut und Erfolg. So können wir sehen, dass wir unsere URL mit einigen Parametern einrichten ein neues XMLHttpRequest-Objekt erstellen. Wir öffnen es und sagen, wir wollen eine GET HttpRequest durchführen, mit unserer URL, die definiert. Wir möchten, dass es asynchron ist, wenn unsere Anfrage erfolgreich abgeschlossen ist, sollten wir die onload-Funktion ausführen. Was bisher so definiert ist. Wenn ein Fehler vorliegt, möchten wir dies tun. Schließlich senden wir es, so dass einer von ihnen ausgeführt wird. Schließlich wollen wir [unhörbar] anzeigen, um dem Benutzer ein Feedback zu geben, dass seine Aktion tatsächlich eine Wirkung von irgendeiner Art gehabt hat. Nun, das nächste kleine Ding, das ich tun werde, ist einfach unser Dokument GetElementById bla bla bla bla cols dort zu verstecken . Boom, da ist er. Also verwenden wir im Grunde eine Funktion, die eine ID und einen Anzeigewert annimmt, das Element aus dem Dokument abruft, um zu sehen, ob das Element existiert und die Anzeige auf das setzt, was übergeben wurde. Dann haben wir eine Show und hide Funktion, einer von ihnen übergibt im Block zu setEleDisplay die andere als Pässe in keiner. Schließlich können wir runtergehen und HideEle ('ajax-wait') sagen und dann dasselbe tun. Hoppla, und dann können wir sagen, Show. Wir werden das in unserem Browser erneut testen, neu laden, dass man eine Weile gedauert hat. Dort können Sie sehen, dass wir unser kleines weißes Div angezeigt haben, unser weißes Feedback und dann haben wir erfolgreich abgeschlossen und unser Wartediv von der Seite entfernt. Nun, das ist alles gut und gut, aber Sie können sehen, dass wir noch keine Schlagzeilen auf unserer Seite zeigen , was wir wirklich tun wollen. In unserer nächsten Lektion werden wir den Erfolgsfall durchlaufen, in dem wir die Antwort von der API lesen und die einzelnen Schlagzeilen auf unsere Webseite schreiben. Wie immer, wenn Sie irgendwelche Probleme haben, funktioniert die Dinge nicht für Sie, lassen Sie es mich sofort im Diskussionsbereich wissen und ich helfe Ihnen so schnell wie möglich. 6. Lesen von Schlagzeilen aus unserer Nachrichten-API: Okay, dann. Also, in dieser Lektion werden wir überprüfen, wie wir endlich die Ergebnisse unserer Anfrage nach Schlagzeilen von unserer News-API lesen können. Wir haben gesehen, wie wir auf sie warten werden, und wir wissen, dass unsere Anfrage erfolgreich abgeschlossen ist, aber wir haben noch nichts mit der Antwort getan. Heute werden wir sehen, wie wir die Ergebnisse lesen können. Wir werden sehen, wie wir sie analysieren, bereits gesehen, wie man das in JSON macht, aber wir werden das trotzdem durcharbeiten. Schließlich werden wir unsere Schlagzeilen anzeigen. Also, hier sind wir in unserem JavaScript-Code und wenn wir gehen und unsere eigene Ladefunktion betrachten. Sie können sehen, wie Sie sich erinnern, wir verstecken einfach unseren kleinen Spinner und protokollieren dann Erfolg auf der Konsole. Nicht super spannend, aber was wir stattdessen tun können, wahrscheinlich die nächste nicht so aufregende Sache, aber nützlicher, ist, anstatt Erfolg zu protokollieren, können wir Request ResponseText protokollieren. Also, jetzt ist ResponseText alles, was die API an uns zurückgeschickt hat, und denken Sie daran, dass dies ein großer Stream im JSON-Format ist, also ist es kein JavaScript-Objekt, mit dem wir noch etwas Nützliches tun können, aber wir können es ins Protokoll werfen und sehen, was darin drin. Also, ich werde das retten. Gehen Sie zurück zum Browser, laden Sie es neu. Es dauert eine Weile. Es ist jetzt geladen und Sie können sehen, dass wir tatsächlich etwas von unserer API zurück haben. Sagt, „Status OK, Gesamtergebnisse 20“, und dann geht es in Artikel. Sie können sehen, dass Sie am Anfang ein Quadrat haben, eine Klammer, was bedeutet, dass es ein Array ist, und dann geht es einfach weg vom Rand der Konsolenlinie, weil es ziemlich groß ist. Also, an diesem Punkt denke ich : „Mann, ich will sehen, was in dieser Antwort steckt.“ Also, gehen wir zurück zu unserer News-API-Dokumentation und während wir hier zur Antwortdokumentation gehen und sehen können, oh ja. Wir bekommen einen Status, Ergebnisse, Artikel. Das alles entspricht unserer Erwartung von dem, was wir in unserer Konsole gesehen haben und dann innerhalb des Arrays des Artikels haben wir Quelle, Autor, Titel. Dies ist die Überschrift oder der Titel des Audiosignals. Das ist die Sache, mit der wir spielen wollen, oder? Also, gehen wir zurück auf die erste Webseite, und jetzt unser Code und stattdessen, was wir tun werden, ist, dass wir NewsData sagen . Benutzerzeichen JSON.parse. - Ja. Also, wir können das tun und nur damit wir wissen, dass etwas Vernünftiges passiert, lassen Sie uns unsere Reihe von Artikeln ausdrucken. Also nehmen wir unser Konsolenprotokoll von hier aus und holen sich unsere NewsData-Artikel. Auch hier ist dies nicht wie eine super hilfreiche Sache, aber es wird uns bestätigen , dass wir ein JavaScript-Objekt haben und wir die Artikel sehen können. Also, neu laden, und guten alten Firefox, Ich meine, Firefox hier hat uns ein Array gegeben, das wir hier sehen können. Nun, und wir können sehen, dass das Erste etwas über Rihanna ist und etwas anderes über die Avengers und Kylie Jenner. So aufregend. Also, jetzt können wir eine einfache alte Vollschleife haben und sagen: „Für var ArticleIDX ist Null.“ Nehmen wir an, ArticleIDX ist weniger als- Länge ArtikelIdX, wir werden ein Plus machen. Ich bin kein super massiver Fan dieser Art von Operatoren, aber halte das Leben einfach. Darauf kann ich jetzt gehen. Ok. Also, ich habe eine kleine Vollschleife und schließlich bin ich mit dieser Formatierung nicht zufrieden. Wie gesagt, lassen Sie uns jetzt genau einen Artikel ausdrucken, oder? Also sagen wir Nachrichtenartikel. Wir drucken den Titel jedes Artikels aus. Wir wissen, dass da ein Titel drin ist. Also, lasst uns das versuchen. Wir gehen zurück zu unserem Browser und was wir jetzt protokollieren, ist eine Reihe von Artikeln oder Artikelüberschriften auf unserer Konsole, was großartig ist. Also kommen wir immer näher und näher an das, was wir eigentlich wollen. Nun, das nächste, was zu tun ist, ist, all dies auf die Webseite anstelle der Konsole zu setzen, und um das zu tun, werde ich diesen seltsamen Trick machen. Wir werden nennen, dass die Ausgabe ein Array ist. Also, was wir tun werden, ist, dass wir eine Reihe von HTML aufbauen, die wir in unsere Artikel oder unsere Schlagzeilen, div. Also, denken Sie daran, dass wir dieses div mit einer ID von Schlagzeilen haben und wir werden ein paar Sachen hineinstecken. Der nächste einfachste Schritt, den wir tun können, ist zu sagen, „output.Push the title“, und dann endlich können wir sagen, „Get by id“, und das war Schlagzeilen, innere HTML, Benutzersign-output.join, so. Also, was machen wir? Wir bekommen unsere Schlagzeilen div. Wir sagen, dass wir das HTML wollen, im Grunde alles innerhalb des div gleich unserem Ausgabe-Array ist, das mit einer Reihe neuer Zeilen verbunden ist. Also können wir uns das ansehen und dann bekommen wir ein paar Schlagzeilen in einer großen ungebrochenen Masse in der Mitte unserer Seite. Wieder, so weit so gut. Aber wir laufen es, es ist ein wenig schöner und jedes Mal, wenn wir die Überschrift machen , lassen Sie es uns in ein eigenes div geben. Das wird sie auf einer neuen Linie erscheinen lassen und gibt uns die Möglichkeit, auch etwas Styling auf sie anzuwenden, denn schauen Sie sich einige vordefinierte Styles an, die für unsere Artikel bereit sind. Also, wir werden ein div öffnen. Wir werden unseren Artikel, Titel oder Überschrift darin einfügen und dann schließen wir dieses div, und wieder können wir den Vorteil davon nutzen, indem wir unsere Ausgabe in eine große lange Zeichenfolge verbinden und sie HTML auf dem Element unserer Überschriften zuweisen. Also, gehen wir zurück zu dem und wir werden neu laden, und Sie können sehen, ich habe eine kleine Zeile über und unter jeder der Artikelüberschriften. Nur um sie ein wenig zu trennen, und Sie können sie einzeln in jeder Zeile erscheinen. Also kommen wir immer näher und näher an, wie wir wollen, dass sie tatsächlich erscheinen. Aber denken Sie daran, wir wollen, dass sie Cliquey sind. Sie müssen auf sie klicken. Also, das nächste, was wir tun können, ist, sie hineinzulegen und ein Etikett. Also, wir werden sagen, „a href gleich. Also, wir können sie in ein Etikett wie das einfügen. Nun, wenn wir zurück zu unserem Browser gehen, laden wir neu und sie alle klicken, was großartig ist, aber wenn wir auf sie klicken, tun sie nichts wirklich. Aber jetzt wird dies ein wenig beschäftigt in dieser Onload-Funktion hier, und ich möchte wirklich all dies in eine eigene Funktion setzen , nur um es ein wenig zu trennen. Also, ich werde hier nach oben gehen und ich sage, ich versuche, MakeHeadline zu machen. Sie können sehen, wie ich vielleicht schon mal daran gedacht habe. Und wir werden hier haben, wir werden unseren Titel haben, das ist alles, was wir wirklich wissen müssen. Und ja, also stell das alles da rein. Und das wird einfach zum Titel. Und dann wollen wir unseren Ausgang zurückgeben. So können wir die Ausgabe übergeben und sie mit ein paar weiteren Dingen wieder zurückgeben. Also, jetzt müssen wir unsere MakeHeadLine-Funktion verwenden. Langweilig habe ich diesen sehr nützlichen Text gelöscht. Jedenfalls. Da ist es wieder zurück. Lassen Sie uns testen, ob das funktioniert. Reload und natürlich muss ich auch unsere Ausgabe einschließen und sagen, dass die Ausgabe dort zugewiesen ist. Okay, endlich können wir das tun, und okay. Also, das ist, was wir hier brauchen, und stellen Sie sicher, dass alles wie erwartet funktioniert. Und das tut es, so alles gut und gut. Wir brauchen jedoch unsere MakeHeadLine, wir brauchen ein wenig href, um etwas zu tun, wenn es angeklickt wird. Also, wir werden sagen onclick gleich, sagen wir einfach log. Langweilig müssen wir anfangen, Zitate hier zu entkommen, angeklickt. Nur um sicherzustellen, dass das auch für uns funktioniert. Okay, speichern Sie das. Gehen Sie zurück zu unserem Browser, und wir können sagen, klicken Sie, klicken Sie, klicken Sie, klicken Sie auf. Wir können sehen, dass das dort exekutiert wird. Und wir könnten vergeben werden, dass wir denken, dass das nächste, was wir tun müssen, ist, gut zu entscheiden, lassen Sie uns einfach unseren Titel da rein. So wie das richtig? Ok. Also, lasst uns einfach nachsehen. Sehen Sie, wie das funktioniert. Geben Sie dem einen Nachladen. Schließlich, großartig, wir zeigen alle unsere Schlagzeilen hier, und lassen Sie uns eine sehr sorgfältig zu klicken, und ausgezeichnet, die die Überschrift in unserer Konsole zeigt, und die Art, wie wir wollen. Wir klicken auf diese Zeile, Syntaxfehler, eine fehlende Klammer, schließen Klammer nach Argumentliste. So können wir sehen, dass ich eine dieser Schlagzeilen gewählt habe, es hat ein Zitat darin. Und natürlich verwenden wir hier einfache Anführungszeichen, um unseren Titel einzuschließen. Also, leider werden wir etwas gegen die Zitate tun müssen , die innerhalb des Titels sind. Und die schnelle und einfache Sache, die wir tun können, ist ein ersetzen alle unsere einfachen Anführungszeichen. Und alle von ihnen. Also, ich habe ein g gesetzt, um zu sagen, bekommen Sie alles, was Sie in der Zeichenfolge finden, nicht nur die erste, und dann wollen wir das durch einen umgekehrten Schrägstrich ersetzen, und weil es ein umgekehrter Schrägstrich ist, müssen wir einen doppelten Escape des umgekehrten Schrägstrichs machen. Was super langweilig ist. Ich würde dafür doppelte Anführungszeichen verwenden. Richtig, also was machen wir hier? Wir sagen, was wir tun wollen, ist jedes einzelne Anführungszeichen durch einen umgekehrten Schrägstrich gefolgt von einem einzigen Anführungszeichen zu ersetzen . Also, wir entkommen ihnen im Grunde und sagen, dass dieses einfache Anführungszeichen keine Funktion in dieser Zeichenfolge hat. Es ist nur für die Anzeige. Ich meine, wir verwenden zwei umgekehrte Schrägstriche, weil wir sagen, mach das Escape in der tatsächlichen Zeichenfolge, die ausgedruckt wird. Meine Güte, und was wir jetzt tun müssen, ist zurück zu unseren Giphy-Nachrichten, Webseite, Neuladen. Und lassen Sie uns etwas wählen, das keine Anführungszeichen enthält. Es gibt also eins über Karlie Kloss. Wir können sehen, wie Karlie Kloss glücklich auf die Konsole ausgedruckt ist. Was ist mit Avengers Infinity? Sehen Sie hier unsere einfachen Anführungszeichen, die in der Konsole erscheinen. Glückliche Tage. Und schließlich haben Sie das etwas mit doppelten Anführungszeichen darin. Oh, mein Lieber, unterminierte String-Literal. Also, das wird Probleme verursachen, wegen des doppelten Anführungszeichens. Es wird noch eine letzte Sache geben, die wir hier machen werden. Wir werden sagen EncodeURIComponent. Nun, dies ist etwas, das in Javascript eingebaut ist, das für die Vorbereitung einer Zeichenfolge zur Verwendung in einer URL dient, aber uns andere Vorteile wie das Codieren vieler der Strings, die verursachen, oder Codieren vieler der Zeichen, die uns Probleme. Einfache Anführungszeichen werden jedoch nicht von encodeURIComponent behandelt. Kopf zurück. Wir würden unsere Seite einen Neuladen geben, klicken Sie auf diesen lästigsten Titel und Sie können sehen, was wir hier haben. Die Leerzeichen wurden in Prozent zwei Null umgewandelt, was Hexadezimalwert für ein Leerzeichen ist, und unsere anderen problematischen Zeichen wurden ebenfalls konvertiert. Sie können sehen, dass das doppelte Anführungszeichen jetzt Prozent zwei ist, und wir haben immer noch unser einzelnes Zitat bekommen, das mit einem umgekehrten Schrägstrich entkommen ist, weshalb es glücklich in unserer Konsole erscheint. Und der Punkt ist, dass wir jetzt einen Wert haben, den wir in die Giphy-API einspeisen können eine Reihe von Bildern abzurufen, die Drake Hops auf N*E*R*D und Rihannas Lemon Remix übereinstimmen. Das ist also soweit wir das für diese Lektion nehmen werden, denn was wir getan haben, ist erfolgreich eine Anfrage an die Nachrichten-API zu senden. Wir haben eine Antwort erhalten. Wir haben die Antwort bearbeitet und auf unserer Webseite abgelegt. Wir ergreifen Maßnahmen, wenn die Antwort oder wenn Tittle angeklickt wird. Und das nächste, was wir tun möchten, ist , das an die Giphy-API zu senden, um eine Reihe von Bildern zurück zu bekommen. Wie immer, wenn Sie während dieser Lektion Probleme haben und etwas davon selbst tun, denken Sie daran, mich bitte im Diskussionsbereich Bescheid zu geben und ich werde Ihnen sofort helfen. Andernfalls werde ich Sie in der nächsten Lektion sehen. 7. Umgang mit AJAX-Fehlern: Ok. Das bringt uns zum letzten der drei Ajax-Staaten, über die ich gesprochen habe, die wir kümmern müssen, wenn wir Ajax gut verwenden und das ist Scheitern. Was machen wir, wenn die Dinge nicht richtig laufen? Nun, hier geht es natürlich um den Umgang mit Fehlern. Wenn wir also eine Anfrage absenden und die Antwort darauf hinweist, dass sie aus irgendeinem Grund nicht erfolgreich war, und wir sollten den Benutzer wissen lassen, dass die Dinge nicht richtig gelaufen sind. Dass das, was sie zu tun versuchten, vielleicht nicht erfolgreich war. Sollen sie es nochmal versuchen? Dies ist alles Teil, um sicherzustellen, dass der Benutzer versteht, zu welchem Ergebnis seine Aktion geführt hat. Wieder einmal wird dies ein wenig Codealong sein. Bitte kopieren Sie die Codierung noch einmal, wie Sie gehen. Es ist nur eine gute Art zu lernen und viel besser als sitzen und beobachten, weil ich das natürlich auch tun werde, zur gleichen Zeit. Also, lassen Sie uns zurück in den Code springen, und als Auffrischung denken Sie daran, dass wir dieses div direkt hier mit einer ID des Fehlers haben. Dies ist derjenige, den wir verwenden werden, um eine Fehlermeldung anzuzeigen, und es hat einige spezielle Anfang in unserem CSS vordefiniert , um es ein bisschen rot und ein wütend wie ein Fehler aussehen zu lassen. Es ist auch so eingestellt, dass eine Anzeige von nicht [unhörbar], so dass wir es normalerweise nicht sehen. Also, hier sind wir in unserem Javascript-Code, und hier ist die Funktion unserer Show Headline und nur für eine Minute verloren. Hier sind wir im Irrtum. So weisen wir der on error Eigenschaft der Anfrage eine Funktion zu. Das erste, was wir tun, ist die weißen Zähne zu verstecken, so dass der Benutzer weiß, dass seine Anfrage abgeschlossen ist. Also, das letzte, was ich tun werde, ist unser Fehlerelement zu bekommen und es auf eine Fehlermeldung zu setzen . Da gehen wir. Das letzte, was wir tun müssen, ist ein Element anzuzeigen, das das Fehlerelement ist. Also, hier sind wir. Ich lade die Datei einfach neu. Webseite, und Sie müssen auf diese klicken, und ich kann sehen, ist immer noch verhalten, wie es vorher getan hat. Jetzt erscheint die Schlagzeile in der Konsole und alles ist gut. Wir sehen keine Fehlermeldung, dass, wenn wir gehen und schalten Sie unser WiFi aus und „Hey presto, ich werde eine neu geladen“. Wir sehen eine Fehlermeldung nur nicht die schönste Fehlermeldung der Welt, aber wir können sagen, dass wir ganz klar darauf hinweisen, dass es ein Problem gegeben hat, und wir fangen die Tatsache, dass es ein Problem gab, und erzählen dem Benutzer von es. Gut auf eine Nachladung, und da haben wir wieder unsere Schlagzeilen. Also das ist es, sehr schnelle Demonstration, wie wir zeigen können, wenn Dinge schief gelaufen sind, ohne Ajax Anfrage. In unserer nächsten Lektion werden wir alles, was Sie bisher gelernt haben, in die Tat umsetzen , indem wir uns für die Giphy-API anmelden. Schauen Sie sich die Dokumente an und passen Sie dann unsere Schlagzeilen in die Giphy-API ein, um einige Bilder zu zeigen. 8. Greife mit deinen großartigen neuen AJAX-Fähigkeiten auf die GIPHY-API zu.: Ok. Also, es ist Zeit, Ihre neuen Fähigkeiten in die Tat umzusetzen. Es ist Zeit zum Üben. Übung wird Ihnen helfen, alles, was Sie bisher gelernt haben, wirklich zu konsolidieren. Wir werden die GIPHY-Suchmaschine verwenden. Wir nehmen die Überschrift, die wir haben, oder eine der Überschriften, die wir auf unserer Webseite klicken, und füttern diese Überschrift in die GIPHY-Bildsuche ein und zeigen dann alle Bilder an, die dieser Überschrift entsprechen. Wir werden dies einen Schritt nach dem anderen tun. Also, ich sage nicht: „Hey, geh einfach und mach das sofort.“ Das erste, was wir tun müssen, ist, sich für einen API-Schlüssel bei GIPHY anzumelden. Also, gehen Sie zu developers.giphy.com. Klicken Sie auf die Schaltfläche Anmelden. Klicken Sie auf Join GIPHY, die in Teeny winzigen Schreiben am unteren Rand des Logs in Formular ist. Gehen Sie zurück zu developers.giphy.com, denn sobald Sie sich angeschlossen haben, denke ich, es lässt Sie auf giphy.com. Klicken Sie auf App erstellen. Füllen Sie dann das Formular aus, um die Anwendung zu erstellen. Dann wird es Ihnen Ihren API-Schlüssel zeigen. Sie können dies in allen Aufrufen der API verwenden, die Sie ausführen. Ich werde das jetzt tun. Ich bin sicher, dass Sie sich schon vorher für Online-Dienste angemeldet haben. Also, es wird hier nichts Superherausforderndes geben. Aber ich ermutige dich immer noch, das zu versuchen, bevor du mir zusiehst, wie ich es auch mache. Ok. Also, hier sind wir auf der GIPHY Entwicklerseite. Es ist wahrscheinlich alles, was man von GIPHY erwartet. Also, ich werde auf Anmelden klicken. Ich werde auf den winzigen GIPHY Join GIPHY Link klicken. Ich finde ihre Anmeldeseite ziemlich ablenkend. Ich werde mein luke.fabish @lukefabish verwenden. Ich werde meinen Benutzernamen auf lukefabish-gifs setzen, und mein Passwort wäre großartig, etwas um das herum. Da gehen wir. Ich weiß nicht, ob du es über das Mikrofon hörst. Diese Seite lässt die Fans meines Laptops drehen und wirbeln wie verrückt. Also, ich werde auf „Registrieren“ klicken und so schnell wie möglich losgehen. Ich würde sagen, speichern Sie das nicht. Ok. Also, wir haben uns angeschlossen und jetzt kann ich auf Create a App klicken. Okay, wir werden sagen, alle Nachrichten, die GIPHY uns geben kann. Ich nenne es GIPHY News. Ich klicke auf App erstellen und boom. Es gibt meinen API-Schlüssel , den ich ausgewählt und kopiert habe. Also, das ist der Schlüssel, den wir verwenden können, um API-Anfragen gegen die GiPhyS-API zu stellen. Nun, da wir dies getan haben, sollten wir besser die GIPHY API-Dokumente überprüfen. So finden wir diese auf developers.giphy.com/docs. Es gibt nur eine Navigation mit der linken Hand. Schauen Sie sich die technische Dokumentation an. Klicken Sie auf Endpunkt suchen. Dann können Sie ihre Parameter in den Anforderungen überprüfen und sehen, was in der Antwort von diesen Anfragen enthalten ist. Ein Teil dieser Antworten ist etwas, das GIF-Objekt genannt wird, glaube ich. Also, überprüfen Sie Schemadefinitionen, wieder, in der linken Navigation. Klicken Sie auf das GIF-Objekt. Vor allem, mach dir keine Sorgen. Ich werde die GIPHY-Antwort, insbesondere das GIF-Objekt, dasirgendwie groß ist, verwenden insbesondere das GIF-Objekt, das . Ich fand mich ein wenig verwirrend. Aber das machen wir zusammen. Ok. Sie müssen diese URL nicht in Ihre Adressleiste eingeben. Wir können einfach auf den Menüpunkt Docs klicken. Es ist über eine fröhliche und giphy-ähnliche wieder. Aber auf der linken Seite hier haben wir technische Dokumentation. Sieh dir das an. Hier ist unsere GIFS-Suche. Also gehen wir zum Search Endpoint. Sie können sehen, der Host ist api.giphy.com. Hier ist unser Weg und es sagt uns, was in die Anfrage gehen sollte. Unser API-Schlüssel, natürlich, Abfragen, die wir auf unsere Überschrift setzen, und ein paar andere Dinge, die wir, oder die andere, die wir tatsächlich verwenden, ist das Schreiben. Wir setzen ihn auf G, um uns vor einigen der anspruchsvolleren GIPHY-Inhalte zu schützen. Die Antwort sagt uns, dass wir etwas bekommen, das Daten genannt wird. Dies wird sein, was wir ein Array von GIF-Objekten, Paginierung und etwas namens Meta-Objekt haben werden. Die eine, die wir wirklich überprüfen müssen, oh, Mann, mein Fan wird im Moment wild, ist das GIF Objekt. Wir können es hier einfach anklicken, um es anzuschauen. Aber ich sagte, es ist in Schemadefinitionen, und es ist GIF-Objekt. Los geht's. Es sagt uns, dass wir eine ID eingeben müssen, eine Schnecke, viele Dinge tatsächlich, wie viele, und viele und viele Dinge. Beinhaltet die meisten Bilder. Also, wir müssen gehen und uns das Bild Objekt ansehen. Hier befinden sich unsere Bilddaten tatsächlich oder URLs, um das Bild zu finden. Es gibt eine Reihe von verschiedenen Typen in dieser Antwort. Es gibt feste Höhe, feste Breite und feste Breite noch, feste Breite und feste Breite heruntergesampelt, und so weiter, und so weiter, und so weiter, und so weiter. Sie werden feststellen, dass wir bis zum Original kommen. Ok. Also, das ist diejenige, die wir benutzen werden. Also, wir werden gehen und unser Original finden, das ein anderes Objekt ist, das eine URL hat. Wir würden nur diese URL verwenden, um unser Bild anzuzeigen. Wie ich schon sagte, das ist eine Menge Detail. Die Sache, die wir wollen, ist ziemlich tief in der Antwort begraben. Ich zeige Ihnen, wie wir in unserem Code darauf zugreifen können. Also, einen Schritt nach dem anderen. Wie werden wir unsere GIF-Suche machen. Also, das ist das bisschen, wo ich möchte, dass Sie Ihren Texteditor starten, von wo aus wir mit unseren anderen Schritten bisher aufgehört haben, und im Grunde, machen Sie eine Kopie unserer Show Headline Funktion, die wir bereits haben, und nennen Sie es Show GIFs, wenn Sie wie. Wir ersetzen ein paar Dinge da drin, um loszulegen. Sie wissen also, wie wir die URL mit einigen Parametern aufbauen. Nun, unsere URL sollte diese sein, http://api.giphy.com/v1/gifs/search. Wir sollten die Parameter wie folgt verwenden. Die Bewertung sollte G sein, Q sollte die Schlagzeile sein, und ich werde kurz darüber sprechen, und der ApiKey sollte auf den API-Schlüssel eingestellt werden, wie sich herausstellte. Weisen Sie dann eine Funktion zu, die für Ihre neue XML-HTTP-Anforderung onload zu. Lassen Sie es einfach die Ergebnisse der API-Anfrage an die Browser-Konsole drucken. Dann kann die onerror-Eigenschaft ziemlich genau so sein, wie sie vorher mit einer etwas anderen Nachricht war, richtig? Es ist ein Fehler beim Abrufen von GIFs aufgetreten, anstatt dass beim Abrufen von Schlagzeilen ein Fehler aufgetreten ist. Aber die Sache, auf die ich wirklich zurückkommen wollte, ist für die Parameter. Ich habe gesagt, Q sollte gleich ihrer angeklickten Überschrift sein. Sie wissen also, wo wir unseren Überschriftenlink konstruieren. Hier ist es genau hier. Wir bauen unsere Verbindung auf. Wir haben onclick=console.log. Ändern Sie das in den Namen Ihrer neuen Funktion, GIFs anzeigen, falls Sie sich dafür entschieden haben, sie zu nennen. Wir werden unseren URI-codierten Titel übergeben. Dann steht Ihnen das zur Verfügung, um in die GIPHY Suchanfrage zu gelangen. Also, bitte versuchen Sie, das zu implementieren. Wie ich schon sagte, können wir mit einer Kopie unserer Funktion „Überschriften anzeigen“ beginnen, sie mit den Informationen, die Sie hier haben, ändern. Sobald Sie das getan haben, werde ich durchgehen, wie wir anfangen können , einzelne Bilder auf der Webseite anzuzeigen. Also, hier sind wir wieder zurück und ich werde jetzt meine Show GIFs Funktion machen. Also, wie ich schon sagte, ich ermutige Sie wirklich, sehr stark dazu, auf eigene Faust zu gehen , bevor Sie hier folgen. Nur weil das wie eine super gute Praxis ist. Ich beginne mit einer Kopie unserer Show Headlines Funktion und über die Spitze der letzten geschweiften Klammer, fatale Fehlberechnung. Also, was wir tun wollen, lassen Sie mich es Show GIFs nennen. Ok. Also, wir haben Show GIFs in unseren Schlagzeilen URL wird unsere GIFs URL werden. GIFs URL, ich werde es hier unten verwenden. Okay und ich werde das durch das GIPHY API End of Point ersetzen. Dann möchte ich unsere Bewertung gleich g setzen. Ich werde sagen, q ist gleich, na ja, wir müssen diese Vergangenheit haben. Ich werde sagen, ich werde es nur Search Term nennen, weil wir das definitiv in Zukunft wieder verwenden könnten . Also, wir werden suchen, wir könnten es verwenden, um mehr als Schlagzeilen zu suchen. Ok. Also gibt es unsere URL mit Parametern. Wir stellen unsere Bitte wie zuvor. Wir geben ein Get aus, da wir nach Informationen fragen und nicht versuchen, Informationen auf dem Server zu aktualisieren. Es sollte ein Posten sein. Jetzt kommen wir dazu, unsere Onload zu definieren. Wieder werden sie unser Gewichtselement verstecken. Wir werden sagen, nun, ja, also schicken wir das einfach an die Konsole, richtig? Wie ich schon sagte, würden wir console.log. Der Rest davon können wir vorerst loswerden. Irrtümlich sagen wir: „Beim Abrufen von GIFs ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.“ Also, das letzte, was wir tun müssen, ist sicherzustellen, dass dieses Ding aufgerufen wird, wenn eine unserer Schlagzeilen angeklickt wird, also gehen wir zurück zu dem, wo wir die Überschrift konstruieren, und wir werden sagen: „ShowGIFs“. Da gehen wir. Also, ich werde unsere GIPHY News Seite neu laden. Lassen Sie mich auf eine Überschrift klicken, und Sie können sehen, dass unser Weiß angezeigt wird und dann verschwindet. Dann können Sie sehen, dass wir all das Zeug hier von GIPHY haben, also ist dies die Antwort von GIPHY API. Wie versprochen, beginnt es mit einem Datenschlüssel , der ein Array der GIF-Objekte ist, wie wir in der GIPHY-Dokumentation definiert gesehen haben. Also, hier sind wir wieder bei unserer Show GIFs Funktion, und ich werde dies auf die gleiche Weise wie zuvor angehen. Wir werden es ein bisschen zu einer Zeit durcharbeiten, nur so dass wir langsam navigieren können , um dieses Zeug auf die Webseite in einem Format zu bekommen, das wir wollen. Also, das erste, was ich tun werde, ist ein Objekt zu definieren. Ich nenne es GifData gleich JSON.parse (Req.ResponseText). Lassen Sie uns stattdessen GifData ausgeben. Also, ich werde das speichern, Kopf zurück zu unserem Browser, neu laden, klicken Sie auf eine Überschrift und sehen, dass wir sehen können, dass dies jetzt in ein tatsächliches Objekt aufgeschlüsselt und schön für uns von Firefox gedruckt wurde . Wir haben drei grundlegende Teile unserer Antwort. Wir haben Daten, wir haben Meta und Paginierung. Paginierung ist Informationen darüber, wie viele Ergebnisse es gibt, wie viele Ergebnisse auf einer Seite sind, und es ermöglicht uns, durch große Mengen von Ergebnissen zu blättern. Aber wir werden das nicht tun, wir machen nur die erste, die erste Seite der Ergebnisse. Ein bisschen Metadaten erzählen uns von unserem Status, 200 okay, die Nachricht ist in Ordnung, und gibt uns Antwort-ID, und dann schließlich Daten mit unseren GIPHY-Objekten, die all diese Dinge sind. Wenn wir uns eines davon ansehen, können wir sehen, dass das Zeug, das wir in der Dokumentation gesehen haben, hier ist. Wir interessieren uns für Bilder. Lassen Sie uns mit den Bildern nach unten gehen, und dann nach all dem können wir sehen, dass es ein Original mit der URL gibt. Wir können diese URL verwenden, um tatsächlich ein GIF zu betrachten. Ich frage mich, was das GIF ist. Lasst uns darauf klicken. Sehr gut. Also, fangen wir an, diese Daten zu verwenden. Anstatt nur die GIF-Daten zu protokollieren, können wir also eine weitere kleine for-Schleife einrichten. Ich werde sagen, für, sagen, es ist weniger als die Anzahl der Elemente in unserer Antwort. Also, ich werde sagen „gifData.data.length.“ Ich werde sagen, „GifidX“, wieder aus Kürze mit einem einheitlichen Operator, nicht einem Ventilator. Was können wir dann damit machen? Nun, was wir tun können, ist, dass wir sagen können, okay, bitte zeige uns Daten (gifidX) .images.original.url. Meine Güte, also denke ich, das ist richtig. Ich erinnere mich nicht genau. Mal sehen, was wir in unserer Konsole bekommen. Laden Sie es neu. Klicken Sie auf eine Überschrift, und hier erhalten wir eine Reihe von GIFs. Nun, lasst uns eins nach oben klicken und sehen, was wir bekommen. Ich finde dieses leicht süchtig machendes Klicken auf diese Dinge, um zu sehen, was sie sind. Wie auch immer, jetzt, da wir das haben, haben wir alles, was wir brauchen, um Bilder in unsere Webseite zu schieben. Aber wie sollen wir das machen? Nun, wirklich was ich tun möchte, ist eine Reihe von Bild-Tags zu erstellen und diese in unser GIFS-Div zu legen, denn wenn Sie sich erinnern, hat unser HTML ein div mit einer ID von GIFs, also möchte ich das mit Bildern füllen, jedes mit seine Quellattribute, die auf was auch immer unsere GifData, GifidX, images.original.url eingestellt sind, sind so einfach. Ich weiß, dass ich dafür eine neue Funktion wollen werde. Lassen Sie uns einen erfinden, AddGifImage so. Dies wird etwas sein, das unsere URL hinzufügt, um ein Bild in einem Container zu erstellen. Also, unser Container wird das div namens GIFs sein. Dann wollen wir das alles da drin. Diese lustigen Geräusche können Sie hören, wie ich nur mich mit Befehlen mache. Also, wir haben eine Definition einer Funktion, um das für uns zu tun. Also, lassen Sie uns gehen oben zeigen GIFs und erstellen Sie diese Funktion namens Funktion AddGifImage AddToElementID und ImgSRC. Also, was wir tun wollen, ist, dass wir ein neues Bild erstellen, und wir werden sagen, weil wir den Browser bitten, dies zu tun, damit wir ein neues Bildelement erstellen, createElement vom Typ img. Jetzt, da wir ein neues Bild haben, können wir sagen, dass das eine Quelle ist, und sagen NewImg.source gleich Bildquelle ist. Was wir jetzt tun wollen, ist dies zu unserem Bild hinzufügen, gut ein Container für unsere Bilder. Wir haben den Namen dieses Containers hier übergeben, addToElementID. Ich könnte diese ImageContainerID nennen. Das scheint ein intuitiverer Name zu sein. Also, wir werden sagen, ContainerEle entspricht document.getElementById (ImageContainerID). Dann können wir sagen Containerele.add. Nein, es ist anhängen. Danke, dass du mich daran erinnerst. Texteditor ein newImg. Wir sind so ziemlich fertig. Also, was wird hier passieren? Jedes Mal, wenn wir uns eine dieser URLs ansehen, müssen wir addGifImage aufrufen, und wir werden sagen, bitte erstellen Sie ein neues Bildelement, setzen Sie die Quelle auf diese URL und fügen Sie sie an unseren GIFS-Container. Also, unsere GIFs div. Mal sehen, wie das im Browser läuft. Laden Sie neu, warten Sie, und ich klicke auf „Wird und Gnade“ Erneuert. Okay, und sieh mal, was wir haben. Hier ist eine Reihe von GIFs, die von GIPHY erscheinen. Sie passen mehr oder weniger zu diesem neuen Will and Grace Geschäft. Also, ja und sie erscheinen wie diese Seite an Seite und die GIFs erscheinen gerade wieder in diesem Spaltenformat, wegen des CSS, das ich zuvor dafür eingerichtet habe. Also, das ist ziemlich gut. Also, schauen wir uns eine andere an, Bella Hadid und so etwas oder anderes, und was ist hier los? Manche Dinge schienen sich geändert zu haben, andere nicht. Ich bin mir nicht sicher, ob unsere G-Bewertung wirklich so funktioniert, wie es hier sollte, aber wir haben viel mehr GIFs, als wir sollten. Was hier passiert ist, ist, weil wir dieses AppendChild in unseren Container aufrufen, es fügt viele GIFs hinzu oder diese Bilder hinzu, aber es löscht nicht die alten. Also tun wir das besser, bevor wir etwas anderes tun. Also, was wir wieder tun werden, sagen wir einfach document.getElementById, GIFs, dot, so. Also, das heißt, hey, alles in unserem GIFS-Div hat es auf nichts gesetzt, leere Zeichenfolge. Also, mal sehen, wie das jetzt im Browser funktioniert. Wir laden das neu. Ich werde dieses Ding über Barbra Streisand anklicken. Ich werde unsere Konsole loswerden. Nun, hier sind unsere GIFs. Wow, Prinz Charles. Also, wir haben einige andere Prince Bilder hier klar, aber wir können sehen, dass diese früheren GIFs gelöscht werden und wir haben sie durch all diese anderen Princey Arten von GIFs ersetzt. Also, das ist so ziemlich die Anwendung, wie wir es bauen wollten. Wir haben Schlagzeilen auf der einen Seite, GIFs auf der anderen Seite, die Schlagzeilen entsprechen, wenn wir sie anklicken. Wir erhalten alle diese Daten von zwei verschiedenen APIs, wo wir die Schlagzeilen von der Nachrichten-API erhalten. Wir füttern eine Überschrift in die GIPHY-API ein, um eine Reihe von passenden GIF-Bildern zu erhalten. 9. Zeit auf Wiedersehen zu sagen!: Ok. Alle, das ist es für unsere Klasse. Wir haben eine Menge Boden bedeckt. Wir haben gesehen, wie wir mit JSON arbeiten. Wir haben gesehen, wie wir auf öffentliche APIs zugreifen, wie wir AJAX verwenden können, um Anfragen zu stellen , Antworten zu lesen und Fehler zu behandeln, und natürlich haben wir unsere kleine Webseite erstellt, um Geschenke zu zeigen, die den Überschriften der Welt entsprechen. Bitte vergessen Sie nicht, Ihr Projekt im Projektbereich zu posten. Ich liebe es, die Arbeit zu sehen, die Studenten tun, und natürlich bin ich hier bereit und warte darauf, Ihnen zu helfen, wenn Sie Probleme haben, während Sie Ihr Projekt erstellen. Andernfalls vergessen Sie bitte nicht zu folgen, wenn Sie mehr Kurse wie diese sehen möchten und ich freue mich darauf, Sie in Zukunft wieder zu sehen.