AJAX - 服务器响应

onreadystatechange 属性

这个就绪状态属性保存 XMLHttpRequest 的状态。

这个就绪状态改变属性定义了当readyState改变时要执行的函数。

这个地位属性和状态文本属性保存 XMLHttpRequest 对象的状态。

Property	Description
onreadystatechange	Defines a function to be called when the readyState property changes
readyState	Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready
status	200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference
statusText	Returns the status-text (e.g. "OK" or "Not Found")

每次readyState改变时都会调用onreadystatechange函数。

当readyState为4且status为200时，响应就绪：

示例

亲自试一试 »

上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件，如下所示：

<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a technique for accessing web servers from a web page.</p>
<p>AJAX stands for Asynchronous JavaScript And XML.</p>

onreadystatechange 事件被触发四次 (1-4)，readyState 每次更改一次。

使用回调函数

回调函数是作为参数传递给另一个函数的函数。

如果网站中有多个 AJAX 任务，则应创建一个用于执行 XMLHttpRequest 对象的函数，并为每个 AJAX 任务创建一个回调函数。

函数调用应包含 URL 以及响应准备好时要调用的函数。

示例

loadDoc(" url-1", myFunction1);

loadDoc(" url-2", myFunction2);

function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
};
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}

亲自试一试 »

服务器响应属性

Property	Description
responseText	get the response data as a string
responseXML	get the response data as XML data

服务器响应方法

Method	Description
getResponseHeader()	Returns specific header information from the server resource
getAllResponseHeaders()	Returns all the header information from the server resource

响应文本属性

这个响应文本属性以 JavaScript 字符串形式返回服务器响应，您可以相应地使用它：

示例

document.getElementById("demo").innerHTML = xhttp.responseText;

亲自试一试 »

responseXML 属性

XML HttpRequest 对象有一个内置的 XML 解析器。

这个响应XML属性以 XML DOM 对象的形式返回服务器响应。

使用此属性，您可以将响应解析为 XML DOM 对象：

示例

索取文件cd_catalog.xml并解析响应：

xmlDoc = xhttp.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;
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();

亲自试一试 »

您将在本教程的 DOM 章节中了解有关 XML DOM 的更多信息。

getAllResponseHeaders() 方法

这个获取所有响应头()方法返回服务器响应的所有标头信息。

示例

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

亲自试一试 »

getResponseHeader() 方法

这个获取响应头()方法从服务器响应中返回特定的标头信息。

示例

亲自试一试 »