XMLHttpRequest
Ajax의 핵심
서버와 데이터 주고 받을 때 사용
W3C 표준으로 정의(주요 웹브라우저에 내장)
XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는 데 사용
1. XMLHttpRequest 객체의 생성
var xmlHttp = new XMLHttpRequest();웹 페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있다
2. readyState 프로퍼티
readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타낸다
이 프로퍼티의 값은 객체의 현재 상태에 따라 다음과 같은 주기로 변화된다
- UNSENT(숫자 0) : XMLHttpRequest 객체가 생성됨
- OPENED(숫자 1) : open() 메소드가 성공적으로 실행됨
- HEADERS_RECEIVED(숫자2) : 모든 요청에 대한 응답이 도착함
- LOADING(숫자3) : 요청한 데이터를 처리 중임
- DONE(숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
3.status 프로퍼티
- 200 : 서버에 문서가 존재함
- 404 : 서버에 문서가 존재하지 않음
4. XMLHttpRequest 객체의 전송
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>XML XMLHttpRequest</title>
<script>
function loadDoc() {
// XMLHttpRequest 객체를 생성함.
var xmlHttp = new XMLHttpRequest();
// onreadystatechange 이벤트 핸들러를 작성함.
xmlHttp.onreadystatechange = function() {
// 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어
//응답할 준비가 완료되었을 때
if(this.status == 200 && this.readyState == this.DONE) {
// 요청한 데이터를 문자열로 반환함.
document.getElementById("text").innerHTML = xmlHttp.responseText;
}
};
xmlHttp.open("GET", "/examples/media/xml_httpxmlrequest_data.txt", true);
xmlHttp.send();
}
</script>
</head>
<body>
<h1>XMLHttpRequest 객체의 전송</h1>
<button onclick="loadDoc()">요청 전송하기!</button>
<p id="text"></p>
</body>
</html>5. responseText 프로퍼티
responseText 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 문자열로 저장
//xmlHttp는 위의 선언된 XMlHttpRequest의 객체
document.getElementById("text").innerHTML= xmlHttp.responseText;6. responseXML 프로퍼티
responseXML 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 XML DOM 객체로 저장
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>XML XMLHttpRequest</title>
<script>
function loadDoc() {
var xmlHttp = new XMLHttpRequest();
// XMLHttpRequest 객체를 생성함.
xmlHttp.onreadystatechange = function() { // onreadystatechange 이벤트 핸들러를 작성함.
// 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어
//응답할 준비가 완료되었을 때
if(this.status == 200 && this.readyState == this.DONE) {
processXMLObj(xmlHttp);
}
};
xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
xmlHttp.send();
}
function processXMLObj(xmlHttp) {
var xmlObj, nameList, result, idx;
xmlObj = xmlHttp.responseXML;
// 요청한 데이터를 XML DOM 객체로 반환함.
nameList = xmlObj.getElementsByTagName("name"); //
XML DOM 객체에서 id가 "name"인 요소들을 선택함.
result = "";
for(idx = 0; idx < nameList.length; idx++) {
// id가 "name"인 요소들의 텍스트 노드를 찾아 그 값을 반환함.
result += nameList[idx].childNodes[0].nodeValue + "<br>";
}
document.getElementById("text").innerHTML = result;
}
</script>
</head>
<body>
<h1>XMLHttpRequest 객체의 전송</h1>
<button onclick="loadDoc()">요청 전송하기!</button>
<p id="text"></p>
</body>
</html>
'Javascript(문법)' 카테고리의 다른 글
| Ajax(5)-JSON (0) | 2022.12.26 |
|---|---|
| Ajax(4)-fetch (0) | 2022.12.26 |
| Ajax(2)-Ajax (1) | 2022.12.25 |
| Ajax(1)-http (0) | 2022.12.25 |
| 배열의 분리&합침 (0) | 2022.12.18 |
