XMLHttpRequest-Objekt
- Vorherige Seite DOM-Klonknoten
- Nächste Seite DOM-Handbuchverzeichnis
Das XMLHttpRequest-Objekt bietet Methoden zur Kommunikation mit dem Server nach dem Laden der Webseite.
Was ist das XMLHttpRequest-Objekt?
Das XMLHttpRequest-Objekt istDer Traum des Entwicklers, weil Sie können:
- Webseiten werden ohne Neuladen der Seite aktualisiert
- Daten werden nach dem Laden der Seite vom Server angefordert
- Daten werden nach dem Laden der Seite vom Server empfangen
- Daten werden im Hintergrund an den Server gesendet
Alle modernen Browser unterstützen das XMLHttpRequest-Objekt.
Beispiel:Kommunikation mit dem Server über XML HTTP, wenn Texte eingetippt werden.
Erstellen von XMLHttpRequest-Objekten
Mit einer einfachen Zeile JavaScript-Code können wir XMLHttpRequest-Objekte erstellen.
In allen modernen Browsern (einschließlich IE 7):
xmlhttp=new XMLHttpRequest();
Im Internet Explorer 5 und 6:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
Beispiel
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// Code für alle neuen Browser}
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// Code für IE5 und IE6}
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Dein Browser unterstützt XMLHTTP nicht.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"}
if (xmlhttp.status==200)
{// 200 = OK}
// ...hier unser Code...
}
else
{
alert("Problem beim Abrufen von XML-Daten");
}
}
}
</script>
Kommentare:onreadystatechange ist ein Ereignis-Handler. Sein Wert (state_Change) ist der Name einer Funktion, die ausgelöst wird, wenn der Status des XMLHttpRequest-Objekts sich ändert. Der Status variiert von 0 (uninitialisiert) bis 4 (vollständig). Nur im Status 4 führen wir den Code aus.
Warum Async=true verwenden?
Unser Beispiel verwendet "true" im dritten Parameter von open().
Dieser Parameter legt fest, ob die Anfrage asynchron bearbeitet wird.
True bedeutet, dass das Skript nach dem send()-Methodenaufruf fortgesetzt wird, ohne auf die Antwort des Servers zu warten.
Das onreadystatechange-Event kompliziert den Code. Aber es ist die sicherste Methode, um sicherzustellen, dass der Code nicht ohne Antwort des Servers anhält.
Durch die Angabe dieses Parameters auf "false" können Sie zusätzlichen onreadystatechange-Code vermeiden. Wenn es irrelevant ist, ob der Rest des Codes bei einem fehlgeschlagenen Request ausgeführt wird, können Sie diesen Parameter verwenden.
Mehr Beispiele
Eine Textdatei mit XML HTTP in ein div-Element laden
HEAD-Anfragen mit XML HTTP durchführen
XML / ASP
Sie können auch die XML-Dokumente öffnen und an die ASP-Seite auf dem Server senden, diese Anfrage analysieren und dann das Ergebnis zurücksenden.
<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
// code for IE7, Firefox, Opera, etc.
xmlHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
// code for IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp!=null)
{
xmlHttp.open("GET", "note.xml", false);
xmlHttp.send(null);
xmlDoc=xmlHttp.responseText;
xmlHttp.open("POST", "demo_dom_http.asp", false);
xmlHttp.send(xmlDoc);
document.write(xmlHttp.responseText);
}
else
{
alert("Dein Browser unterstützt XMLHTTP nicht.");
}
</script>
</body>
</html>
ASP-Seite, geschrieben in VBScript:
<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for each x in xmldoc.documentElement.childNodes
if x.NodeName = "to" then name=x.text
next
response.write(name)
%>
Durch die Verwendung der Eigenschaft response.write werden die Ergebnisse an den Client zurückgegeben.
Ist das XMLHttpRequest-Objekt ein Standard der W3C?
Keine der von W3C empfohlenen Standards regelt das XMLHttpRequest-Objekt.
Allerdings enthält die "Load and Save"-Spezifikation des W3C DOM Level 3 einige ähnliche funktionalitäten, aber keine Browser haben sie implementiert.
- Vorherige Seite DOM-Klonknoten
- Nächste Seite DOM-Handbuchverzeichnis
