AJAX - 服务器响应

onreadystatechange 属性

readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

shù xìng miáo shù
onreadystatechange 定义了当 readyState 属性发生改变时所调用的函数。
readyState

保存了 XMLHttpRequest 的状态。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 正在处理请求
  • 4: 请求已完成且响应已就绪
status
  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Page not found"

如需完整列表，请访问 Http 消息参考手册
statusText 返回状态文本（例如 "OK" 或 "Not Found"）

每当 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 被触发五次（0-4），每次 readyState 都发生变化。

使用回调函数

回调函数是一种作为参数被传递到另一个函数的函数。

如果您的网站中有多个 AJAX 任务，那么您应该创建一个执行 XMLHttpRequest 对象的函数，以及一个供每个 AJAX 任务的回调函数。

zhè ge hán shù yīng gāo bāo hán URL yǐ jīng xíng yǒu xíng yìng jiù de hán shù jiù zhào.

实例

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) {
  // xíng dòng zài zhè lǐ
 } 
function myFunction2(xhttp) {
  // xíng dòng zài zhè lǐ
 }

亲自试一试

fàn wéi yìng xiǎng shù xìng

shù xìng miáo shù
responseText huò dé zì fú chuán shù xíng de fàn wéi shù jù
responseXML huò dé xiāng xíng de fàn wéi shù jù

fàn wéi yìng xiǎng fān fǎ

fān fǎ miáo shù
getResponseHeader() cóng fàn wéi huí huán zhǔ yì de tóu bù xìng xìng
getAllResponseHeaders() cóng fàn wéi huí huán suǒ yǒu tóu bù xìng xìng

responseText shù xìng

responseText shù xìng yǐ JavaScript zì fú chuán shù de xíng shì huí huán fàn wéi shǒu，rú cǐ nǐ kě yǐ zhè yàng shǐ yòng tā:

实例

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

亲自试一试

responseXML shù xìng

XML HttpRequest duì xiàng yǒu nèi jiàn de XML jiě xì shī.

ResponseXML shù xìng yǐ XML DOM duì xiàng huí huán fàn wéi shǒu.

shǐ yòng zhè ge shù xìng，nǐ kě yǐ bǎ xiang yingjie xìwéi XML DOM duì xiàng:

实例

qing qiu wén jian music_list.xml，wa dui xiang ying jing jie:

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", "music_list.xml", true);
xhttp.send();

亲自试一试

Ana za za zai zhe ben jiao cheng de DOM zhang jie xue dao gen gao guan XML DOM de zhi shi.

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();

亲自试一试