XMLHttpRequest 객체 속성
readyState속성은 XMLHttpRequest 객체의 요청 접수 상태를 보유하고 있음.
※ status속성과 statusText속성은 XMLHttpRequest 객체의 요청 처리 상태 보유https://homzzang.com/b/js-80
onreadystatechange readyState 속성 변경될 때 호출할 함수 정의. readyState 상태가 변경 (1~4)될 때마다 호출됨. (즉, 4차례 촉발)
readyState
0
1
2
3
4
responseText
응답 데이터를 문자열로 반환.
responseXML
응답 데이터를 XML 데이터로 반환.
status
요청의 상태 번호 반환. (= 요청 처리 상태)
200
403
404
더 자세한 정보는 아래 좌표 참고
https://www.w3schools.com/tags/ref_httpmessages.asp
statusText
[응답 준비 상태]
if (this.readyState == 4 && this.status == 200 ) {
[예제]b.php
<div id="demo">
<button type="button" onclick="hz()">아작스 배우기 좋은 사이트?</button>
</div>
<script>
function hz() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "a.php", true);
xhttp.send();
}
</script>
a.php
<h1>홈짱닷컴 소개 Homzzang.com</h1>
<p>HTML - 기본틀</p>
<p>CSS - 디자인</p>
<p>JS - 동작기능</p>
<p>요청 방식 : <?php echo $_SERVER['REQUEST_METHOD']?> 방식</p>
<p>요청 시간 : <?php echo date("Y:m:d h:i:s", $_SERVER['REQUEST_TIME'])?></p>
콜백함수 사용
1.
2.
웹사이트에서 하나 이상의 AJAX 작업을 해야 하는 경우,
hz ("url-1", aaa );
hz ("url-2", bbb );
function hz (url, cFunction) {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function aaa (xhttp) {
// 액션 코드
}
function bbb (xhttp) {
// 액션 코드
}
b.php
<div id="demo">
<button type="button" onclick="hz ('a.php', aaa )" >아작스 배우기 좋은 사이트?
</button>
</div>
<script>
function hz (url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function aaa (xhttp) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
a.php
<h1>홈짱닷컴 소개 Homzzang.com</h1>
<p>HTML - 기본틀</p>
<p>CSS - 디자인</p>
<p>JS - 동작기능</p>
<p>요청 방식 : <?php echo $_SERVER['REQUEST_METHOD']?> 방식</p>
<p>요청 시간 : <?php echo date("Y:m:d h:i:s", $_SERVER['REQUEST_TIME'])?></p>
서버 응답 속성
responseText
응답 데이터를 문자열로 얻기
responseXML
응답 데이터를 XML 데이터로 얻기
서버 응답 메서드
getResponseHeader () 특정 헤더 정보를 반환.
getAllResponseHeaders () 모든 헤더 정보를 반환.
responseText 속성
서버 응답을 JS 문자열로 반환
<div id="demo">
<button type="button" onclick="hz()">코딩 배우기 좋은 곳?</button>
</div>
<script>
function hz() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText ;
}
};
xhttp.open("GET", "a.php", true);
xhttp.send();
}
</script>
responseXML 속성
XMLHttpRequest 객체는 XML 파서를 내장
이 속성을 사용하면 응답을 XML DOM 객체로 파싱 가능.
b.php
<p id="demo"></p>
<script>
var xhttp, xmlDoc, txt, x, i;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlDoc = this.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("DOMAIN");
for (i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xhttp.open("GET", "a.xml", true);
xhttp.send();
</script>
a.xml
<GOODSITE>
<SITE>
<NAME>홈짱닷컴</NAME>
<DOMAIN>Homzzang.com</DOMAIN>
</SITE>
<SITE>
<NAME>그누보드</NAME>
<DOMAIN>Sir.kr</DOMAIN>
</SITE>
</GOODSITE>
getAllResponseHeaders () 메서드
서버 응답으로부터 모든 헤더 정보 반환
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders ();
}
};
xhttp.open("GET", "a.php", true);
xhttp.send();
</script>
[결과값] date: Wed, 17 Apr 2019 22:06:48 GMT server: Apache/2.4.34 (Win64) PHP/7.2.10 connection: Keep-Alive x-powered-by: PHP/7.2.10 content-length: 200 keep-alive: timeout=5, max=99 content-type: text/html; charset=UTF-8
getResponseHeader () 메서드
특정 헤더정보 반환
<p>connection: <span id="demo"></span></p>
<script>
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader ("connection");
}
};
xhttp.open("GET", "a.php", true);
xhttp.send();
</script>
[결과값]
