AJAX - 服务器响应

onreadystatechange 属性

readyState 属性存留 XMLHttpRequest 的状态。

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

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

每当 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 属性

responseText 属性以 JavaScript 字符串的形式返回服务器响应，因此您可以这样使用它：

实例

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

responseXML 属性

XML HttpRequest 对象有一个內建的 XML 解析器。

ResponseXML 属性以 XML DOM 对象返回服务器响应。

使用此属性，您可以把响应解析为 XML DOM 对象：

实例

请求文件 music_list.xml，并对响应进行解析：

 <CATALOG>
 <TRACK>
 <TITLE>再见</TITLE>
 <ARTIST>邓紫棋</ARTIST>
 <ALBUM>新的心跳</ALBUM>
 <COUNTRY>中国</COUNTRY>
 <COMPANY>邓紫棋工作室</COMPANY>
 <YEAR>2016</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>All I Ask</TITLE>
 <ARTIST>Adele</ARTIST>
 <ALBUM>25</ALBUM>
 <COUNTRY>英国</COUNTRY>
 <COMPANY>XL Recordings</COMPANY>
 <YEAR>2015</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>之乎者也</TITLE>
 <ARTIST>罗大佑</ARTIST>
 <ALBUM>青春舞曲</ALBUM>
 <COUNTRY>中国</COUNTRY>
 <COMPANY>滚石唱片</COMPANY>
 <YEAR>1982</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>Never Be Alone</TITLE>
 <ARTIST>Shawn Mendes</ARTIST>
 <ALBUM>Handwritten</ALBUM>
 <COUNTRY>加拿大</COUNTRY>
 <COMPANY>环球唱片</COMPANY>
 <YEAR>2015</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>慢慢</TITLE>
 <ARTIST>张学友</ARTIST>
 <ALBUM>忘记你我做不到</ALBUM>
 <COUNTRY>中国</COUNTRY>
 <COMPANY>环球唱片</COMPANY>
 <YEAR>1996</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>Complicated</TITLE>
 <ARTIST>Avril Lavigne</ARTIST>
 <ALBUM>Let Go</ALBUM>
 <COUNTRY>加拿大</COUNTRY>
 <COMPANY>索尼音乐</COMPANY>
 <YEAR>2002</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>三生三世</TITLE>
 <ARTIST>张杰</ARTIST>
 <ALBUM>三生三世十里桃花</ALBUM>
 <COUNTRY>中国</COUNTRY>
 <COMPANY>仁溪音乐</COMPANY>
 <YEAR>2018</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>Five Hundred Miles</TITLE>
 <ARTIST>Justin Timberlake</ARTIST>
 <ALBUM>Inside Llewyn Davis</ALBUM>
 <COUNTRY>美国</COUNTRY>
 <COMPANY>华纳唱片</COMPANY>
 <YEAR>2013</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>演员</TITLE>
 <ARTIST>薛之谦</ARTIST>
 <ALBUM>绅士</ALBUM>
 <COUNTRY>中国</COUNTRY>
 <COMPANY>海蝶音乐</COMPANY>
 <YEAR>2016</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>Numb</TITLE>
 <ARTIST>Linkin Park</ARTIST>
 <ALBUM>Meteora</ALBUM>
 <COUNTRY>美国</COUNTRY>
 <COMPANY>华纳唱片</COMPANY>
 <YEAR>2003</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>给未来的自己</TITLE>
 <ARTIST>梁静茹</ARTIST>
 <ALBUM>崇拜</ALBUM>
 <COUNTRY>马来西亚</COUNTRY>
 <COMPANY>相信音乐</COMPANY>
 <YEAR>2007</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>The Monster</TITLE>
 <ARTIST>Rihanna</ARTIST>
 <ALBUM>The Marshall Mathers LP2</ALBUM>
 <COUNTRY>巴巴多斯</COUNTRY>
 <COMPANY>环球唱片</COMPANY>
 <YEAR>2013</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>我终于失去了你</TITLE>
 <ARTIST>赵传</ARTIST>
 <ALBUM>我终于失去了你</ALBUM>
 <COUNTRY>中国</COUNTRY>
 <COMPANY>滚石唱片</COMPANY>
 <YEAR>1989</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>Main Titles</TITLE>
 <ARTIST>Ramin Djawadi</ARTIST>
 <ALBUM>Game of Thrones</ALBUM>
 <COUNTRY>德国</COUNTRY>
 <COMPANY>索尼音乐</COMPANY>
 <YEAR>2011</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>传奇</TITLE>
 <ARTIST>李健</ARTIST>
 <ALBUM>似水流年</ALBUM>
 <COUNTRY>中国</COUNTRY>
 <COMPANY>北京完美坚持文化艺术工作室</COMPANY>
 <YEAR>2003</YEAR>
 </TRACK>
 <TRACK>
 <TITLE>完美生活</TITLE>
 <ARTIST>许巍</ARTIST>
 <ALBUM>时光漫步</ALBUM>
 <COUNTRY>中国</COUNTRY>
 <COMPANY>金牌大风</COMPANY>
 <YEAR>2002</YEAR>
 </TRACK>
 </CATALOG>

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

您将在本教程的 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();