AJAX통신 이란?

Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있다.

※ 비동기(async)방식이란?
비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 이다. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있다.

---

1. 사용예시

게시판 글쓰기 페이지.jsp

 

save: function(){
    let data = {
        title: $("#title").val(),
        content: $("#content").val(),
    };
    $.ajax({
        type:"POST",
        url: "/api/board",
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).done(function (resp){
        alert("글쓰기가 완료되었습니다.");
        location.href = "/";
    }).fail(function (error){
        alert(JSON.stringify(error));

    }); // ajax 통신을 이용해서 3개의 데이터를 json 으로 변경하여 insert 요청
}

위의 코드와 같이 글쓰기 페이지에서 ajax 통신을 통해 쓴 글들을 데이터베이스에 POST방식으로 데이터를 보낸다.

body에 JSON타입으로 데이터를 전달하며,

 

위의 예시는 done() 콜벡함수에 의해 다른 페이지로 이동하게 되는데,

 

이 때 호출된 페이지에서는 방금 등록된 글들을 빠르게 호출할 수 있게 된다.

 

이와 같이 이동된 페이지에서 데이터를 재호출하여 확인하는 경우와 

 

같은 페이지내에서 변경된 데이터를 불러오는 등의 활용이 가능하다.

 

---

2. AJAX의 장단점

장점

• 웹페이지의 속도향상
• 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
• 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.

 

단점

• 히스토리 관리가 되지 않는다.
• 페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
• XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
• AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.
• HTTP 클라이언트의 기능이 한정되어 있다.
• 지원하는 Charset이 한정되어 있다.
• Script로 작성되므로 디버깅이 용이하지 않다.
• 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제)

---

3. AJAX의 진행과정 요약

1. XMLHttpRequest Object를 만든다.
   • request를 보낼 준비를 브라우저에게 시키는 과정
   • 이것을 위해서 필요한 method를 갖춘 object가 필요함
2. callback 함수를 만든다.
   • 서버에서 response가 왔을 때 실행시키는 함수
   • HTML 페이지를 업데이트 함
3. Open a request
   • 서버에서 response가 왔을 때 실행시키는 함수
   • HTML 페이지를 업데이트 함
4. send the request

---

기업별로 또는 상황별로 AJAX의 형태를 커스텀하여 보다 자신에게 맞는 형태의 ajax를 사용하기도 한다.

 

이러한 네트워크 기술에 대한 이해를 통해 클라이언트와 서버의 통신을 보다 쉽게 구현할 수 있게 되었다.