Daten von URL abrufen in JavaScript

In diesem Artikel lernen und verwenden wir verschiedene JavaScript-Funktionen, die nützlich sind, um Daten von der URL auf unsere Webseite zu laden und entsprechend weitere Operationen mit diesen Daten durchzuführen.

Holen Sie sich Daten von URL in JavaScript

Es gibt mehrere integrierte und externe Funktionen in JavaScript, um Daten über URLs zu laden. Diese URL ruft eine API-Anforderung für eine serverseitig erstellte Funktion auf und gibt die Daten zurück, um auf die Anforderung zu antworten.

Wir können eine Anfrage mit einem anderen Methodentyp senden, aber in diesem Artikel werden wir die GET-Methode besprechen, die meistens verwendet wird, um Daten von der Server-Seite zur Client-Seite zu bekommen. Es gibt mehrere Möglichkeiten, eine GET-Anfrage in JavaScript zu stellen, die unten aufgeführt sind.

1. Fetch - Methode
2. XML-Http-Anfrage

fetch()-Methode

Die fetch()-Methode ist eine fortschrittliche Methode, um eine Netzwerkanfrage in JavaScript zu stellen, und die neuesten Browser unterstützen sie. Wir können die Methode fetch() verwenden, um Daten vom Server zu laden, indem wir eine Anfrage an den Server senden, ohne die Webseite zu aktualisieren.

Wir können die Methode async await mit einer fetch-Anfrage verwenden, um kompakt ein Promise zu machen. In allen fortgeschrittenen Browsern werden Async-Funktionen unterstützt.

Grundlegende Syntax:

let requestRsponse = fetch(url, [params])

<script>
async function funcRequest(url){
 await fetch(url)
    .then((response) => {
      return response.json(); // data into json
    })
    .then((data) => {
      // Here we can use the response Data
    }).
    .catch(function(error) {
      console.log(error);
    });
}
   const url = 'URL of file';
   funcRequest(url);

</script>

Im obigen JavaScript-Quellcode haben wir die async await-Funktion funcRequest() deklariert, die URL als Argument erhält und die fetch-Methode mit dem await-Schlüsselwort verwendet. Wir haben die Rückruffunktion then() definiert und die Antwort in JSON-Daten übersetzt.

Wir haben die catch-Methode mit console.log() verwendet, wenn ein Fehler auftritt, damit der Fehler in Protokollen angezeigt wird. Abschließend haben wir die URL gespeichert und an funcRequest(url); übergeben.

XML-HTTP-Anforderung

Es ist eine API in Form eines Objekts, das Daten zwischen einem Webbrowser und einem Webserver überträgt. XMLHttpRequest wird hauptsächlich in der AJAX-Programmierung (Asynchronous JavaScript and XML) verwendet.

Es ist keine Programmiersprache, aber AJAX ist eine Reihe von Webentwicklungstechniken, die mehrere Webtechnologien verwenden, um asynchrone Webanwendungen auf der Clientseite zu entwickeln.

Grundlegende Syntax mit GET:

<script>
my_variable = new XMLHttpRequest(); // object
my_variable.onload = function() {

 // Here, we can use the response Data

}
my_variable.open("GET", "MY_FILE_URL");

my_variable.send();

</script>

In der obigen JavaScript-Quelle haben wir das Objekt XMLHttpRequest erstellt und dann die Callback-Funktion beim Laden einer Anfrage definiert. Wir haben die Funktion open verwendet, den Typ der Anfragemethode und die URL als Argument übergeben und die Methode send() von XMLHttpRequest() aufgerufen.