## AJAX - 服務器響應
由于 HTTP 響應是由服務端發出的，并且服務器做出響應需要時間（比如網速慢等原因），所以我們需要監聽服務器響應的狀態，然后才能進行處理。
* **狀態行**
`xhr.status`狀態碼，如200，304，404等；
* **響應主體**
`xhr.responseText`與`xhr.responseXML`都表示響應主體。
如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的`responseText`或`responseXML`屬性。
| 屬性 | 描述 |
| --- | --- |
| responseText | 獲得字符串形式的響應數據。 |
| responseXML | 獲得 XML 形式的響應數據。 |
## responseText 屬性
如果來自服務器的響應并非 XML，請使用`responseText`屬性。
` responseText`屬性返回字符串形式的響應，因此您可以這樣使用：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tryrun 1</title>
</head>
<body>
<div id="view">
<p>點擊下面的按鈕，將 Ajax 請求回來的數據更新在該文本內</p>
</div>
<button type="button" id="btn">發起 Ajax 請求</button>
<script>
document.getElementById("btn").onclick = ajaxRequest;
function ajaxRequest () {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.w3cschool.cn/statics/demosource/ajax_info.txt", true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("view").innerHTML = xhr.responseText;
}
}
}
</script>
</body>
```
提示：對于`responseText`屬性，只有當[`readyState`屬性](https://www.w3cschool.cn/ajax/ajax-xmlhttprequest-onreadystatechange.html)值變為4時，`responseText`屬性才可用，因為這表明AJAX請求已經結束！
## responseXML 屬性
如果來自服務器的響應是 XML，而且需要作為 XML 對象進行解析，請使用`responseXML`屬性：
請求[cd\_catalog.xml](https://www.w3cschool.cn/statics/demosource/cd_catalog.xml)文件，并解析響應：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","/statics/demosource/cd_catalog.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
</body>
</html>
```
