Alle modernen Browser haben einen eingebauten in XMLHttpRequest-Objekt Daten von einem Server anzufordern.
Alle gängigen Browser verfügen über einen integrierten XML-Parser für den Zugriff auf und XML zu manipulieren.
Das XMLHttpRequest-Objekt
Das XMLHttpRequest-Objekt kann Daten verwendet werden, die von einem Webserver zu beantragen.
Das XMLHttpRequest - Objekt ist a developers dream , weil Sie folgende Möglichkeiten:
- Aktualisieren einer Webseite, ohne die Seite neu zu laden
- Fordern Sie Daten von einem Server - nachdem die Seite geladen
- Empfangen von Daten von einem Server - nachdem die Seite geladen wurde
- Senden von Daten an einen Server - im Hintergrund
XMLHttpRequest Beispiel
Wenn Sie ein Zeichen in das Eingabefeld unten eingeben, wird ein XMLHttpRequest an den Server gesendet, und einige Namensvorschläge zurückgegeben werden (from the server) :
Beispiel
Start typing a name in the input field below:
Suggestions:
Senden einer XMLHttpRequest
Alle modernen Browser haben einen eingebauten in XMLHttpRequest-Objekt.
Eine gemeinsame JavaScript-Syntax für sie verwenden sieht ähnlich wie folgt aus:
Beispiel
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); Versuch es selber " Erstellen eines XMLHttpRequest-Objekt
Die erste Zeile in dem obigen Beispiel erzeugt eine XMLHttpRequest objet:
var xhttp = new XMLHttpRequest();
Die onreadystatechange Ereignis
Die Readystate Eigenschaft hält den Status des XMLHttpRequest.
Die onreadystatechange Ereignis wird jedesmal , wenn der Readystate Veränderungen ausgelöst.
Während einer Serveranforderung ändert der Readystate 0-4:
0: Anforderung nicht initialisiert
1: Server-Verbindung hergestellt
2: Anforderung empfangen
3: Verarbeitungsanforderung
4: fordern fertig und Antwort bereit ist,
In der Eigenschaft onreadystatechange, geben Sie eine Funktion ausgeführt wird, wenn der Readystate ändert:
xhttp.onreadystatechange = function()
Wenn Readystate 4 und Status ist 200, ist die Antwort bereit:
if (xhttp.readyState == 4 && xhttp.status == 200)
XMLHttpRequest Eigenschaften und Methoden
| Methode | Beschreibung |
|---|---|
| new XMLHttpRequest() | Erstellt ein neues XMLHttpRequest-Objekt |
| open( method, url, async ) | Gibt die Art der Anfrage method : die Art der Anfrage: GET oder POST url : der Speicherort der Datei async : true (asynchronous) oder falsch (synchronous) |
| send() | Sendet eine Anfrage an den Server (used for GET) |
| send( string ) | Sendet eine Anforderung String an den Server (used for POST) |
| onreadystatechange | Eine Funktion wird aufgerufen, wenn die Readystate-Eigenschaft ändert |
| readyState | Der Status der XMLHttpRequest 0: Anforderung nicht initialisiert 1: Server-Verbindung hergestellt 2: Anforderung empfangen 3: Verarbeitungsanforderung 4: fordern fertig und Antwort bereit ist, |
| status | 200: OK 404 Seite nicht gefunden |
| responseText | Die Antwortdaten als String |
| responseXML | Die Antwortdaten als XML-Daten |
Der Zugang in Domänen
Aus Sicherheitsgründen keinen Zugriff auf Domänen modernen Browsern ermöglichen.
Dies bedeutet, dass sowohl die Web-Seite und die XML-Datei, um sie versucht, zu laden, muss sich auf demselben Server befinden.
Die Beispiele auf w3ii alle offenen XML-Dateien auf dem w3ii Domäne.
Wenn Sie das Beispiel oben auf einem Ihrer eigenen Web-Seiten verwenden möchten, die XML-Dateien, die Sie laden müssen auf Ihrem eigenen Server befinden.
Die Eigenschaft response
Die Eigenschaft response gibt die Antwort als String zurück.
Wenn Sie die Antwort als eine Textzeichenfolge verwenden möchten, verwenden Sie die Eigenschaft response:
Die Eigenschaft responseXML
Die responseXML Eigenschaft gibt die Antwort als XML-DOM-Objekt.
Wenn Sie die Antwort als XML-DOM-Objekt verwenden möchten, verwenden Sie die Eigenschaft responseXML:
Beispiel
Fordern Sie die Datei cd_catalog.xml und verwenden Sie die Antwort als XML - DOM - Objekt:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt; Versuch es selber " GET oder POST?
GET ist einfacher und schneller als POST und kann in den meisten Fällen verwendet werden.
Allerdings immer POST-Anfragen verwenden, wenn:
- Eine Cache - Datei ist keine Option (update a file or database on the server)
- Senden einer großen Menge von Daten an den Server (POST hat keine Größenbeschränkung)
- Senden von Benutzereingaben (which can contain unknown characters) , ist POST robuster und sicherer als GET
Die URL - eine Datei auf einem Server
Die URL - Parameter der open() Methode ist eine Adresse in einer Datei auf einem Server:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Die Datei kann jede Art von Datei sein, wie .txt und .xml oder Server-Scripting-Dateien wie .asp und .php (die Aktionen auf dem Server vor dem Senden der Antwort zurück ausführen kann).
Asynchronous - Richtig oder falsch?
Um die Anforderung zu senden asynchron, der Asynchron - Parameter der open() hat Methode auf true gesetzt werden:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
asynchron fordert zu senden ist eine enorme Verbesserung für Web-Entwickler. Viele der Aufgaben auf dem Server durchgeführt sind sehr zeitaufwendig.
Durch das Senden asynchron, wird der JavaScript nicht für die Server-Antwort zu warten, sondern kann stattdessen:
- ausführen andere Skripts, während für die Server-Antwort wartet
- befassen sich mit der Reaktion, wenn die Antwort bereit ist,
Async = true
Wenn Asynchron mit = true, geben Sie eine Funktion auszuführen, wenn die Antwort in der onreadystatechange Ereignis bereit ist:
Beispiel
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); Versuch es selber " Async = false
Um async = false verwenden, ändern Sie den dritten Parameter in der open() Methode auf false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Mit async = false wird nicht empfohlen, aber für ein paar kleine Wünsche kann dies in Ordnung sein.
Denken Sie daran, dass die JavaScript wird nicht weiterhin ausgeführt, bis der Server-Antwort bereit ist. Wenn der Server ausgelastet oder langsam ist, wird die Anwendung hängen oder zu stoppen.
Note: Wenn Sie async = false, schreiben Sie nicht eine onreadystatechange Funktion - einfach den Code nach der send() Erklärung:
Beispiel
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; Versuch es selber " XML Parser
Alle modernen Browser haben einen integrierten XML-Parser.
Das XML Document Object Model (the XML DOM) - (the XML DOM) enthält eine Menge von Methoden für den Zugriff auf und Bearbeiten von XML.
Bevor jedoch ein XML-Dokument zugegriffen werden kann, muss sie in ein XML-DOM-Objekt geladen werden.
Ein XML-Parser kann Klartext lesen und in einem XML-DOM-Objekt konvertieren.
Parsing einen Text-String
Dieses Beispiel analysiert eine Textzeichenfolge in ein XML-DOM-Objekt, und extrahiert die Daten aus es mit JavaScript:
Beispiel
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Versuch es selber " Alte Browser (IE5 and IE6)
Alte Versionen von Internet Explorer (IE5 and IE6) unterstützen das XMLHttpRequest - Objekt.
So behandeln Sie IE5 und IE6, prüfen Sie, ob der Browser das XMLHttpRequest-Objekt unterstützt, oder eine ActiveXObject erstellen:
Beispiel
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} Versuch es selber " Alte Versionen von Internet Explorer (IE5 and IE6) unterstützen nicht die DOMParser Objekt.
So behandeln Sie IE5 und IE6, prüfen Sie, ob der Browser das DOMParser Objekt unterstützt, oder eine ActiveXObject erstellen:
Beispiel
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Versuch es selber " 
Mehr Beispiele
Abrufen Header - Informationen mit getAllResponseHeaders()
Abrufen Header - Informationen einer Ressource (file) .
Abrufen spezifischen Header - Informationen mit getResponseHeader()
Abrufen spezifischen Header - Informationen einer Ressource (file) .
Rufen Sie den Inhalt einer ASP - Datei
Wie eine Web-Seite kann mit einem Web-Server, während ein Benutzer Typ Zeichen in einem Eingabefeld kommunizieren.
Abrufen von Inhalten aus einer Datenbank
Wie eine Web-Seite kann Informationen aus einer Datenbank mit dem XMLHttpRequest-Objekt abzurufen.
Rufen Sie den Inhalt einer XML - Datei
Erstellen Sie eine XMLHttpRequest Daten aus einer XML-Datei abrufen und die Daten in einer HTML-Tabelle angezeigt werden soll.