AJAX

Das XMLHttpRequest-Objekt

Michael Puff
http://www.michael-puff.de

Sat, 2011-03-19T06:03:29 UTC+0100

Eigenschaften

EigenschaftBedeutung
responseTextReturns the text response entity body.
responseXMLReturns the document response entity body.
statusReturns the HTTP status code.
statusTextReturns the HTTP status text.

Methoden

MethodeErklärung
open(method, url, async, user, password)Throws a SYNTAX_ERR exception if one of the following is true:
  • method is not a valid HTTP method.
  • url cannot be resolved.
  • url contains the "user:password" format in the userinfo production.
Throws a SECURITY_ERR exception if method is a case-insensitive match for CONNECT, TRACE or TRACK.
Throws a SECURITY_ERR exception if the origin of url does not match the XMLHttpRequest origin.
Throws a NOT_SUPPORTED_ERR exception if the scheme of url is not supported.
setRequestHeader(header, value)Appends an header to the list of author request headers or if the header is already in the author request headers its value appended to.
Throws an INVALID_STATE_ERR exception if the state is not OPENED or if the send() flag is true.
Throws a SYNTAX_ERR exception if header is not a valid HTTP header field name or if value is not a valid HTTP header field value.
send(data)Initiates the request. The optional argument provides the request entity body. The argument is ignored if request method is GET or HEAD.
Throws an INVALID_STATE_ERR exception if the state is not OPENED or if the send() flag is true.
abort()Cancels any network activity.
getResponseHeader(header)Returns the header field value from the response of which the field name matches header, unless the field name is Set-Cookie or Set-Cookie.
getAllResponseHeaders()Returns all headers from the response, with the exception of those whose field name is Set-Cookie or Set-Cookie2.

Ereignisse

EreignisErkärung
onreadystatechangeDefiniert Callback Methode, die aufgerufen wird, wenn sich der readyState ändert.

readyState

StatusWertBedeutung
UNSENT0The object has been constructed.
OPENED1The open() method has been successfully invoked. During this state request headers can be set using setRequestHeader() and the request can be made using the send() method.
HEADERS_RECEIVED2All redirects (if any) have been followed and all HTTP headers of the final response have been received. Several response members of the object are now available.
LOADING3The response entity body is being received.
DONE4The data transfer has been completed or something went wrong during the transfer (e.g. infinite redirects).

Demo

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>AJAX Test mit reinen Textdaten</title>
    <script type="text/javascript">
    <!--
      var req = null;
      
      function processRequest() {
        switch(req.readyState) {
          case 4:
            if(req.status == 200) {
              document.getElementById("request").innerHTML = req.responseText;
            }
            else
              alert("Fehler: " + req.statusText);
            break;
          default:
            return false;
            break;
        }
      }
      
      function initRequest() {
        try {
          req = new XMLHttpRequest();
        }
        catch(e) {
          alert("Requestobjekt konnte nicht erstellt werden");
        }
        req.open("GET", "data.txt", true);
        req.onreadystatechange = processRequest;
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencode");
        req.send(null);
      }
    -->
    </script>
  </head>
  <body>
    <h1>AJAX Test mit reinen Textdaten</h2>
    <h2>Request senden</h2>
    <p>
      <input type="button" onclick="initRequest();" value="Request senden" />
    </p>
    
    <h2>Ergebnis Request</h2>
    <p>
      <div id="request" style="width: 250px; height:20px; border: dashed 1px; padding: 4px";></div>
    </p>
  </body>
</html>

Erläuterungen

Aufbau und Funktionsweise des Demo-Programms

Es gibt ein normales HTML-Dokument mit Inline JavaScript Code. Im Body des HTML-Dokumentes befindet sich eine Schaltfläche zum Absetzen des AJAX Requests und ein div-Container für die Antwort auf den AJAX Request. Die Schaltfläche ruft den JavaScript Code initRequest() auf. In dieser JavaScript Funktion wird das Request Objekt erzeugt. Dem Eventhandler onreadystatechange wird die Callback Funktion processRequest() zugewiesen. Diese Funktion reagiert auf die Antwort des Servers und fügt die Antwort in dem div-Container ein.

Erzeugen des AJAX Request Objekts

Hier
req = new XMLHttpRequest();
wird das Request Objekt erzeugt. Schlägt dies fehl, wird eine Exception ausgelöst. Der einfachheithalber wurde auf die Kompatibilität zu anderen und älteren Browser verzichtet. Der Internet Explorer unterstütz das XMLHttpRequest Objekt zum Beispiel erst ab der Version 7. Davor musste man das ActiveXObjekt Msxml2.XMLHTTP oder Microsoft.XMLHTTP benutzen:
req = new ActiveXObject(Msxml2.XMLHTTP)
oder
req = new ActiveXObject(Microsoft.XMLHTTP)

Auslösen eines asynchronen Requests

req.open("GET", "data.txt", true);
req.onreadystatechange = processRequest;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencode");
req.send(null);

Mit der Methode open wird der Request erzeugt. Der erste Parameter bestimmt die Art des Requests, ob POST oder GET. Der zweite Parameter ist die URL an der der Request gesendet werden soll. Dies kann eine Text-, JSON- oder XML-Datei sein, welche Daten liefert oder das Ergebnis eines PHP Scriptes. Der letzte Parameter gibt an, ob der Aufruf synchron (false) oder asynchron (true) erfolgen soll.

Definition der Callback Funktion

Mit dem Eventhandler readystatechange wird eine Callback Funktion processRequest() verknüpft, die immer dann aufgerufen wird, wenn sich der Status des Requests ändert. Siehe dazu die obige Tabelle "readyState". In dieser Funktion findet eine Fallunterscheidung für den readyState statt und es wird der Status geprüft, ob die Anforderung erfolgreich war. Ist der readyState DONE, also der Request abgeschlossen, wird geprüft, ob er erfolgreich war (HTTP Errorcode 200) und dann die Antwort des Requests in den dafür vorgesehenen div-Container eingefügt:

switch(req.readyState) {
case 4:
  if(req.status == 200) {
    document.getElementById("request").innerHTML = req.responseText;

Literatur

2011-03-19T06:03:29 +0100, mail+homepage[at]michael-puff.de