Das XMLHttpRequest - Objekt

0 | 0 Kommentare | 26515 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Das XMLHttpRequest - Objekt" mit Ihrem Wissen!
Inhaltsverzeichnis

Anzeige Hier werben

Das XMLHttpRequest - Objekt

Das XMLHttpRequest-Objekt ist eine sogenannte API, die den Transport von Daten über das Webprotokoll HTTP ermöglicht. Es bildet die Grundlage der Ajax-Technik und wird von JavaScript aus verwendet. Mit Hilfe des XMLHttpRequest-Objekts wird es möglich in JavaScript HTTP-Anfragen an einen Server zu stellen und die entsprechenden Antworten des Server zu verarbeiten. Es stellt also eine Schnittstelle zur Kommunikation mit dem Server dar.

XMLHttpRequest - Objekt erzeugen

Für Firefox, IE7, Opera, Safari und Konqueror

Ein XMLHttpRequest-Objekte erzeugen Sie wie bereits besprochen mit JavaScript. Mit dem folgenden Code erzeugen Sie auf einfachste Weise ein XMLHttpRequest-Objekt. Jedoch wird dieses leider nur in den Browsern Firefox, Internet Explorer 7, Opera, Safari und Konqueror funktionieren. Andere/ältere Browserversionen können zwar eventuell ebenfalls XMLHttpRequests instanzieren, jedoch ist dafür ein anderer JavaScript-Code notwendig.

 
JavaScript
1
var xmlHttpObject = new XMLHttpRequest();

Für IE6 und älter

Für den Internet Explorer 6 und älter muss leider ein anderer JavaScript-Code verwendet werden, um ein entsprechendes Objekt zu erzeugen. Der Code unterhalb erzeugt ein XMLHttpRequest-Objekt für den Internet Explorer 6 und älter.

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var xmlHttpObject = false;
try 
{
    xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
} 
catch (e) 
{
    try 
    {
        xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");  
    }
    catch (e2) 
    {
        xmlHttpObject = false;  
    }
}

Der Code versucht XMLHTTP-Objekte zu verwenden, der Name für das XMLHttpRequest-Objekt von Microsoft. Das Objekt kann unter zwei verschiedenen ActiveX-Objekten vorhanden sein, diese werden beide probiert. Funktioniert das nicht bleibt xmlHttpObject false, es kann also später einfach geprüft werden, ob die Instanzierung erfolgreich war.

Für alle Browser

Da wir aber natürlich wollen das unsere Ajax-Anwendungen in allen Webbrowsern laufen, benötigen wir eine Methode ein XMLHttpRequest-Objekte zu erstellen, die zuverlässig in allen aktuellen Browsern funktioniert. Folgender Javascript-Code kombiniert beide besprochenen Möglichkeiten das XMLHttpRequest-Objekt (bzw. XMLHTTP-Objekt) zu instanzieren:

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var xmlHttpObject = false;

// Überprüfen ob XMLHttpRequest-Klasse vorhanden und erzeugen von Objekte für IE7, Firefox, etc.
if (typeof XMLHttpRequest != 'undefined') 
{
    xmlHttpObject = new XMLHttpRequest();
}

// Wenn im oberen Block noch kein Objekt erzeugt, dann versuche XMLHTTP-Objekt zu erzeugen
// Notwendig für IE6 oder IE5
if (!xmlHttpObject) 
{
    try 
    {
        xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e) 
    {
        try 
        {
            xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) 
        {
            xmlHttpObject = null;
        }
    }
}

Das XMLHttpRequest-Objekt nutzen

Übersicht über Methoden/Attribute

Um das XMLHttpRequest-Objekt benutzen zu können ist es wichtig seine Funktion und damit seine API zu verstehen. Diese wird durch Methoden und Attribute abgebildet.

Methoden vom XMLHttpRequest-Objekt
Methodenname
 Funktion
abort()
 bricht einen laufenden HTTP-Request ab
