[ WEB ] AJAX에 대해 알아보기.

 

 

AJAX란 무엇일까?

 

 

비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)을 말하며, 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. AJAX는 페이지의 새로고침 없이 서버에 요청을 보낼 수 있고, 서버로부터 데이터를 받고 작업을 수행하는 특징을 가진다.

 

브라우저에서 제공하는 Web API인 XMLHttpRequest(HTTP비동기 통신을 위한 메서드와 프로퍼티를 제공) 객체를 기반으로 동작한다.

 

 

 

 

 

출처 - https://ko.wikipedia.org/wiki/Ajax

 

위의 그림은 전통적인 웹페이지의 생명 주기(왼쪽)와 Ajax(오른쪽)의 비교 이미지이다.

 

 

 

 

전통적인 웹페이지의 경우(왼쪽 이미지)

 

html태그로 시작하여 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작했기 때문에 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링 했다.

 

1. 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다.
2. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 한다. 이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜빡이는 현상이 발생한다.
3. 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹된다.

 

 

 

 

 

AJAX 웹페이지의 경우(오른쪽 이미지)

 

Ajax의 등장으로 이전의 전통적인 패러다임을 획기적으로 전환하게 되는데, 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링 하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링 하는 방식이 가능해졌다. 이로인해 브라우저에서 빠른 퍼포먼스와 부드러운 화면 전환이 가능해졌다.

 

1. 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않는다.
2. 변경할  필요가 없는 부분은 다시 렌더링하지 않는다. 따라서 화면이 순간적으로 깜빡이는 현상이 발생하지 않는다.
3. 클라이언트와 서버와의 통신이 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 이후 블로킹이 발생하지 않는다.

 

 

 

 

 

---

 

 

 

 

 

 

HTTP Requerst 예제

 

해당 예제는 mdn에서 가져온 예제로, vanilla.js로 작성되었다.

 

<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();

    if(!httpRequest) {
      alert('XMLHTTP 인스턴스를 만들 수가 없어요 ㅠㅠ');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('request에 뭔가 문제가 있어요.');
      }
    }
  }
})();
</script>

 

1. 사용자는 브라우저 상의 <Make a request>라는 버튼을 클릭한다.
2. 버튼의 클릭 이벤트 핸들러는 makeRequest() 함수를 호출한다.
3. 브라우저는 서버로 요청을 보내고, onreadystatechange 에 설정된 alertContents() 함수가 실행된다.
4. alertContents() 함수는 서버로부터 응답을 받았는지와 정상적으로 처리된 응답인지를 검사하여, 정상적인 경우 test.html 파일의 내용을 파라미터로 alertI() 함수를 호출한다.

 

 

 

 

 

 

 

---

 

🌸 출처 🌸

 

AJAX - MDN

Ajax - 위키백과