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

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht