AJAX(Asynchronous JavaScript and XML)에 대해서 알아보기

"비동기 요청을 할 때 어떤 것을 사용하시나요?"

AJAX에 대해서 알아봅시다!

웹페이지를 개발을 하면 서버와 통신을 할 수 있는 방법 중 여러 가지 방법이 있겠지만 저의 경우 ajax를 자주 사용하고 있습니다. 자주 사용하고 있으니 많이 알고 있냐라는 물음에 의문이 들어 개념 정리해보려고 합니다.

 

목차

AJAX(Asynchronous JavaScript and XML)

AJAX가 뭐야?

Asynchronous JavaScript transfer (x-fer)의 약자입니다. 말 그대로 javsciprt와 XML형식을 이용한 비동기적 정보 교환 기법이라고 생각을 하시면 됩니다. 예전에는 XML을 기본으로 사용을 하고 있지만 지금은 JSON을 많이 사용을 하고 있습니다.

AJAX 개념은 어떨까요?

비동기 요청 (Asynchronous Requests)

AJAX의 핵심은 비동기성입니다. 웹페이지가 서버에 요청을 보낸 후 서버로부터 응답을 기다리지 않고 페이지의 나머지 작업을 계속할 수 있습니다. 이렇게 되면 페이지가 느려지거나 멈추는 느낌이 없어 다른 작업을 계속 진행을 할 수 있습니다.

XMLHttpRequest 객체

AJAX 요청에서 주요 사용하는 것은 XMLHttpRequest 객체이며, 이 객체를 사용하여 서버와 HTTP 요청을 비동기적으로 수행을 할 수 있습니다. 최신 브라우저에서는 fetch API가 XMLHttpRequest를 대체할 수 있는 방법이기도 합니다.

응답처리

서버로부터 받은 응답은 일반적으로 XML, JSON을 사용을 하고 있습니다, AJAX를 통해 받은 데이터를 동적으로 삽입하거나 다른 방식으로 처리를 할 수 있습니다.

AJAX는 어떤식으로 작동하는 건가요?

요청을 생성합니다.

사용자가 웹에서 어떤 기능을 이용 또는 데이터를 조회/수정/삭제를 할 때 통신을 하거나 XMLHttpRequest 객체를 사용하여 서버에 요청을 보냅니다.

서버와의 통신을 합니다.

서버에 요청을 보냅니다. GET방식과 POST방식을 보내는 방법으로 이루어질 수 있습니다.

* GET/POST가 뭔데요?

GET : 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 메서드입니다.

POST :  클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용되는 메서드입니다.

서버가 응답을 합니다.

서버는 요청을 처리하고 응답을 반환합니다. 응답은 데이터베이스에서 가져온 정보를 처리한 결과 등을 가져오게 됩니다.

응답을 처리하고 결과를 표시합니다.

자바스크립트는 서버로부터 받은 응답을 처리하여 페이지의 특정 기능을 보여주거나 데이터를 조회 및 수정, 삭제 등을 진행을 합니다.

AJAX의 장점과 단점이 어떤건가요?

장점은 이렇게 있어요!

사용자의 이용 경험을 높여줄 수 있어요!

- 페이지를 새로고침없이 일부분을 동적으로 업데이틀 할 수 있어 사용자 이용 경험이 개선됩니다!

데이터 전송이 효율적이에요!

- 필요한 데이터만 서버와 주고받기 때문에 전체 페이지를 다시 로드하는 것보다 데이터 전송이 더 효율적입니다.

빠른 응답 속도

- 비동기 요청을 처리할 수 있어 사용자의 이용에 빠른 속도를 보여줄 수 있습니다.

단점은 이렇게 있어요!

SEQ/웹크롤러 관련 문제가 있어요.

서버 사이드 렌더링이 아닌 클라이언트 사이드에서 동적으로 로드된 콘텐츠는 검색 엔진에 의해 인덱스 되지 않을 수 있어 SEQ에 영향을 줄 수 있습니다.

