Kontakt aufnehmen

Ajax: Daten abrufen

Der wichtigste Bestandteil einer jeden Ajax-Anwendung ist das Abfragen der Daten. Dies geschieht in der Regel via HTTP wofür JavaScript ein spezielles Objekt, XMLHttpRequest genannt, bereit stellt.
Beispiel:

o = new XMLHttpRequest();

Da dieses Objekt allerdings nicht vom Internet Explorer 5.x bzw. 6.x zur Verfügung gestellt wird, diese aber immer noch einen nicht zu vernachlässigenden Marketanteil aufweisen, muss für diese Browser der Umweg über ActiveX gegangen werden. Hierzu wird ein ActiveXObject vom Typ Msxml2.XMLHTTP oder, wenn dieses ebenfalls nicht verfügbar ist, Microsoft.XMLHTTP erzeugt. Eine passende Abfrage dafür könnte z.B. so aussehen:

o = null;

if(window.XMLHttpRequest)
{
 o = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
 try
 {
  o = new ActiveXObject('Msxml2.XMLHTTP');
 }
 catch(e1)
 {
  try
  {
   o = new ActiveXObject('Microsoft.XMLHTTP');
  }
  catch(e2)
  {
  }
 }
}

Das Resultat dessen ist immer das gleiche: Man erhält ein Objekt, welches mit diversen Methoden zum Abruf von XML-Daten via HTTP ausgestattet ist. Das XMLHttpRequest-Objekt wird zudem derzeit innerhalb eines sogenannten W3C Working Drafts behandelt, womit es von einem kleinen Feature zu einem quasi-Standard aufgestiegen ist.

Exkurs HTTP

Steht das Objekt zur Datenabfrage zur Verfügung geht es an die eigentliche Abfrage. Hierzu sind einige Grundlagen in Sachen HTTP notwendig um zu verstehen wie eine solche Abfrage sich auf die einzelnen Bestandteile auswirkt bzw. was genau passiert.

HTTP-Request

Um Daten, etwa eine Webseite oder die in Ajax benötigte Datei zu erhalten, baut der Client zunächst eine normale TCP/IP-Verbindung zum Server auf. Steht die Verbindung sendet der Client automatisch den sogenannten HTTP-Request, also die Anfrage nach der gewünschten Datei. Hierzu stehen dem Client mehrere Anfragetypen zur Verfügung die es z.B. erlauben Formulardaten der Anfrage zur Verarbeitung "beizugeben" oder den Server anweisen nur einzelne Informationen und nicht die komplette Datei zurück zu geben. Ein solcher HTTP-Request könnte z.B. so aussehen:

