FAQ: Webservices nutzen

Wie erstelle ich eine JavaScript-Funktion, die ein JSON-Objekt von einem Server lädt?

// Die Funktion fetchJsonForUrl lädt vom Server
// mit der übergebenen url die Daten, wandelt
// diese in eine JSON-Objekt um und liefert dieses
// JSON-Objekt zurück
async function fetchJsonForUrl(url) {
  let serverResponse 	= await fetch(url);
  let responseAsJson  = serverResponse.json();
  return responseAsJson;
}
Wie kann ich meine Funktion fetchJsonForUrl benutzen?

// Superhelden vom Server laden (so nutzt man einen Web-Service)
let heldenUrl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
fetchJsonForUrl(heldenUrl).then(function(geoObject) {
  // Hier wird die Heimatstadt
  // der Superhelden ausgegeben (einfach über ein alert).
  console.log(superhelden.homeTown);
});

Weiteres Beispiel für den Einsatz der Funktion fetchJsonForUrl Siehe auch Geocoding API von Google

// Geocoding-Information vom Server laden (so nutzt man einen Web-Service)
let MY_API_KEY = 'AIzaSyCBbrF__S2CBD2DUkajmotIIA5gUGhpoVY';
let geoUrl = 'https://maps.googleapis.com/maps/api/geocode/json?'
           + 'address=Liedekerker+Str.+84+48565+Steinfurt&key=' + MY_API_KEY;
fetchJsonForUrl(geoUrl).then(function(geoObject) {
  // Hier kann das geoObjekt nun genutzt werden,
  // z.B. um Longitude und Latitude der Adresse
  // anzuzeigen oder um die formatierte Adresse
  // (ohne Rechtschreibfehler und vor allem ohne
  // Doppeldeutigkeiten anzuzeigen).
  console.log(geoObject.results[0].geometry.location.lng);
  console.log(geoObject.results[0].geometry.location.lat);
  console.log(geoObject.results[0].formatted_address);
});

Beispiel für eine kleine Online-Applikation, die Ort, PLZ, Strasse und Hausnummer in Eingabefeldern abfragt und dafür die normierte Adresse und Longitude/Latitude ermittelt Nach Aufruf der folgenden Geocoding-Online Applikation können Sie wie gewohnt die Quelltexte (html, css und js) über "rechte Maustaste + Seitenquelltext anzeigen" begutachten. Sie gelangen zuerst in den HTML-Quelltext und finden dort auch die Verweise auf die eingebundenen CSS- und JavaScript Dateien, die Sie dort nur anklicken müssen. Geocoding-Online Applikation zur Normierung von Adressen und zur Ermittlung von Longitude und Latitude