자바스크립트에서 Ajax 사용 기본

Ajax란?

Ajax(Asynchronous JavaScript + XML)은 브라우저에서 페이지의 내용을 업데이트하기 위해 비동기 통신을 이용하는 기술을 의미하는 약어입니다.

 

비동기 통신이란?

비동기 통신은 요청을 보내고 데이터가 반환될 때까지 브라우저에서 처리하고 업데이트할 부분만 요청하여 처리하는 통신을 의미합니다.

클라이언트 측에서 작동하는 JavaScript가 직접 서버와 통신하여 가져온 데이터를 기반으로 HTML 파일을 업데이트하는 방식입니다.

 

일반적인 통신에서는 클라이언트에서 서버에 요청(Request)을 보내고 데이터(HTML 파일 등)가 반환되면 응답(Response)이 반영됩니다. 따라서 응답이 반환될 때까지 조작이 불가능해집니다.

 

비동기 통신의 경우 응답을 기다리지 않고 다음 조작으로 이동할 수 있습니다. 또한 필요한 부분만 업데이트하고 업데이트할 필요가 없는 부분을 불필요하게 다시로드하지 않기 때문에 사용자는 브라우저를 편안하게 조작할 수 있는 장점이 있습니다.

 

JavaScript에서 Ajax 사용

XMLHttpRequest()를 사용한 Ajax 통신 방법

JavaScript에는 서버와 비동기적으로 통신하기 위해 "XMLHttpRequest()"라는 API가 제공됩니다.

XMLHttpRequest는 웹 브라우저와 웹 서버 간에 데이터 교환을 위해 사용되는 객체입니다.

 

인스턴스 생성

먼저 다음과 같이 인스턴스를 생성합니다.

let xhr = new XMLHttpRequest();

인스턴스에 대해 "어떤 방식으로", "어떤 서버에", "언제 데이터를 가져올 것인가?"를 결정해 나갑니다.

 

xhr.open("어떤 방식으로?", "어떤 서버에?");
xhr.send();

xhr.onreadystatechange = function() {

if("언제 데이터를 가져올 것인가?") {

    //데이터를 가져온 후의 처리를 작성합니다.
}

 

open()

XMLHttpRequest 객체의 메소드 중 하나로, 요청의 내용("어떤 방식으로", "어떤 서버에")을 지정하기 위한 메소드입니다.

첫 번째 매개 변수에는 HTTP 메소드(POST\GET)를, 두 번째 매개 변수에는 경로 또는 URL을 기록합니다.

 

POST로 통신할 때

xhr.open("POST", "/posts");와 같이 기술합니다.

 

"readyState"와 "status"를 이용한 조건 분기 방법

xhr.onreadystatechange를 이용해 서버로부터 받은 데이터를 받을 수 있습니다. 그러나, "통신이 완료되었는가?", "통신이 성공했는가?" 등을 IF 문으로 조건 분기하며 확인해야 합니다.

 

통신이 완료되고 성공한 것인지를 모르면 목적의 데이터를 가져올 수 없으므로, readyState를 이용해 조건 분기 처리를 기술합니다. 또한, 기본적으로 서버와 정상적인 통신을 하는 경우 status의 값이 "200"이 되므로, 이 두 가지를 결합해 조건 분기를 수행합니다.

 

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        //데이터 획득 처리를 기술
    }
};

xhr.readyState는 통신의 상태를 나타내는 숫자를 반환합니다. 대응표는 다음과 같습니다.

 

값	상태	설명
0	준비 단계	아직 통신이 이루어지지 않은 상태
1	준비 완료	통신을 하기 위한 준비가 완료된 상태
2	통신 시작	서버와 통신이 시작된 상태
3	수신 중	서버로부터 목적의 데이터를 획득 중인 상태
4	통신 완료	성공, 실패와 무관하게 통신을 종료한 상태

 

xhr.status는 응답에 대한 숫자형 HTTP 상태 코드를 반환합니다. 대응표는 다음과 같습니다.

값	상태	설명
200	성공	특별한 문제 없이 통신이 성공한 상태
401	오류	인증이 필요하여 통신할 수 없는 상태
403	오류	접근이 금지되어 통신할 수 없는 상태
404	오류	정보가 존재하지 않아 통신 할 수 없는 상태
500	오류	서버 측의 결함으로 통신할 수 없는 상태
503	오류	서버에 부하가 걸려 통신할 수 없는 상태

send()

XMLHttpRequest 객체의 메서드 중 하나로, 요청을 보내는 메서드입니다.

 

FormData 객체

FormData 객체를 사용하여 send 메소드로 보낼 데이터를 생성할 수 있습니다. 인스턴스를 생성하고 append 메소드를 사용하여 키와 값을 추가하여 임의의 데이터를 만들 수 있습니다.

let formData = new FormData();
formData.append("키", "값");

HTML의 <form> 요소에서 FormData 객체를 생성할 수도 있습니다.

let form = document.getElementById("form");
let formData = new FormData(form);

response 프로퍼티

XMLHttpRequest 객체의 프로퍼티 중 하나로, 서버로부터의 응답과 관련된 정보가 포함된 프로퍼티입니다.

 

xhr.response을 사용하여 가져올 수 있습니다.

 

반환된 응답 데이터를 사용하여 실행 처리를 기술함으로써 비동기적으로 처리를 실행할 수 있습니다.