AJAX 服务器响应
onreadystatechange 属性
readyState 属性保存XMLHttpRequest的状态。
onreadystatechange 属性定义当readyState更改时要执行的函数。
status 属性和statusText属性保存XMLHttpRequest对象的状态。
| 属性 | 描述 |
|---|---|
| onreadystatechange | 定义readyState属性更改时要调用的函数 |
| readyState | 保存XMLHttpRequest的状态。 0: 请求未初始化 1: 已建立服务器连接 2: 已收到请求 3: 正在处理请求 4: 请求已完成，响应已准备就绪 |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" 有关完整列表，请转到 Http 消息参考 |
| statusText | 返回状态文本（例如"确定"或"未找到"） |
每次readyState更改时都会调用onreadystatechange函数。
当readyState为4且status为200时，响应就绪:
实例
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
尝试一下 »
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
}
尝试一下 »
服务器响应属性
| 属性 | 描述 |
|---|---|
| responseText | 以字符串形式获取响应数据 |
| responseXML | 以XML数据的形式获取响应数据 |
服务器响应方法
| 方法 | 描述 |
|---|---|
| getResponseHeader() | 从服务器资源返回特定的头信息 |
| getAllResponseHeaders() | 返回服务器资源中的所有标头信息 |
responseText 属性
responseText 属性将服务器响应作为JavaScript字符串返回，您可以相应地使用它:
responseXML 属性
XML HttpRequest 对象有一个内置的XML解析器。
responseXML 属性将服务器响应作为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() 方法
getAllResponseHeaders() 方法从服务器响应返回所有头信息。
实例
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
尝试一下 »
getResponseHeader() 方法
getResponseHeader() 方法从服务器响应返回特定的头信息。
实例
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
尝试一下 »
