JavaScript Ajax Beispiel 2: GET-Request

Im nächsten Beispiel wird wiederum ein GET-Request mit Hilfe von Ajax an den Webserver gerichtet. Zunächst muss ein Ajax-Request-Objekt erzeugt werden. Die Funktion getRequestObject übernimmt diese Aufgabe. Weiter unten wird diese Funktion aufgerufen (direkt nachdem die Seite durch den Browser geladen wurde) und deren Ergebnis – das XMLHttpRequest-Objekt – in einer Variablen gespeichert, so dass künftig darauf zugegriffen werden kann.

SendGetRequest, die nächste Funktion, schickt den Request an den Webserver und setzt als Event-Handler die Funktion handleEvent ein. Dabei werden die Parameter, welche per GET-Methode an den Server gesendet werden, in Form einer Zeichenkette an die Funktion übergeben. Beim Aufruf durch das Request-Objekt werden die Parameter an die URL angehängt und somit an das auf dem Webserver laufende Script übergeben.

Der durch die Funktion handleResponse beschriebene Event-Handler reagiert erst nachdem der Request vollständig abgeschlossen ist. Nach dem fehlerfreien Empfang der Nutzdaten, die im Request-Objekt in der Eigenschaft responseText gespeichert sind, speichert der Event-Handler diese Daten in einer dafür vorgesehenen Variablen. Das Ergebnis der Anfrage, die gelieferte Textdatei, wird dann durch die zum Window-Objekt gehörende JavaScript-Methode Alert in Form einer Dialogbox ausgegeben. Zum Schluß wird das Gegenstück des onLoad-Events dazu verwendet, einen eventuell noch laufenden Ajax-Request abzubrechen, wenn das Browserfenster während eines solchen Requests geschlossen wird. Beachten Sie auch das POST-Beispiel.

<a href="javascript:sendGetRequest ('name=Wilhelm&alter=52')" title="">GET Request senden</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion erzeugt, in Abhängigkeit des benutzten Browsers, ein
// XMLHttpRequest-Objekt.
function getRequestObject () {
  // Wenn es sich bei dem vom Benutzer verwendeten Browser
  // um einen Internet Explorer handelt, wird das Request-Objekt
  // per ActiveX geholt.
  if (navigator.appName == "Microsoft Internet Explorer")
    return new ActiveXObject ("Microsoft.XMLHTTP");
  else
    // Bei anderen Browsern liegt das Request-Objekt direkt
    // unterhalb des Window-Objekts.
    return new XMLHttpRequest ();
}

// Folgende Funktion setzt einen HTTP-Request per GET-Methode ab.
function sendGetRequest (parameter) {
  // Verbindung zum Webservice per GET öffnen.
  // Der Service ist über das PHP-Script httprequesttest.php erreichbar.
  // Die Parameter, welche an das Script übergeben werden werden an die
  // URL angehängt.
  httpRequestObject.open ('GET', 'httprequesttest.php?' + parameter);
  // Event-Handler-Funktion handleResponse mit dem readystatechange-Event
  // verbinden. Diese Funktion wird immer dann ausgeführt, wenn sich
  // der Status der Abfrage ändert.
  httpRequestObject.onreadystatechange = handleResponse;
  // Zum Schluß wird die Anfrage an den Server gesendet.
  httpRequestObject.send (null);
}

// Event-Handler, die auf Änderungen beim readyState des XMLHttpRequest-Objekt
// die entsprechende Reaktion durchführt.
function handleResponse () {
  // Request abgeschlossen (readyState 4) und Server mit OK (Status 200) geantwortet?
  // Bei allen anderen Statusänderungen wird die Funktion zwar aufgerufen, aber
  // es wird nicht auf die Stati reagiert.
  if (httpRequestObject.readyState == 4 && httpRequestObject.status == 200) {
    // Request ist abgeschlossen und alle Daten angekommen
    // => Empfangene (Text)Daten in Variable speichern und in Dialogbox ausgeben
    var response = httpRequestObject.responseText;
    // Empfangene Daten werden in einer Dialogbox ausgegeben.
    alert (response);
  }
}

// HttpRequestObject per oben definierter Funktion erzeugen und
// in der Variablen speichern, damit künftig auf das Objekt zugegriffen
// werden kann.
var httpRequestObject = getRequestObject ();

// Wenn das Dokument geschlossen wird, müssen noch nicht beendete
// Requests abgebrochen werden.
window.onunload = httpRequestObject.abort ();
// -->
</script>

GET Request senden

Letzte Posts aus unserem Forum

Script Schrift vergrößern

Hallo wollte gerade das Script für die Schriftvergrößerung testen, aber irgendwie bekomme ich das nicht hin. Habe eine Joomla Website und dort die ... » mehr

von Gast am Donnerstag, 22. April 2010 13:32 in JavaScript - bisher 1 Antwort
Letzter Beitrag: Donnerstag, 22. April 2010 18:05 von alm

Hallo, damit kann man nicht allzu viel anfangen. Soviel ich weiss kann es zuweilen Probleme mit Tabellen-Layouts geben. Dort werden die ... » mehr

Javascript Schriftengröße: Problem bei URL-Übergabe im IE8

Hallo, ich hab eben das Javascript zur Schriftengröße eingebaut, klappt auch wunderbar auf Firefox, aber der IE 8 hat folgendes Problem: - wenn ich ... » mehr

von horst1234 am Dienstag, 23. Februar 2010 13:06 in JavaScript - bisher 1 Antwort
Letzter Beitrag: Dienstag, 23. Februar 2010 14:07 von horst1234

Ich hab das charset im Header geändert (wie in der beispiel.html), und schon klappt es ... » mehr

Dynamisches einfügen von Zeilen in eine Spalte

Hallo, ich möchte gerne eine Zeile zwischen zwei andere Zeilen einfügen. Leider klappt folgender Versuch noch nicht so richtig. Vielleicht kann mir ... » mehr

von Bluecaspar am Mittwoch, 10. Februar 2010 18:09 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Donnerstag, 11. Februar 2010 10:37 von Bluecaspar

Ja genau, das war der Fehler. Vielen Dank Alex. Hier der korrigierte Code: <html> <head> <title> Test ... » mehr

Fenster in Frame erzeugen

Hallo, ich würde gerne ein Fenster in einer Webseite erzeugen. Das Fenster sollte dabei auf ein Frame begrenzt sein, sich also nicht aus diesen ... » mehr

von Bluecaspar am Dienstag, 9. Februar 2010 13:57 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Mittwoch, 10. Februar 2010 09:32 von Bluecaspar

Ja hervorragend, dass ist genau das was ich möchte. Danke ... » mehr

Problem: Kombination mit Lightbox 2

Hallo, ich bin gerade dabei die Galerie mit der Lightbox 2 zu verknüpfen, da ich die Bilder im Vollformat gerne in diesem schicken aufpoppenden ... » mehr

von GoPeter am Montag, 16. November 2009 23:38 in JavaScript - bisher 16 Antworten
Letzter Beitrag: Mittwoch, 18. November 2009 00:32 von GoPeter

Soo...hat lange gedauert...aber jetzt ist es endlich ... » mehr



¬ Insolvenzrecht