So rufen Sie mit JQuery und AJAX Daten aus JSON-APIs ab (wenn Sie ein absoluter Neuling sind)

Dieser Artikel ist als Leitfaden für Anfänger gedacht, die sich mit ihrem ersten API-gesteuerten JSON-Verbrauch beschäftigen möchten. Ich weiß, was Sie denken: "Was?" Ich spreche davon, wenn Sie Daten von einer aktiven Website / einem aktiven Webdienst abrufen möchten, um Ihre eigene brillante Weblösung zu unterstützen.

Was ist in diesem Artikel enthalten?
* Eine sehr einfache Anleitung zur Verwendung einer API, um Daten aus der Backend-Datenbank einer Website zu übernehmen und in Ihre eigene (und sehr einfache) Webseite zu übertragen, mit der Sie nerdige Web-Aufgaben erledigen können.
* Erledigen Sie dies durch * Ausleihen * von JSON (Javascript Object Notation) aus Reddit mit JavaScript, AJAX (Asynchronous Javascript and XML), einfachem HTML und einigen sehr peinlichen Design-Arbeiten mit CSS.

Was ist nicht enthalten?
* eine vollständige und nützliche Lösung
* eine gut aussehende Website
* Wunder
* Eine Garantie, dass der Inhalt von Reddit, den Sie dabei sehen, nicht vulgär ist. Dies ist der neueste Beitrags-Feed von Reddit. o.0

Beginnen wir mit einem Pseudocode:

// serviere eine kalte, harte Wahrheit
 Funktion doSomeTruth (TheTruthAboutAPIs) {
Wenn ... (Sie fragen, wie eine API verwendet werden soll, haben Sie dies noch nicht getan.)
{
console.log ("Du wirst eine schlechte Zeit haben! Aber ... dieser Artikel wird helfen.");
TheTruthAboutAPIs = TrueThat;
}
 sonst..
{console.log ("Hier ist ein Link zu Google Map API. Viel Spaß damit. https://enterprise.google.com/maps/products/mapsapi.html.")
 }

Genug mit meinen Nachwuchsentwicklern, lasst uns die Schritte ausführen:

TEIL 1) Durchsuchen Sie die API-Dokumentation

Keine zwei APIs sind jemals gleich. Warum? Weil das Leben hart und kompliziert ist, genau wie alle Daten, die jemals in der realen Welt verwendet werden. Aus diesem Grund ist es unerlässlich, die von den Webentwicklern Ihrer Zieldatenquelle in ihrer API bereitgestellte UNIQUE-Lösung zu untersuchen.

In den folgenden Schritten erfahren Sie, worauf Sie sich konzentrieren müssen, um Ihre Mission zum Erfolg zu führen.

Also, wonach suchst du? Ich werde dies in vier Teile zusammenfassen.
 A) Wo?
 B) Schlüssel?
C) Zeichenketten abfragen?
D) Welche URL erhält den JSON?

A) WO ist die API? (Was noch wichtiger ist: Wo befindet sich die Dokumentation und benötige ich einen Account?) Die eindeutige Antwort lautet: Google-Suche nach dem Namen der Ressource, gefolgt von "api". In unserem Beispiel werde ich uns leicht tun und Reddit als Beispiel verwenden. Verknüpfung zur Dokumentation hier: https://www.reddit.com/dev/api/

B) SCHLÜSSEL? Benötige ich einen API-Schlüssel, um auf die Daten zuzugreifen? Nicht alle Daten sind ohne Angabe von Gründen frei zugänglich. Bevor Sie fragen, wie ich auf API-Daten zugreifen kann, müssen Sie fragen, wie ich die Berechtigung dazu erhalten kann. Viele Websites mit idealen Informationen wie Twitter oder Facebooks APIs möchten wissen, wer Sie sind, bevor sie Ihnen ihre Daten frei zur Verfügung stellen. Sobald Sie sich für ein Entwicklerkonto bei diesen Diensten angemeldet haben, erhalten Sie einen Schlüssel. Ein Schlüssel sieht oft wie verschlüsselter Jibberish aus und passt die meiste Zeit in die URL, wie zum Beispiel:

http://api.IAmNotARealSiteAsFarAsJesseKnows.com/json-for-you/?API_KEY=1239571325012351035135091735

Zum Glück kümmert sich Reddit nicht darum und bietet JSON-Daten seiner Reddit-Feeds frei an, sodass wir heute keinen Schlüssel benötigen.

C) QUERY Strings? (Das ist irgendwie super wichtig)
Welche Abfragezeichenfolgen benötigt die API, um ein JSON-Ergebnis zurückzugeben? Was ist ein Parameter? fair genug. Schauen wir uns eine URL aus einem Beispiel einer offenen Wetter-App an:

api.openweathermap.org/data/2.5/weather?q=London

Ich könnte tagelang über URLs reden, lassen Sie uns hier nur zwei Teile besprechen:
1) all diese Sachen: api.openweathermap.org/data/2.5/weather.
2) die Abfragezeichenfolge: Sie erscheint nach der Markierung „?“. In diesem Fall:? Q = London.

Laut der Open Weather Map API-Dokumentation ist „q = London“ der Abfrageparameter, nach dem der Datendienst sucht, um zu erfahren, welche Informationen über welche Stadt an Sie zurückgegeben werden sollen. Je nachdem, was Sie versuchen, werden diese Abfragezeichenfolgen für das Kämmen des Dienstes und das Abrufen der benötigten Informationen von entscheidender Bedeutung. Jede API wird ihre Daten anders einrichten, lesen Sie die Dokumentation.

D) IHRE JSON-URL
In unserem Fall, der Reddit-API, benötigen wir nicht viele Parameter, um die neuesten Daten abzurufen. Wir müssen nur wissen, wo wir sie abrufen können. Der Dokumentation zufolge können wir dies tun, indem wir einfach diese URL verwenden:

https://www.reddit.com/new/.json

Teil 2) BAUEN: Lass uns jetzt tatsächlich etwas bauen, ja?

Erinnerst du dich, als ich dir sagte, dass dieser Artikel dir nicht dabei helfen wird, etwas Hübsches oder Nützliches zu bauen? Ich habe nicht gescherzt. Dies ist, was Sie erstellen: eine Webseite, die einen reddit-Feed für neue Beiträge schrecklich umgestaltet. https://repl.it/MHkm/1

https://repl.it/MHkm/1

Wie ich diesen schrecklich hässlichen "Shreddit API Parser" gebaut habe

A) Ich habe die API-Dokumentation gelesen
und die URL für den gewünschten Bericht zusammengestellt, der unglaublich einfach ist und nur die neuesten reddit-Seitenbeiträge als JSON-Datei zurückgibt. https://www.reddit.com/new/.json

B) Ich habe eine einfache HTML-Webseite erstellt, auf die ich die API-Daten übertragen kann. (Siehe dies auf meinem oben gezeigten Beispiel-Link). Diese HTML-Seite enthält das grundlegende HTML-Boilerplate (google it) und vor allem einen Verweis auf eine JQuery-CDN (auch als gehostete JQuery-Bibliothek bezeichnet). Ich werde nicht erklären, warum, aber diese CDN MUSS in Ihrem HTML-Code enthalten sein, damit diese Lösung funktioniert. Sie werden feststellen, dass ich meine unten in meinem HTML-Code platziert habe: