橘子味的心

    • 二十五岁时我们都一样愚蠢、多愁善感，喜欢故弄玄虚，可如果不那样的话，五十岁时也就不会如此明智。

    标题：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();

    让我试试

    目录

    分类

      © 2020-2024 橘子味的心

    • 黔ICP备17008247号-2
    • 贵公网安备52022102000140