JavaScript에서 Ajax 사용의 기초

아약스란?

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

비동기 통신이란 무엇입니까?

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

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

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

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

자바스크립트에서 Ajax 사용

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

JavaScript는 서버와 비동기적으로 통신하기 위해 “XMLHttpRequest()”라는 API를 제공합니다.

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

인스턴스화

먼저 다음과 같이 인스턴스를 만듭니다.

let xhr = new XMLHttpRequest();

우리는 인스턴스에 대해 “어떻게”, “어느 서버로”, “언제 데이터를 가져올 것인지”를 결정합니다.

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

xhr.onreadystatechange = function() {

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

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

열려 있는()

요청 내용(“어떻게”, “어느 서버로”)을 지정하기 위한 XMLHttpRequest 객체의 메서드 중 하나입니다.

첫 번째 매개변수에 HTTP 메소드(POST\GET)를 작성하고 두 번째 매개변수에 경로 또는 URL을 작성하십시오.

POST와 통신할 때

xhr.open(“게시물”, “/게시물”);

“readyState” 및 “status”를 사용한 조건 분기 방법

xhr.onreadystatechange를 사용하여 서버에서 데이터를 수신할 수 있습니다. 그러나 “통신이 완료 되었습니까?”, “통신이 성공 했습니까?” 등은 IF 문으로 조건부 분기하여 확인해야 합니다.

통신이 완료되고 성공했는지 알 수 없으면 대상 데이터를 얻을 수 없으므로 readyState를 사용하여 조건부 분기 처리를 설명합니다. 또한 기본적으로 서버와 정상적으로 통신할 때 status의 값은 “200”이 되므로 이 둘을 조합하여 조건 분기를 수행한다.

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

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

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

보내다()

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

FormData 개체

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

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

HTML

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