JavaScript ajax http response

onreadystatechange 属性

readyState 属性持有XMLHttpRequest的状态.

onreadystatechange 属性定义了一个函数去执行，当readyState改变时.

status属性和statusText 属性持有XMLHttpRequest对象的状态.

属性	描述
onreadystatechange	定义一个函数去调用，当readyState属性改变时
readyState	持有XMLHttpRequest的状态. 0: 请求未初始化 1: 建立服务器连接 2: 收到请求 3: 处理请求 4: 请求完成并且响应完成
status	200: "OK" 403: "禁止" 404: "页面未找到"
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回调函数.

函数调用应该包含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字符串, 你也可以使用它:

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

让我试试

responseXML 属性

XML HttpRequest 对象有一个内建的XML解析器.

responseXML 属性返回的服务器响应为XML DOM对象.

使用此属性可以解析为XML DOM对象的响应:

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

让我试试

你将学到更多关于XML DOM在本教程的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();

让我试试