AJAX - onreadystatechange 이벤트

onreadystatechange 이벤트

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

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

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

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

속성 함수가 호출됩니다. readyState

XMLHttpRequest의 상태를 저장합니다. 0에서 4로 변경됩니다. 0: 요청이 초기화되지 않았음을 요청합니다

1: 서버 연결이 설정되었습니다

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

3: 요청 처리 중

4: 요청이 완료되었으며 응답이 준비되었습니다

상태 200: "OK" 404: 페이지를 찾을 수 없음

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

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

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

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

콜백 함수 사용하기

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

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

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

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <script> var xmlhttp; function loadXMLDoc(url,cfunc) { if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 代码 xmlhttp=new XMLHttpRequest(); } else {// 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",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script> </head> <body> <div id="myDiv"><h2>修改文本内容</h2></div> <button type="button" onclick="myFunction()">点击</button> </body> </html>

제출하다 코드 재설정

자동운전