onreadystatechange 이벤트

요청이 서버로 전송되면 몇 가지 응답 기반 작업을 수행해야 합니다.

readyState가 변경될 때마다 onreadystatechange 이벤트가 트리거됩니다.

readyState 속성은 XMLHttpRequest의 상태 정보를 저장합니다.

다음은 XMLHttpRequest 객체의 세 가지 중요한 속성입니다.

PropertyDescription
onreadystatechange저장 함수(또는 함수 이름). 이는 ReadyState 속성이 변경될 때마다 호출됩니다.
readyState

XMLHttpRequest의 상태를 저장합니다. 0에서 4로 변경됩니다.

  • 0: 요청이 초기화되지 않았습니다

  • 1: 서버 연결이 완료되었습니다

  • 2: 요청이 수신되었습니다

  • 3: 요청이 처리 중입니다

  • 4 : 요청이 완료되었으며 응답이 Ready

status200: "OK"
였습니다. 404: 페이지를 찾을 수 없음

onreadystatechange 이벤트에서는 서버 응답을 처리할 준비가 되었을 때 수행할 작업을 지정합니다.

readyState가 4이고 상태가 200이면 응답이 준비되었음을 의미합니다.

Instance

<html>
<head>
<script type="text/javascript">
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","/asset/demo.ajax.php?dm=txt&act=getfruits",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>

참고: onreadystatechange 이벤트는 각 변경에 따라 5회(0 - 4) 트리거됩니다. 레디스테이트의

콜백 함수 사용하기

콜백 함수는 다른 함수에 매개변수로 전달되는 함수입니다.

웹 사이트에 여러 AJAX 작업이 있는 경우 XMLHttpRequest 개체를 생성하기 위한 표준 함수를 작성하고 각 AJAX 작업에 대해 해당 함수를 호출해야 합니다.

함수 호출에는 onreadystatechange 이벤트가 발생할 때 수행할 URL과 작업이 포함되어야 합니다(호출마다 다를 수 있음):

Instance

<html>

<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
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=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/asset/demo.ajax.php?dm=txt&act=getfruits",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>
</body>
</html>