AJAX 獲取伺服器響應資料

admin發表於2019-02-15
伺服器

XMLHttpRequest物件的responseText或者responseXML屬性可以獲取來自伺服器的響應內容。

兩個屬性功能列表如下：

屬性描述
responseText  獲得字串形式的響應資料。
responseXML獲得XML形式的響應資料。


一.responseText屬性:

如果來自伺服器響應內容不是XML，那麼要使用responseText屬性來獲取。

此屬性返回值是字串格式的，使用方式演示如下：

[JavaScript] 純文字檢視 複製程式碼
document.getElementById("show").innerHTML=xmlhttp.responseText;

完整程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function loadXMLDoc(){
  var xmlhttp;
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("show").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","demo/ajax/txt/demo.txt",true);
  xmlhttp.send();
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div id="show"><h2>原來的內容</h2></div>
<button type="button" id="bt">檢視效果</button>
</body>
</html>

點選按鈕可以獲取文字檔案中的內容，並通過responseText屬性寫入到div中。

二.responseXML屬性:

如果來自伺服器的響應是XML，並且需要作為XML物件進行解析，需要使用responseXML屬性。

程式碼片段如下：

[JavaScript] 純文字檢視 複製程式碼
var xmlDoc = xmlhttp.responseXML;

responseXML屬性的返回值是一個XML物件，完整物件例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var xmlDoc = xmlhttp.responseXML;
      var str = "";
      var targets = xmlDoc.getElementsByTagName("target");
      for (index = 0; index < targets.length; index++) {
        str = str + targets[index].childNodes[0].nodeValue + "<br>";
      }
      document.getElementById("show").innerHTML = str;
    }
  }
  xmlhttp.open("GET", "demo/ajax/xml/XML.xml", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="檢視效果"/>
</div>
</body>
</html>

點選按鈕可以測試相應的效果。

相關文章