GET /index.php HTTP/1.1
Host: www.html-world.de
User-Agent: Mozilla/4.0
Accept: text/html, */*
Connection: Keep-Alive

Der Client teilt dem Server hier mit, er möchte gern die Datei /index.php vom Host www.html-world.de abrufen (GET). Außerdem liefert er Informationen zu sich selbst (User-Agent) sowie zu den als Antwort erwarteten Dateitypen (Accept) und dem gewünschten Verbindungstyp (Connection).

HTTP-Response

Hat der Client den Request abgesetzt wird vom Server eine Antwort, der sogenannte HTTP-Response zurück geschickt. Je nach Antwortmöglichkeit (geforderte Datei? geforderter Typ? existiert die Datei? ...) enthält dieser Response die gewünschten Informationen, die angeforderte Datei bzw. eine entsprechende Fehlermeldung. Ein möglicher Response auf den oben gezeigten Request könnte z.B. so aussehen:

HTTP/1.1 200 OK
Date: Thu, 15 Jul 2004 19:20:21 GMT
Server: Apache/1.3.5 (Unix)
Accept-Ranges: bytes
Content-length: 46
Connection: close
Content-type: text/html

<h1>Antwort</h1>
<p>Ich bin eine Antwort</p>

Darin enthalten sind neben dem Statuscode (erste Zeile), auch Informationen zum Server, der gelieferten Datei sowie der Dateicode selbst (am Ende).

Request absetzen

Für alle Vorgänge rund um HTTP steht uns das bereits erwähnte XMLHTTPRequest-Objekt zur Verfügung. Es ermöglicht einen Request zu formulieren, abzusetzen, den Response entgegen zu nehmen und die gelieferten Daten sinnvoll zu verarbeiten.
Um den Request zu formulieren wird die open-Methode verwendet. Sie erwartet bis zu fünf Parameter wovon die letzten 3 optional sind. Die einzelnen Parameter sind (in dieser Reihenfolge):

  • HTTP-Methode - hier stehen GET (Datei abrufen), POST (Datei abrufen und Formulardaten senden), PUT (Datei hochladen) und PROPFIND (Informationen zu verfügbaren Methoden) zur Verfügung. Eingesetzt wird in der Regel allerdings nur GET und selten POST - die anderen beiden spielen kaum eine Rolle.
  • URL - die URL der abzurufenden Datei inkl. Möglicher Parameter
  • Asynchron - Boolean ob der Request synchron (es wird das Script pausiert solange auf die Antwort gewartet wird) oder asynchron (das Script wird fortgesetzt) erfolgen soll. In der Regel wird hier true (asynchron) verwendet.
  • Username - ggf. zu verwendender Username für die HTTP-Anfrage
  • Passwort - Zum Usernamen gehörendes Passwort
Wurde der Request formuliert, wird er mit der send-Methode abgeschickt. Beispiel:

o = null;

if(window.XMLHttpRequest)
{
 o = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
 try
 {
  o = new ActiveXObject('Msxml2.XMLHTTP');
 }
 catch(e1)
 {
  try
  {
   o = new ActiveXObject('Microsoft.XMLHTTP');
  }
  catch(e2)
  {
  }
 }
}

if(o != null)
{
 o.open('GET','http://www.meineseite.de/index.php',true);
 o.send(null);
}

Parameter senden

In den meisten Fällen ist es notwendig, dass mit dem Request zusätzliche Daten an den Server geschickt werden, damit er diese verarbeiten und dann ein besseres Ergebnis liefern kann. Dies kann prinzipiell auf 3 verschiedene Wege geschehen:

  • Daten per GET - Hierzu werden die zu senden Daten als Parameter an die URL angehangen. Beispiel:

o.open('GET','http://www.meineseite.de/rechne.php?x=23&y=21);

  • Daten per POST - Hierzu werden die Daten wie beim Absenden eines HTML-Formulars mittels der HTTP-POST Methode als Request-Body mitgesendet. Die zu sendenden Daten werden hierbei als String an die send-Mehtode übergeben. Je nach Typ der Daten muss zudem noch der HTTP-Header Content-Type gesetzt werden, damit ihn der Server korrekt verarbeiten kann. Das Setzen des Headers übernimmt die Methode setRequestHeader. Beispiel:

o.open('POST','http://www.meineseite.de/rechne.php',true);
o.onreadystatechange = schreibeText;
o.setRequestHeader('Content-Type', 
                   'application/x-www-form-urlencoded');
o.send('x=23&y=21');

  • Daten per HTTP-Header - Hierbei werden die Daten als zusätzlicher HTTP-Header übergeben. Beispiel:

o.open('GET','http://www.meineseite.de/rechne.php',true);
o.onreadystatechange = schreibeText;
o.setRequestHeader('x','23');
o.setRequestHeader('y','21');
o.send(null);

Response entgegen nehmen

Je nach Zielsetzung ist das Absetzen des Requests in einigen Fällen schon völlig ausreichend - insbesondere dann wenn egal ist ob oder wie der Server reagiert. In allen anderen Fällen muss der Response des Servers abgewartet und ausgewertet werden.

Synchrone Requests

Werden synchrone Requests verwendet, ist das entgegen nehmen des Response relativ einfach, da der Programmverlauf so lange pausiert wird bis das Absenden des Requests zu einem Response oder zumindest zu einem Fehler geführt hat. In diesem Fall kann einfach nach dem Aufruf der send-Methode die passende Eigenschaft responseText (gibt die Antwort als Text zurück) bzw. responseXML (gibt die Antwort als XML-Objekt zurück) einfach abgefragt und ausgewertet werden. Beispiel:

o.open('GET','http://www.meinserver.de/daten.txt',false);
o.send(null);
document.writeln(o.responseText);

Asynchrone Requests

Da gerade bei langsamen Verbindungen oder größeren zu übertragenen Datenmengen die Zeitspanne recht lang werden kann bis die Pause nach dem Aufruf der send-Methode beendet ist, verwendet man normalerweise die asynchrone Übertragung (deshalb ja eben auch Asynchronous JavaScript and XML). Da hierbei sofort nach dem Aufruf der send-Methode mit dem folgenden Code fortgesetzt wird - auch wen der Response des Servers noch nicht oder nicht vollständig eingetroffen ist - besitzt das XMLHttpRequest-Objekt
die Möglichkeit sich über ein Ereignis informieren zu lassen. Das hier notwendige Event heißt onreadystatechange und tritt immer dann ein, wenn sich etwas am Status des Objekts ändert. Beispiel:

function schreibeText()
{
 if(o.readyState == 4 && o.status == 200)
 {
  document.writeln(o.responseText);
 }
}

if(o != null)
{
 o.open('GET','http://www.meineseite.de/daten.txt',true);
 o.onreadystatechange = schreibeText;
 o.send(null);
}

Die Eigenschaft status gibt hier den HTTP-Statuscode an - der Wert 200 entspricht "Ok", die Datei existiert also und wurde vom Server geschickt. Die Eigenschaft readyState gibt hier den Verbindungsstatus des Objekts an. Folgende Werte sind möglich:

  • 0 - Bisher ist noch nichts passiert.
  • 1 - Die Verbindung ist offen, open-Methode wurde aufgerufen, send ist aber noch nicht erfolgt oder läuft derzeit.
  • 2 - Die send-Methode wurde aufgerufen und der Request abgeschickt.
  • 3 - Die Daten werden empfangen.
  • 4 - Die Daten sind komplett geladen.

Response abbrechen

Für den Fall, dass der Response mal zu lange auf sich warten lässt, kann dieser mit Hilfe der abort-Methode abgebrochen werden. Beispiel:

o.open('GET','http://www.meineseite.de/ganzviel.txt');
o.onreadystatechange = schreibeText;
window.setTimeout('if(o.readyState<4){o.abort();}',10000);
o.send(null);

Response-Header auswerten

In den wenigsten Fällen nötig, ist das Auswerten der Response-Header - also der Zusatzinformationen die via HTTP vom Server neben der eigentlichen Datei mitgeschickt werden. Ist dies nötig, kann die getResponseHeader-Methode dazu verwendet werden den Wert eines einzelnen Headers zurück zu geben. Alternativ können mittels getAllResponseHeaders gleich alle Headerdaten auf einen Schlag angezeigt werden. Beispiel:

o.open('GET','http://www.meineseite.de/seite.php');
o.onreadystatechange = function ()
{
 if(o.readyState == 4 && o.status != 200)
 {
  document.writeln('Es gab einen Fehler:n'+
  o.getAllResponseHeaders());
 }
};
o.send(null);

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ XML und JavaScript

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern