AJAX 서버 응답 내용

ajax 서버 응답 콘텐츠:
XMLHttpRequest 개체의 responseText 또는 responseXML 속성을 사용하여 서버에서 응답 콘텐츠를 가져옵니다.
두 가지 속성 함수 목록은 다음과 같습니다.

Attribute	Description
responseText	문자열 형식으로 응답 데이터를 가져옵니다.
responseXML	응답 데이터를 XML 형식으로 가져옵니다.

一.responseText 속성:
서버의 응답 콘텐츠가 XML이 아닌 경우 responseText 속성을 사용하여 가져옵니다. 이 속성의 반환 값은 문자열 형식입니다. 사용법은 다음과 같습니다.

document.getElementById("show").innerHTML=xmlhttp.responseText;

전체 코드 예:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</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에 쓸 수 있습니다.
2. responseXML 속성:
서버의 응답이 XML이고 XML 객체로 구문 분석되어야 하는 경우 responseXML 속성을 사용해야 합니다.

var xmlDoc = xmlhttp.responseXML;

반환 값 responseXML 속성 중 XML 객체인 경우 전체 객체 인스턴스는 다음과 같습니다.

<!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.php.cn/" />
<title>php中文网</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>

지속적인 학습

새로운 파일

<!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.php.cn/" /> <title>php中文网</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>

제출하다 코드 재설정

자동운전