getResponseHeader(header) Gibt einen bestimmten HTTP-Header header der Antwort zurück
getAllResponseHeaders() Gibt alls HTTP-Header der Antwort zurück
open(method, url)
 Bereitet eine HTTP-Anfrage vor
method kann POST, GET, oder PUT sein
url ist die Adresse, die aufgerufen werden soll (kann GET-Parameter enthalten)
send(body)
 Sendet die HTTP-Anfrage
Der Parameter body kann POST-Daten enthalten, diese werden wie GET-Parameter in der URL formatiert. Sollen keine POST-Daten gesendet werden kann null angegeben werde.
setRequestHeader(header, value) Setzt einen HTTP-Header header für die HTTP-Anfrage auf einen bestimmten Wert value
Attribute des XMLHttpRequest-Objekts
Attributname
 Bedeutung/Funktion
readyState Aktueller Status des Objekts:
  • 0: Nicht initialisiert
  • 1: Objekt ist bereit, keine Daten gesendet
  • 2: Anfrage wurde gesendet
  • 3: Daten werden empfangen (onreadystatechange wird evtl. mehrmals aufgerufen)
  • 4: Alle Daten wurden empfangen
onreadystatechange Referenz auf eine Funktion, die aufgerufen wird, wenn sich etwas bei der HTTP-Anfrage ändert (Erfolg/Fehler/...), siehe readyState
responseText HTTP-Antwort als Text
responseXML HTTP-Antwort als XML, Zugriff per DOM möglich
status HTTP-Statuscode der Antwort (z.B. 200 für Ok, 404 für Not Found, ...)
statusText HTTP-Statustext der Antwort (z.B. Ok, Not Found, ...)

Beispiel

Ein einfacher XMLHttpRequest-Test könnte also wie folgt aussehen:

 
Dieses Beispiel ausprobieren
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
    <title>Nur ein Test</title>
    <script type="text/javascript">
    // Objekt erzeugen
    // hier ohne Fallunterscheidung, da für das Beispiel einfacher
    var xmlHttpObject = new XMLHttpRequest();

    // Funktion, die bei Statusänderungen reagiert
    function handleStateChange()
    {
        // Derzeitigen Status zurückgeben
        alert("xmlHttpObject.readyState = " + xmlHttpObject.readyState + (xmlHttpObject.readyState >= 3 ? " HTTP-Status = " + xmlHttpObject.status : ''));
    }
    
    // Wenn Dokument geladen ausführen
    window.onload = function() {
        // Anfrage vorbereiten, ruft www.webmasterpro.de auf
        xmlHttpObject.open('GET', '/');
        // Handler hinterlegen
        xmlHttpObject.onreadystatechange = handleStateChange;
        // Anfrage abschicken
        xmlHttpObject.send(null);
    }
    </script>
</head>
<body>
<p>Es sollte sich etwas tun</p>
</body>
</html>
Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "Das XMLHttpRequest - Objekt" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Das XMLHttpRequest - Objekt" hier bearbeiten.

Mitarbeiter
  • Fabian Ziegler
    Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
  • David Danier
    David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 GbR, sowie Webmasterpro.de.
  • Moritz Kern
    graphic, motion & web design - kernreaktor - staportal - mukitu
  • Jochen Bauer
    Als Student (Master of Computer Science) und Diplom-Oecotrophologe(FH) beschäftige ich mich mit Sport, Ernährung und dem Internet - hier insbesondere mit Blogs, CSS, PHP, SEO, WordPress, XHTML. Zur Finanzierung meines Studiums suche ich nach Arbeit rund ums Thema 'Websites'. Website: Jochen Bauer
  • Sebastian Bechtel
    Ich bin Oberstufenschüler aus Hessen, 18 Jahre alt und mache einen Aushilfsjob bei der Brot und Spiele GmbH als PHP Entwickler.

Kommentare: Das XMLHttpRequest - Objekt