AJAX Grundkurs

AJAX - Server bearbeitet die Antwort

Dieses XMLHttpRequest-Objekt ermöglicht es Ihnen, Funktionen zu definieren, die auf die Antwort reagieren sollen.

Die Funktion onreadystatechange ist in den Eigenschaften des XMLHttpRequest-Objekts definiert.

Beispiel

httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　document.getElementById("output").innerHTML = this.responseText;
　　}
};

Testen Sie heraus‹/›

该onreadystatechange属性定义当readyState更改时要执行的函数。

该readyState属性保存XMLHttpRequest对象的状态。

该status属性保存XMLHttpRequest对象的状态代码。

该statusText属性保存XMLHttpRequest对象的状态文本。

属性	Beschreibung
onreadystatechange	定义当readyState属性更改时要调用的函数
readyState	保持XMLHttpRequest的状态： 0：请求未初始化 1：服务器连接建立 2：收到请求 3：处理请求 4：请求完成并且响应准备就绪
status	返回请求的状态号： 200：“OK” 403：“Forbidden” 404：“Not Found” 有关完整列表，请访问HTTP状态代码参考
statusText	返回状态文本（例如，“OK”或“Not Found”）

服务器响应属性

下表列出了服务器响应属性：

属性	Beschreibung
responseText	以字符串形式返回响应数据
responseXML	将响应数据作为XML数据返回

responseText属性

该responseText属性以JavaScript字符串形式返回服务器响应。

Beispiel

document.getElementById("output").innerHTML = httpRequest.responseText;

Testen Sie heraus‹/›

responseXML属性

该responseXML属性将服务器响应作为XMLDocument对象返回。

您可以使用JavaScript DOM函数遍历XMLDocument对象。

以下示例请求文件ajax_test.xml并解析响应：

Beispiel

xmlDoc = httpRequest.responseXML;
tag = xmlDoc.getElementsByTagName("author");
for (let i = 0; i < tag.length; i++) {
　　　　txt　+= tag[i].childNodes[0].nodeValue　+　"<br>";
}
httpRequest.open("GET", "ajax_test.xml", true);
httpRequest.send();

Testen Sie heraus‹/›

Methoden der Serverantwort

Die nachstehende Tabelle listet die Methoden der Serverantwort auf:

Methode	Beschreibung
getAllResponseHeaders()	Geben Sie Titelinformationen zurück
getResponseHeader()	Geben Sie spezifische Header-Informationen zurück

Die getAllResponseHeaders()-Methode

Die getAllResponseHeaders()-Methode gibt alle Header-Informationen aus der Serverantwort zurück.

Beispiel

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　　document.getElementById("output").innerHTML = this.getAllResponseHeaders();
　　}
};

Testen Sie heraus‹/›

Die getResponseHeader()-Methode

Die getResponseHeader()-Methode gibt spezifische Header-Informationen aus der Serverantwort zurück.

Beispiel

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　　document.getElementById("output").innerHTML = this.getResponseHeader("Server");
　　}
};

Testen Sie heraus‹/›

Mehrere AJAX-Aufgaben

Wenn auf der Website mehrere AJAX-Aufgaben vorhanden sind, sollten zwei Funktionen erstellt werden:

Eine Funktion, um das XMLHttpRequest-Objekt auszuführen
Jede AJAX-Aufgabe hat eine Rückruffunktion

Die Funktion aufrufen sollte die URL und die Funktion enthalten, die nach der Bereitschaft der Antwort aufgerufen wird.

Beispiel

fetchDoc("url-1", myFunc1);
fetchDoc("url-2", myFunc2);
fetchDoc("url-3", myFunc3);
function fetchDoc(url, callback) {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　　　　　callback(this);
　　　　}
　　};
　　httpRequest.open("GET", url, true);
　　httpRequest.send();
}
function myFunc1(httpRequest) {
　　//　action geht hier
}
function myFunc2(httpRequest) {
　　//　action geht hier
}
function myFunc3(httpRequest) {
　　//　action geht hier
}

Testen Sie heraus‹/›

Rückruffunktionen werden als Parameter an eine andere Funktion übergeben.

AJAX PHP AJAX-Anfrage senden