Wie erstelle ich einen HTTP-Request mit JavaScript?

Es gibt mehrere Möglichkeiten, einen HTTP-Request mit JavaScript zu erstellen. Eine davon ist die Verwendung der XMLHttpRequest-API, die von vielen modernen Browsern unterstützt wird.

Hier ist ein Beispiel für eine GET-Anfrage:

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Erfolg
    var data = JSON.parse(this.response);
  } else {
    // Server hat einen Fehler zurückgegeben
  }
};

request.onerror = function() {
  // Es gab einen Netzwerkfehler oder die Anfrage konnte nicht abgeschlossen werden
};

request.send();

Hier ist ein Beispiel für eine POST-Anfrage mit einigen zusätzlichen Header-Feldern und einem Anfragekörper:

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.setRequestHeader('X-Custom-Header', 'value');

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Erfolg
    var data = JSON.parse(this.response);
  } else {
    // Server hat einen Fehler zurückgegeben
  }
};

request.onerror = function() {
  // Es gab einen Netzwerkfehler oder die Anfrage konnte nicht abgeschlossen werden
};

var data = { foo: 'bar' };
request.send(JSON.stringify(data));

Es gibt auch andere Möglichkeiten, HTTP-Anfragen mit JavaScript zu erstellen, wie zum Beispiel die Verwendung von fetch(), aber die oben gezeigte XMLHttpRequest-API ist immer noch eine sehr verbreitete Methode.