반응형
✔ XHR
◽ XHR
XHR 은 XMLHttpRequest 의 약자이다.
Web API 중 하나인 이 XHR 객체는 비동기적으로 서버와 통신할 수 있도록 해주는 Ajax의 핵심 역할을 한다.
Ajax 와 같이 페이지를 새로고침 하지 않고, 서버와 데이터를 받아오는 등의 인터랙션을 하기 위해서 사용한다.
◽ XHR 표준
const xhr = new XMLHttpRequest();
const formData = new FormData(); // 요청시 같이 보낼 데이터
xhr.open('요청 방식', '요청 주소');
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status >= 200 && xhr.status < 300) {
// 요청 성공 로직 구현
} else {
// 요청 실패 로직 구현
}
}
};
xhr.send(formData);
XMLHttpRequest 의 속성 중 하나인 readyState 값
• 0 (UNSET) : 아직 서버에 요청을 보내지 않은 상태
• 1 (OPENED) : open() 함수가 호출된 이후로 요청 초기화가 된 상태
• 2 (HEADERS_RECEIVED) : send() 함수의 호출 이후에 서버에 요청한 결과의 헤더를 수신한 상태
• 3 (LOADING) : send() 함수 호출 후에 서버에 요청한 결과를 받아오는 중
• 4 (DONE) : 서버에 요청한 결과를 받은 상태
이 숫자(상태)가 변경될 때마다 onreadystatechange 메소드가 호출된다.
◽ XHR 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>XHR Example</title>
</head>
<body>
<input>
<br>
<b id="ipVal">IP 주소가 여기 표시됩니다.</b>
<br>
<button id="ipBtn">IP 주소 가져오기</button>
<script>
window.document.getElementById('ipBtn').addEventListener('click', () => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.ipify.org');
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
ipBtn.removeAttribute('disabled');
if (xhr.status >= 200 && xhr.status < 300) {
window.document.getElementById('ipVal').innerText = xhr.responseText;
} else {
ipVal.innerText = '오류';
}
}
};
xhr.send();
ipVal.innerText = '잠시만 기다려 주세요.';
ipBtn.setAttribute('disabled', 'disabled');
});
</script>
</body>
</html>
반응형
'Front > JavaScript' 카테고리의 다른 글
| [JavaScript] decodeURI() vs decodeURIComponent() (5) | 2023.06.14 |
|---|