AJAX - 서버 응답

서버로부터 응답을 받으려면 XMLHttpRequest 객체의 responseText 또는 responseXML 속성을 사용하세요.

ResponseText 및 ResponseXML

응답 메시지의 내용은 XML, 일반 텍스트, (X)HTML 또는 JSON(JavaScript Object Notation)과 같은 다양한 형식으로 나타날 수 있습니다. 수신된 데이터의 형식에 따라 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 설명 = response.getElementsByTagName('description')[0].firstChild.data;

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

마지막으로 해당 div 태그에 응답 정보를 표시합니다.

$("body").html("<b>" + header + "</b>< br/> ;"
;

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>

제출하다 코드 재설정

자동운전