[JavaScript] XHR2

XHR 

 

앞선 XHR 게시글에서 XHR에 대해 간단히 정리했었다. 

 

여기서는 이 XHR의 로직에 대해 한번 자세하게 뜯어서 정리해 보려고 한다.

 

씹고 뜯고 맛보러 고고

 

이전 XHR 게시글 : https://myung-it.tistory.com/30

[JavaScript] XHR

 

AJAX의 동작원리

 

AJAX의 동작원리를 말하자면

 

1. XMLHttpRequest 객체 생성
2. FormData 객체 생성
3. 서버로 보낼 Ajax 요청의 형식 지정( xhr.open() )

4. Ajax 요청 처리
5. 서버로부터의 응답 확인

 

순서로 동작한다고 볼 수 있다.

 

XHR 씹고 뜯기

const xhr = new XMLHttpRequest();
const formData = new Formdata(); // 요청 시 같이 보낼 데이터(데이터가 없으면 상관 x)
xhr.open('요청 방식', '요청 주소'); //요청을 보낼 준비 과정
xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if(xhr.status >= 200 && xhr.status < 300) {
            //요청 성공 로직 구현

        } else {
            //요청 실패 로직 구현
        }
    }
};
xhr.send(formData); //찐 요청

매우 자주 사용되는 위 XHR 표준 코드를 분석해보겠다.

 

const xhr = new XMLHttpRequest(); //새로운 XMLHttpRequest 객체로 생성
const formData = new Formdata(); // 요청 시 같이 보낼 데이터(데이터가 없으면 상관 x)

상수 xhr과 formData를 각 XMLHttpRequest(), formdata() 객체로 생성

 

xhr.open('요청 방식', '요청 주소'); //요청을 보낼 준비 과정

xhr.open() : 서버로 보낼 Ajax 요청의 형식 지정

 

xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if(xhr.status >= 200 && xhr.status < 300) {
            //요청 성공 로직 구현

        } else {
            //요청 실패 로직 구현
        }
    }
};

• onreadystatechange Property

: readyState Property의 값이 변할때마다 자동으로 호출되는 함수를 설정한다. 이 함수는 서버에서 응답이 도착할 때까지 readyState Property 값의 변화에 따라 총 5번 호출된다.

 

onreadystatechange Property를 사용하면 서버에 요청한 데이터가 존재하고, 서버로부터 응답이 도착하는 순간을 특정할 수 있다.

 

• readyState : XMLHttpRequest 객체의 현재 상태를 나타냄

1. UNSET(0) : XMLHttpRequest 객체 생성됨

2. OPENED(1) : open() 메서드가 성공적으로 실행됨

3. HEADERS_RECEIVED(2) : 모든 요청에 대한 응답 도착

4. LOADING(3) : 요청한 데이터를 처리 중

5. DONE(4) : 요청한 데이터의 처리가 완료되어 응답할 준비 완료

 

• status Property : 서버의 문서 상태를 나타냄

200 - 299 : 전송 성공

나머지 : 무엇인가 문제 있음. 전송 실패 ex) 404 Not Found

 

xhr.send(formData); //찐 요청

send() : 작성된 Ajax 요청을 서버로 전달. GET 방식과 POST 방식으로 데이터 전송 가능하다.

 

• GET 방식

GET 방식은 주소에 데이터를 추가하여 전달하는 방식이다. 하지만 길이에 제한이 존재하고 보안상의 취약점이 존재한다고 한다. 

 

• POST 방식

POST 방식은 데이터를 별도로 첨부하여 전달하는 방식이다. POST 방식의 요청은 브라우저에 캐시되지 않기에 브라우저 히스토리에도 남지 않는다. 또한 길이의 제한도 없을 뿐더러 GET 방식보다 보안성이 높다. 따라서 중요한 데이터를 전송할 때에는 POST 방식을 사용하는 것이 적절하다.

 

한줄평

 

XHR에 대해 진짜 완벽 이해 완료.. 는 아니지만 감 제대로 잡았네요. 

 

무작정 외우는게 아니라 이해하니까 더 잘 와닿은듯 ㅋ_ㅋ 

 

 

 

참고한 사이트 : http://www.tcpschool.com/ajax/ajax_server_xmlhttprequest