오류처리가 힘들어요

AJAX 요청을 할 경우 디버깅이나 오류처리 등이 어려 울 수 있습니다.

호환성이 떨어져요.

오래된 브라우저에서는 AJAX 지원이 안되거나 일부 기능이 제한이 될 수 있습니다.

AJAX 예시는 이런 모습이에요!

$.ajax({
    url: '/OdinBOX/OdinBOXNotice',
    method: 'post',
    data : form,
    dataType : 'json',
    async: false,
    success: function (data, status, xhr) {
        $("#NoticeSearch").empty();
        $("NoticeSearch").replaceWith(data);
        
        console.log("data : : " + JSON.stringify(data));
    },
    error: function (data, status, err) {
    },
    complete: function () {
        var total = $("#noticeListCNT").val();
        $("#noticeListCNT").text(addComma(total));
    }
});

Ajax에서 사용하는 설정에 대해서 알려드릴게요!

dataType : ajax를 통해 리턴 받을 데이터의 타입을 설정합니다, 입력하지 않았을 경우 jQuery의 MME 타입 등을 보면서 자동으로 결정

type :  HTTP 통신 종류를 설정합니다. put, delete는 모든 브라우저에서 지원하는 것이 아니기 때문에 주의가 필요하며 기본값은 get으로 됩니다.

get : 데이터를 읽거나 검색할 때 사용

post : 데이터를 저장하거나 리소스를 생성할 때 사용

put : 리소스 생성, 업데이트할 때 사용 (거의 사용 안 함)

delete : 지정된 리소스를 삭제할 때 주로 사용 (거의 사용 안 함)

url : ajax 요청할 매핑(mapping)된 url을 입력합니다.

contentType : 기본값을 가장 많이 사용을 하고 있습니다. 바로 application/json, application/x-www-urlencoded 등을 사용을 하고 있습니다.

data : URL 파라미터를 통해 보낼 데이터의 종류를 말합니다. Object는 key:value로 구성이 되어 있으며 value에서 array일 경우 serialize를 jQuery에서 해주며 value이 String이 아닌 경우  변환하여 보냅니다.

success : ajax 통신이 성공을 했을 때 실행이 되는 콜백함수입니다.

error : request가 실패했을 때 실행되는 콜백함수입니다. 그러나 여기서 cross-domain 요청이나 cross-domain의 jsonp 요청에는 작동을 하지 않습니다.

complete : success나 error가 호출된 이후에 호출되는 콜백함수입니다.

beforeSend : ajax 실행 시 요청이 전송되기 전 실행되는 이벤트입니다. 반환값을 false 또는 jqXHR.abort()로 설정하면 ajax 전송을 취소할 수 있습니다.

timeout : ajax 호출된 시점부터 시간을 측정하여 요청이 초과할 경우 에러 등의 상태로 전환됩니다.

그럼, Ajax 통신을 할 때 Header를 추가하는 방법이 있나요?

물론입니다, 방법은 아래와 같이 진행을 하시면 됩니다. 이 방법은 주로 외부 API 등을 호출을 할 때 사용을 하면 됩니다.

$.ajax({
    method: "POST",
    url: "https://api.odinbox.co.kr/,
    beforeSend : function(xhr){
        xhr.setRequestHeader("Authorization", "API 인증키값");
    },
    success: function(res) {
        console.log("성공!");
    }
});

마무리

Ajax 통신에 대해서 알아봤습니다. 웹 개발을 했던 분들이면 무조건 한 번은 해봤을 ajax를 누구나 보면 이해할 수 있도록 최대한 개념적으로 설명을 해봤습니다. 이 글이 많은 도움이 되었으면 좋겠습니다 혹시 이 글을 보면서 추가했으면 좋을 거 같은 내용이나 수정할 내용 또는 질문이 있다면 댓글 남겨주시면 답변드리도록 하겠습니다.