XML DOM - Httprequest-Objekte
Durch XMLHttpRequest-Objekt, können Sie einen Abschnitt einer Web-Seite zu aktualisieren, ohne die gesamte Seite neu zu laden.
XMLHttpRequest-Objekt
XMLHttpRequest-Objekt wird verwendet, um Daten mit dem Server hinter den Kulissen auszutauschen.
XMLHttpRequest - Objekt ist einTraum für jeden Entwickler,weil Sie folgende Möglichkeiten:
- Update-Webseite, ohne die Seite neu zu laden
- Nachdem die Seite vom Server Anforderungsdaten geladen
- Nachdem die Seite geladen wurde empfangenen Daten von dem Server
- Senden von Daten an den Server im Hintergrund
Erstellen Sie XMLHttpRequest-Objekt
Alle modernen Browser (IE7 +, Firefox, Chrome, Safari und Opera) verfügt über eine integrierte in XMLHttpRequest-Objekt.
Erstellen Sie XMLHttpRequest-Objekt Syntax
Ältere Versionen von Internet Explorer (IE 5 und IE6) unter Verwendung von ActiveX-Objekte:
Um alle modernen Browser handhaben, einschließlich IE5 und IE6, überprüfen Sie bitte, ob der Browser das XMLHttpRequest-Objekt unterstützt. Wenn ja, dann ein XMLHttpRequest-Objekt zu erstellen, wenn es nicht der Fall ist, erstellen Sie ein ActiveX-Objekt:
Beispiele
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Versuchen »
Senden Sie eine Anfrage an den Server
Um eine Anfrage an den Server zu senden, verwenden wir die offene das XMLHttpRequest-Objekt () und send () -Methode:
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型，URL，请求是否应该进行异步处理。 method：请求的类型：GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） |
| send(string) | 发送请求到服务器。 string：仅用于 POST 请求 |
GET oder POST?
GET einfacher als POST und schnell und kann in den meisten Fällen verwendet werden.
verwenden jedoch immer POST-Anfrage unter den folgenden Bedingungen:
- Im Cache-Dateien ist keine Option (oder Datenbankdatei auf dem Update-Server)
- Die Menge der Daten an den Server (Post keine Größenbeschränkung) große gesendet
- Senden von Benutzereingaben (können unbekannte Zeichen enthalten), POST stärker und sicherer als GET
URL - Datei auf dem Server
url Argument Methode open () ist die Adresse einer Datei auf dem Server:
Die Datei kann jede Art von Datei sein (wie .txt und .xml) oder Server-Skriptdateien (wie .html und .php, können Aktionen auf dem Server durchführen, bevor die Antwort zurückschicken).
Asynchronous - Richtig oder falsch?
Für asynchrone Übertragungsanforderung muss async Argument open () -Methode auf true gesetzt werden:
eine asynchrone Anforderung für einen Web-Entwickler senden ist ein großer Schritt nach vorn. Auf dem Server viele der Aufgaben auszuführen sind sehr zeitaufwendig.
Durch asynchron gesendet wird, muss JavaScript nicht für die Antwort des Servers zu warten, sondern kann ersetzt werden durch:
- Während für die Antwort vom Server warten, zusätzliche Skripte auszuführen
- Bereit, die Antwort zu handhaben, wenn die Antwort
Async = true
Wenn async verwenden = true, wenn in Reaktion auf eine Funktion onreadystatechange Ereignis vorbestimmten bereit ausgeführt werden:
Beispiele
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
Versuchen »
Async = false
Für den dritten Parameter async = false, ändern Sie die Methode open () ist falsch:
Nicht async = false empfohlen, aber wenn mehrere kleine Anfrage oder gehandhabt.
Denken Sie daran, JavaScript in der Antwort des Servers wird nicht fortgesetzt, bis Sie fertig sind. Wenn der Server ausgelastet oder langsam ist, wird die Anwendung angehalten oder gestoppt werden.
Hinweis: Wenn Sie die async verwenden = false, do onreadystatechange Funktion nicht schreiben - einfach den Code platzieren müssen nach der send () Aussagen zu:
Beispiele
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Versuchen »
Server-Antwort
Um eine Antwort vom Server erhalten, verwenden Sie die Eigenschaft response oder responseXML des XMLHttpRequest-Objekt.
| 属性 | 描述 |
|---|---|
| responseText | 获取响应数据作为字符串 |
| responseXML | 获取响应数据作为 XML 数据 |
Eigenschaft response
Wenn die Antwort vom Server nicht XML ist, verwenden Sie bitte die Eigenschaft response.
response Eigenschaft gibt die Antwort als String, können Sie es entsprechend:
Eigenschaft responseXML
Wenn die Antwort nicht XML vom Server ist, und Sie wollen es in ein XML-Objekt zu beheben, verwenden Sie responseXML Eigenschaften:
Beispiele
Fordern Datei cd_catalog.xml und analysieren die Antwort:
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("myDiv").innerHTML=txt;
Versuchen »
onreadystatechange Veranstaltung
Wenn die Anforderung an den Server gesendet wird, müssen wir eine Aktion ausführen auf die Reaktion basiert.
onreadystatechange Ereignis wird jedes Mal die Readystate Veränderungen ausgelöst.
XMLHttpRequest Eigenschaft readystate hält den Status an.
Drei wichtige Eigenschaften des XMLHttpRequest-Objekt:
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用 |
| readyState | 存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪 |
| status | 200："OK" 404：找不到页面 |
Im onreadystatechange Ereignis, geben wir, was passieren wird, wenn die Zeit ist bereit, Server-Antwort zu verarbeiten.
Wenn die Readystate 4 oder 200 Zustand ist die Antwort bereit:
Beispiele
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
Versuchen »
Hinweis: onreadystatechange Ereignis ausgelöst wird bei jedem Start des Readystate Veränderungen, ausgelöst insgesamt viermal.
Weitere Beispiele
Durch getAllResponseHeaders () Header - Informationen abrufen
Um die Ressource (Dokument) Header-Informationen abgerufen werden.
() Ruft den angegebenen Header - Informationen getResponseHeader
die Ressource (Datei) Zum Abrufen der Header-Informationen angeben.
Inhalt Retrieval ASP - Datei
Wenn Benutzer geben Zeichen in das Eingabefeld ein, wie Web-Seiten mit dem Web-Server zu kommunizieren.
Abrufen von Inhalten aus der Datenbank
Webseite, wie Informationen aus der Datenbank durch das XMLHttpRequest-Objekt zu extrahieren.
Inhalt Retrieval XML - Datei
Erstellen Sie eine XMLHttpRequest Daten aus der XML-Datei abrufen und die Daten in einer HTML-Tabelle angezeigt werden soll.