Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest_API below:

XMLHttpRequest API - Web-APIs | MDN

Baseline Widely available *

Hinweis: Diese Funktion ist in Web Workers verfügbar, mit Ausnahme von Service Workers.

Die XMLHttpRequest-API ermöglicht es Web-Apps, HTTP-Anfragen an Webserver zu senden und die Antworten programmatisch mit JavaScript zu empfangen. Dies ermöglicht es einer Website, nur einen Teil einer Seite mit Daten vom Server zu aktualisieren, anstatt zu einer ganz neuen Seite zu navigieren. Diese Praxis wird manchmal auch als AJAX bezeichnet.

Die Fetch-API ist der flexiblere und leistungsfähigere Ersatz für die XMLHttpRequest-API. Die Fetch-API verwendet Promises anstelle von Ereignissen zur Behandlung von asynchronen Antworten, integriert sich gut mit Service-Workers und unterstützt fortgeschrittene Aspekte von HTTP wie CORS. Aus diesen Gründen wird die Fetch-API in modernen Web-Apps üblicherweise anstelle von XMLHttpRequest verwendet.

Die zentrale Schnittstelle in der XMLHttpRequest-API ist XMLHttpRequest. Um eine HTTP-Anfrage zu senden:

1. Erstellen Sie eine neue XMLHttpRequest-Instanz, indem Sie deren Konstruktor aufrufen.
2. Initialisieren Sie sie, indem Sie XMLHttpRequest.open() aufrufen. Sie geben dabei die URL für die Anfrage an, die zu verwendende HTTP-Methode und optional einen Benutzernamen und ein Passwort.
3. Fügen Sie Ereignis-Handler hinzu, um das Ergebnis der Anfrage zu erhalten. Zum Beispiel wird das load-Ereignis ausgelöst, wenn die Anfrage erfolgreich abgeschlossen wurde, und das error-Ereignis wird in verschiedenen Fehlerfällen ausgelöst.
4. Senden Sie die Anfrage, indem Sie XMLHttpRequest.send() aufrufen.

Für einen ausführlichen Leitfaden zur XMLHttpRequest API, siehe Using XMLHttpRequest.

FormData

Ein Objekt, das <form>-Felder und ihre Werte darstellt, die an einen Server gesendet werden können, indem XMLHttpRequest oder fetch() verwendet wird.

ProgressEvent

Eine Unterklasse von Event, die in das progress-Ereignis übergeben wird und Informationen darüber enthält, wie viel von der Anfrage abgeschlossen wurde.

XMLHttpRequest

Stellt eine einzelne HTTP-Anfrage dar.

XMLHttpRequestEventTarget

Eine Superklasse von sowohl XMLHttpRequest als auch XMLHttpRequestUpload, die die in beiden dieser Schnittstellen verfügbaren Ereignisse definiert.

XMLHttpRequestUpload

Stellt den Hochladevorgang für einen HTTP-Upload dar. Bietet Ereignisse, die es dem Code ermöglichen, den Fortschritt eines Uploads zu verfolgen.

In diesem Beispiel rufen wir eine JSON-Datei von https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json ab, indem wir Ereignis-Listener hinzufügen, um den Fortschritt des Ereignisses zu zeigen.

<div class="controls">
  <button class="xhr" type="button">Click to start XHR</button>
</div>

<textarea readonly class="event-log"></textarea>

.event-log {
  width: 25rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

button {
  width: 12rem;
  margin: 0.5rem;
}

const xhrButton = document.querySelector(".xhr");
const log = document.querySelector(".event-log");
const url =
  "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json";

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

xhrButton.addEventListener("click", () => {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  addListeners(xhr);
  xhr.send();
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4