XHR 준비 상태
onreadystatechange 이벤트
요청이 서버로 전송되면 몇 가지 응답 기반 작업을 수행해야 합니다.
readyState가 변경될 때마다 onreadystatechange 이벤트가 트리거됩니다.
readyState 속성은 XMLHttpRequest의 상태 정보를 저장합니다.
다음은 XMLHttpRequest 객체의 세 가지 중요한 속성입니다.
| Property | Description |
|---|---|
| onreadystatechange | 저장 함수(또는 함수 이름). 이는 ReadyState 속성이 변경될 때마다 호출됩니다. |
| readyState | XMLHttpRequest의 상태를 저장합니다. 0에서 4로 변경됩니다.
|
| status | 200: "OK" 였습니다. 404: 페이지를 찾을 수 없음 |
onreadystatechange 이벤트에서는 서버 응답을 처리할 준비가 되었을 때 수행할 작업을 지정합니다.
readyState가 4이고 상태가 200이면 응답이 준비되었음을 의미합니다.
Instance
<html><!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","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
참고: onreadystatechange 이벤트 각 ReadyState 변경에 따라 5회(0 - 4) 트리거됩니다.
콜백 함수 사용하기
콜백 함수는 다른 함수에 매개변수로 전달되는 함수입니다.
웹 사이트에 여러 AJAX 작업이 있는 경우 XMLHttpRequest 개체를 생성하기 위한 표준 함수를 작성하고 각 AJAX 작업에 대해 해당 함수를 호출해야 합니다.
함수 호출에는 onreadystatechange 이벤트가 발생할 때 수행할 URL과 작업이 포함되어야 합니다(호출마다 다를 수 있음).
Instance
<!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("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>
</body>
</html>Run Instance»
"Run Instance"를 클릭합니다. 온라인 인스턴스를 보려면 버튼을 누르세요
