자바스크립트의 XMLHttpRequest를 사용해 서버와 비동기 통신(AJAX)을 할 수 있다.
var xhr = new XMLHttpRequest();
xhr.open('post', '/job');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
'e_id' : 'E101'
}));
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
1. XMLHttpRequest 객체를 생성한다.
2. open()에 통신에 사용할 방식(method)과 통신할 주소(url)을 입력한다.
3. JSON 데이터를 보내기 때문에 setRequestHeader에 'Content-Type'이라는 이름으로 'application/json'을 추가해 데이터 타입이 JSON임을 명시한다.
4. JSON.stringify() 를 통해 작성한 데이터를 JSON 문자열로 변환한다.
5. send()를 통해 데이터를 송신한다.
6. XMLHttpRequest는 통신 상황에 따라 상태(state)가 변한다.
이를 readystatechange 이벤트로 상태 변화를 파악할 수 있다.
XMLHttpRequest의 readyState 프로퍼티는 현재 통신 진행 상태를 담고있는데 그 내용은 다음과 같다.
- 0 (UNSET) : XMLHttpRequest 객체가 생성된 상태
- 1 (OPENED) : open() 함수가 호출됨
- 2 (HEADERS_RECEIVED) : 모든 요청에 대한 응답이 도착함
- 3 (LOADING) : 서버에 요청한 결과를 처리하는 중
- 4 (DONE) : 서버에 요청한 결과를 받은 상태
status 프로퍼티는 http의 상태 코드를 담고 있다.
- 200 : 성공
- 404 : 해당 문서가 존재하지 않음
- 500 : 서버 내부 오류
위 코드에서는 조건문을 사용해 readyState가 4 (서버에서 결과를 받음)이면서 status가 200 (통신에 성공)일 때 통신 후에 진행할 작업을 처리하고 있다.
'JavaScript > JavaScript' 카테고리의 다른 글
| [Javascript] 자바스크립트 좌클릭 / 우클릭 이벤트 (0) | 2023.01.11 |
|---|---|
| [Javascript] 문자열을 html 변환하기 (0) | 2023.01.10 |
| [Javascript] 지수 연산자 (0) | 2023.01.06 |
| [Javascript] typeof 연산자 (0) | 2023.01.06 |
| [Javascript] 스프레드(spread) 문법 (0) | 2023.01.02 |