JavaScript - Daten per HTTP anfragen

Den Request definierenS.235 JavaScript kurz & gut

Nach dem Erstellen des XMLHttpRequest-Objekts besteht der nächste Schritt beim Aufbau eines HTTP-Requests darin, die open()-Methode Ihres XMLHttpRequest-Objekts aufzurufen, um die beiden notwendigenTeile des requests festzulegen: die Methode und die URL

XMLHttpRequest.open()

Überblick

  • XMLHttpRequest.open (method, URL [, async [, user [, password]]]);

Argumente

  • method

    String (erforderlich): GET, POST, DELETE, HEAD,OPTIONS, PUT

  • URL

    String (erforderlich): URL muss sich in der gleichen Domain befinden wie die aktuelle Seite

  • async

    Boolean (optional): true (asyncron), false (syncron)

  • user

    String (optional)

  • password

    String (optional)

Beschreibung

Das erste Argument von open() legt die HTTP-Methode oder das Verb fest. Die GET- und POST-Methoden werden überall unterstützt.

GET wird für "normale" Requests genutz und ist passend, wenn die URL die angefragten Ressource vollständig beschreibt, keine Nebenwirkungen auf dem Server auslöst und die Response von Server gecacht werden kann.

Die POST-Methode enthält zusätzliche Daten im Request-Body, die oft in einer Datenbank auf dem Server gespeichert werden (eine Nebenwirkung).

Das zweite Argument ist die URL für diesen Request. Diese ist relativ zur URL des Dokuments zu sehen, in dem das Script mit dem Aufruf von open() zu finden ist. Wird eine absolute URL angegeben muss Protokoll, Host, Port identisch mit dem der aufrufenden Seite sein.

GET-Methode

Bei der GET-Methode werden die Daten vor dem Verschicken zusammen an das Ziel der Datenübertragung (URL) anghängt, wobei die Daten durch ein ? von dem ursprünglichen URL agbetrennt werden. Diesen entstheneden Pseudo-URL sieht der Anwender nach dem Abschicken eines Formulars im Adressfeld des Browsers.

XMLHttpRequest.setRequestHeader() S.236 JavaScript kurz & gut

Der nächste Schritt beim Request-Prozess ist das Setzen des Request-Headers, wenn denn einer benötigt wird. POST-Request benötigt zum Beispiel einen "Content-Type-Header", um den MIME-Type des Request-Bodys festzulegen.

Überblick

  • XMLHttpRequest.setRequestHeader (name, value);

Argumente

Beschreibung

Bestimmte Header können nicht gesetzt werden sie werden vom Browser automatisch angefügt.

XMLHttpRequest.send()S.236 JavaScript kurz & gut

Der lezte Schritt beim Erstellen eines HTTP-Requests mit dem XMLHttpRequest ist das Festlegen des optionalen Request-Bodys und das Abschicken an den Server.

Überblick

  • XMLHttpRequest.send (messageBody);

Argumente

  • messageBody

    String (optional)

Beschreibung

GET-Requests besitzen niemals einen Body, daher wird null übergeben.

POST-Request enthalten im Allgemeinen einen Body, der dann dem "Content-Type-Header" entsprechen sollte, der mit setRequestHeader() gesetzt wurde.

Die Response erhaltenS.237 JavaScript kurz & gut

Ein vollständige HTTP-Response besteht aus einem Status-Code, einer Menge von Response-Header und einem Response-Body. All diese Elemente lassen sich über Eigenschaften und Methoden des XMLHttpRequest-Objekts auslesen.

Das XMLHttpRequest-Objekt wird asynchron genutzt: Die Methode send kehrt direkt nach dem Absenden des Requests zurück, und die oben auf geführten Response-Methoden und Eigenschaften sind erst gültig, wenn die Response erhalten wurde. Um darüber informiert zu werden, wenn die Response bereitsteht, muss für das XMLHttpRequest-Objekt auf das readystatechange-Event gelauscht werden.

readyStateS.238 JavaScript kurz & gut

enthält einen Wert, der den Status eines HTTP-Requests angibt.

onreadystatechangeS.238 JavaScript kurz & gut

Um auf Events vom Typ readystatechange zu lauschen, wird die Eigenschaft onreadystatechange des XMLHttpRequest-Objekts dem Event-Handler zugewiesen. Der Event-Handler stellt zunächst sicher, dass der Request vollständig ist. Wenn das der Fall ist, prüft er den Response-Statuscode daraufhin, ob der response erfolgreich war. Dann schaut er nach dem Content-Type-Header, um sicherzustellen, dass der Response den erwarteten Typbesitzt. Sind alle drei Bedingungen erfüllt, übergibt er dem Response-Body (als Text) an eine angegebene Callback-Funktion.

XMLHttpRequest.responseTextS.237 JavaScript kurz & gut

read-only

Der Response-Body kann in Textform über die Eigenschaft responseText ausgelesen werden.

Beispiel:

<script type="text/javascript">

var xhr = xmlhttp();

function rufeServer() {

xhr.open("GET", "Daten.txt", true);

xhr.onreadystatechange = gibDatenAus;

xhr.send(null);

}

function gibDatenAus() {

if (xhr.readyState == 4) {

document.getElementById("Absatz").innerHTML = xhr.responseText;

}

}

</script>

Ausgabe:

...

zurück