애증의 AJAX
개발 학원을 다니며 프로젝트를 하던 시기에 다른 기능들은 전부 구현했지만 ajax만이 유일하게 구현하지 못했다.
며칠을 해결해보려 했지만 끝내 실패하여 지금까지도 ajax는 트라우마처럼 자리잡았다. ^^
지금이라도 ajax를 간단하게 정리하면서 이제 그만 보내주려한다. 😭
Ajax
Asynchronous Javascript And Xml
자바스크립트로 HTTP 요청을 보내서 응답을 받아오는 기술
웹 브라우저에 내장되어 있는 XMLHttpRequest 객체를 사용
이름에 Xml이 있지만 사실 모든 종류의 데이터 가져올 수 있다
참고로 ajax는 라이브러리같은 개념이 아니다.
그냥 비동기 통신 기술이라고 보면 될 듯???
ajax는 XMLHttpRequest 객체가 핵심이다.
XMLHttpRequest 객체
비동기적으로 서버와 브라우저가 데이터를 주고 받을 때 사용한다.
사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트 할 수 있다.
즉, 새로고침 없이도 데이터를 가져올 수 있다.
내부 속성, 이벤트, 메서드는 아래에 정리
readyState 속성
readyState는 현재 document의 로딩 상태 값을 의미
| readyState 속성 값 | 의미 |
| 0 | 객체는 생성완료, 초기화는 X |
| 1 | open 메서드 호출 완료, send메서드는 X |
| 2 | 요청 수신! (send 메서드 호출 완료, 아직 응답은 안옴) |
| 3 | 요청 처리중! (데이터 일부 받는 중) |
| 4 | 완료! (데이터 전부 받음! ^_^) |
readystatechange 이벤트
현재 document의 readyState 속성 값이 변경될 때 마다 readystatechange 이벤트가 발생
onreadystatechange 속성
readystatechange 이벤트가 발생했을 때 동작하는 이벤트 핸들러
open 메서드
요청을 초기화 한다.
인자1 : 요청방식 ( 'get' or 'post' )
인자2 : url
인자3 (선택) : true → 비동기 / false → 동기
send 메서드
요청을 전송한다.
status 속성
요청을 하고 나서 응답의 HTTP 상태 코드
| status 속성 값 | 의미 |
| 2XX | 올바른 응답 완료! |
| 4XX | 클라이언트 에러 (ex. 404) |
| 5XX | 서버 에러 |
statusText 속성
HTTP 서버가 반환한 응답 문자열
여기까지만 알면 되고, 활용하는 순서를 간략하게 말하면
클라이언트에서 요청 → 서버로부터 응답받기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>AJAX</title>
</head>
<body>
<div>
<h1 id="title">AJAX를 활용</h1>
</div>
<button type="button" onclick="loadXMLDocs()">
버튼
</button>
</body>
<script type="text/javascript">
// 1. 버튼 클릭시 호출
function loadXMLDocs() {
// 2. XMLHttpRequest 객체 생성
const xmlHttp = new XMLHttpRequest();
const url = 'https://api.hnpwa.com/v0/news/1.json';
// 3. 요청 초기화
xmlHttp.open("GET", url, true);
// 4. 요청 전송
xmlHttp.send();
//---------요청끝---------
// 5. readyState가 change될 때 이벤트 핸들러 등록
xmlHttp.onreadystatechange = function() {
// 6. readyState가 4일때
if (xmlHttp.readyState==4) {
// 7.status가 200일때
if (xmlHttp.status==200) {
// 8. 데이터 가져오기 (responseText)
const response = JSON.parse(xmlHttp.responseText);
document.getElementById("title").innerHTML = response[0].title;
}
}
};
}
</script>
</html>
클라이언트에서 요청
- open메서드로 요청을 초기화 (뭐 어디로 어떻게 요청할건지는 정해야할거아녀~)
- send로 전송 끝
서버로부터 응답받기 (요청 후)
- readyState의 값을 확인하여 제대로 전송이 됐는지, 응답이 됐는지 확인 (readySate 속성 값 4)
- status 속성 값을 확인해서 서버로부터 받은 응답이 정상인지 확인 (status 속성 값 2XX)
즉, readyState의 값은 4고 status값이 200이라면 데이터를 정상적으로 보내고 받았음을 의미!
- 받은 데이터는 statusText에서 확인 참고로 string 형태라서 걍 문자열로 받으니까 조심!
- 받은 문자열을 변환해서 원하는 데이터 가져다쓰면 끝
'🧠 저장 > Javascript' 카테고리의 다른 글
| 디바운스(debounce)와 쓰로틀링(throttle) (0) | 2024.01.18 |
|---|---|
| webkit scroll freeze 이슈 (0) | 2023.11.27 |
| Promise.allSettled 초간단 사용법 + Promiss.all 차이점 (0) | 2023.11.02 |
| function을 변수에 넣는 이유 (0) | 2023.11.01 |
| 에러와 에러 객체 (0) | 2023.05.31 |