AJAX - 服务器 响应
onreadystatechange 属性
readyState 属性保存 XMLHttpRequest 的状态。
onreadystatechange 属性定义一个函数，当 readyState 发生改变时执行。
status 属性和 statusText 属性保存 XMLHttpRequest 对象的状态。
| 属性 | 描述 |
|---|---|
| onreadystatechange | 定义一个函数，当 readyState 属性发生改变时调用 |
| readyState | 保存 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成，响应已准备就绪 |
| status | 200: "OK" 403: "禁止" 404: "页面未找到" 有关完整列表，请访问 Http 消息参考 |
| statusText | 返回状态文本（例如，“OK”或“未找到”） |
onreadystatechange 函数在每次 readyState 发生改变时被调用。
当 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();
}
自己试试 »
上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件，内容如下
<h1>AJAX</h1>
<p>AJAX 不是一种编程语言。</p>
<p>AJAX 是一种从网页访问 web 服务器的技术。</p>
<p>AJAX 代表异步 JavaScript 和 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) {
// 这里执行操作
}
function myFunction2(xhttp) {
// 这里执行操作
}
自己试试 »
服务器响应属性
| 属性 | 描述 |
|---|---|
| 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() {
如果 (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
自己试试 »
getResponseHeader() 方法
getResponseHeader() 方法返回服务器响应中的特定头信息。
示例
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
如果 (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
自己试试 »
