웹사이트(Client)가 데이터를 요청(Request)하면 서버에서는 적절한 데이터를 Client에게 보내줘야한다.
데이터를 보내줄 때는 서버와 통신을 해야 하는데 데이터를 쉽게 다룰 수 있는 방법이 XMLHttpRequst이다.
XMLHttpRequst는 웹 어플리케이션을 개발하는 방법 중 하나인
AJAX(Asyncronous Javascript And Xml) 프로그래밍에 많이 사용되기도 하는 통신 객체이다.
XMLHttpRequest에 대한 오해와 진실
Q. 객체 이름에 XML이 들어가니까 XML 데이터만 가져올 수 있나?
A. 이름에 XML이 들어가지만 XMLHttpRequst는 XML 뿐만 아니라 모든 종류의 데이터를 가져올 수 있다.
Q. 그렇다면 왜 XML이라는 이름을 쓰나?
A. 생성 당시에 비동기 데이터 교환에 원래 사용 되었던 기본 형식이 XML이었기 때문이다.
문법
const xhr = new XMLHttpRequest();
const method = "GET";
const url = "https://developer.mozilla.org/";
xhr.open(method, url, true);
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
const status = xhr.status;
if (status === 0 || (status >= 200 && status < 400)) {
console.log(xhr.responseText);
} else {
}
}
};
xhr.send();
1. XMLHttpRequest 객체 생성 및 초기화
const xhr = new XMLHttpRequest();
const method = "GET";
const url = "https://developer.mozilla.org/";
xhr.open(method, url, true);
open 메소드는 XMLHttpRequst 객체를 초기화 해주는 메소드인데
3번째 매개변수(true)는 데이터를 가져올 때 비동기식으로 가져올건지
동기식으로 가져올건지를 초기화하는 부분이다.
true로 지정하거나, 아무 값도 지정하지 않으면 프로세스가 비동기적으로 처리된다.
2. XMLHttpRequest의 readyState 상태값 확인해보기
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
const status = xhr.status;
if (status === 0 || (status >= 200 && status < 400)) {
console.log(xhr.responseText);
} else {
}
}
};
XMLHttpRequst 객체의 readyState값이 변경되면
onreadystatechange 이벤트 핸들러를 이용하여 이벤트를 발생시킨다.
3. send 메소드를 통해 요청을 서버로 전달한다.
xhr.send();
open() 의 3번째 매개변수가 비동기식(기본값)인 경우 요청이 전송되고 결과가
이벤트를 사용하여 전달되는 즉시 send()가 반환된다.
요청이 동기식인 경우 send()는 응답이 도착할 때까지 반환되지 않는다.
예제
- 텍스트 파일을 서버에 요청해서 웹 페이지에 전달하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onload="loadTextDoc()">
<p id="demo"></p>
<script type="text/javascript">
function loadTextDoc() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'test.txt');
xhr.onreadystatechange = function() {
console.log("this.responseText = " + this.responseText);
console.log("this.status = " + this.status);
console.log("this.readyState = " + this.readyState);
if(this.readyState == 4 && this.status == 200) {
document.getElementById('demo').innerHTML = this.responseText;
}
}
xhr.send();
}
</script>
</body>
</html>
test.txt 라는 파일에 임의의 내용을 작성한다.
responseText는 요청에 대한 응답을 String 타입으로 반환하고 텍스트 형식으로 보여준다.
요청이 실패했거나, 아직 전송하지않은 경우에는 null을 반환한다.
readyState의 값이 done이고, status의 값이 성공(200)일 때 p 태그에 값을 넣는 코드이다.
console 창에서 확인해보면 모든 속성의 값이 잘 나오는 것을 확인할 수 있다.
'FRONT-END > JAVASCRIPT' 카테고리의 다른 글
| [JS] SpeechSynthesisUtterance API (0) | 2023.04.02 |
|---|---|
| [JS] JSON의 정의와 함수 사용 방법 (0) | 2023.02.02 |
| [JS] 특정 <tr>, <td> 값에 접근하기 (0) | 2023.01.31 |
| [JS] JS를 이용하여 TABLE 만들기 (0) | 2023.01.31 |
| [JS] onkeydown, onkeypress 차이점 (0) | 2023.01.31 |
댓글