AJAX - 伺服器 回應

如需取得來自伺服器的回應,請使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。

ResponseText和ResponseXML 

#  回應資訊的內容可能有多種不同的形式,例如XML、純文字、(X)HTML或JavaScript物件符號(JSON) 。我們可以根據所接收到的資料格式的不同,用兩種不同的方法來處理:使用 responseText或responseXML。

responseText方法用於那些並非基於XML的格式。它把回應訊息當作字串,回傳精確的 內容。純文字、(X)HTML和JSON都使用responseText。 responseText不僅可以為頁面添加內容,它在調試AJAX請求的時候也有用處。例如,你可能還沒準備好分析數據,因為你還不知道所有的標籤 是什麼樣的,是XML格式的還是JSON檔案。這就要求有一種用來偵測被分析資料的途徑。一旦你知道了所有的標籤名稱,所需要做的事情就只是編寫程式碼 了。  

responseXML的使用也相當簡單。但是與JSON格式類似,XML要求進行資料分析。我們需要執行的第一項事務是辨識出XML回應資訊中的根節點。

var response = ajax.request.responseXML.documentElement;

下一步,我們透過名稱取得所有的元素並得到它們的值: 
#var header = response.getElementsByTagName('header')[0].firstChild.data; 

var description = response.getElementsBy#var description = response.getElementsBy

#var description = response.getElementsBy#var description = response.getElementsBy

#var description = response.getElementsBy

#var description = response.getElementsBy
#var description = response.getElementsBy
#var description = response。 ')[0].firstChild.data; 


var sourceUrl = response.getElementsByTagName('sourceUrl')[0].firstChild.data;

############# ###最後,我們把回應訊息顯示在對應的div標記中:#########$("body").html("<b>" + header + "</b> <br/>"###                 + description + "<br/>< '" + sourceUrl + "'>Download the source files< ;/a>";############responseText 屬性傳回字串形式的回應:#########
<!DOCTYPE html>
<html>
<head>
    <script>
        function loadXMLDoc()
        {
            var xmlhttp;
            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)
                {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","ajax_info.txt",true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
###如果來自伺服器的回應是XML,而且需要作為XML 物件進行解析,請使用responseXML 屬性######請求 cd_catalog.xml 文件,並解析回應:###
<!DOCTYPE html>
<html>
<head>
<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","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>
#########實例:##########
<!DOCTYPE HTML>
<html>
 <head>
 <meta charset=utf-8" />
 <title>Using responseText with innerHTML</title>
 <script type="text/javascript">
 var xmlHttp;
 function createXMLHttpRequest(){
     if(window.ActiveXObject){
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     }else if(window.XMLHttpRequest){
     xmlHttp = new XMLHttpRequest();
     }
  }
     function startRequest(){
         createXMLHttpRequest();
         xmlHttp.onreadystatechange = handleStateChange;
         xmlHttp.open("GET","innerHTML.xml",true);
         xmlHttp.send(null);
     }
     function handleStateChange(){
         if(xmlHttp.readyState == 4){
             if(xmlHttp.status == 200){
             document.getElementById("results").innerHTML=xmlHttp.responseText;
             }
         }
    }
 </script>
 </head>
 <body>
     <form>
        <input type="button" value="Search for Today's Activities" onclick="startRequest();"/>
     </form>
     <div id="results"></div>
 </body>
</html>

innerHTML.xml檔

<?xml version="1.0" encoding="utf-8"?>
<table border="1">
 <tbody>
 <tr><th>Activity Name</th><th>Location</th><th>Time</th></tr>
 <tr><td>Waterskiing</td><td>Dock #1</td><td>9:00 AM</td></tr>
 <tr><td>Volleyball</td><td>East Court</td><td>2:00 PM</td></tr>
 <tr><td>Hiking</td><td>Trail 3</td><td>3:30 PM</td></tr>
 </tbody>
</table>


#
繼續學習
||
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Using responseText with innerHTML</title> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } } function startRequest(){ createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET","innerHTML.xml",true); xmlHttp.send(null); } function handleStateChange(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ document.getElementById("results").innerHTML=xmlHttp.responseText; } } } </script> </head> <body> <form> <input type="button" value="Search for Today's Activities" onclick="startRequest();"/> </form> <div id="results"></div> </body> </html>
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!