AJAX에 대하여

json을 통한 AJAX 통신을 자주 하기 때문에 정리하기 위해 글을 작성한다.

 

 

AJAX란?

• Asynchronous Javascript And XML
• 웹 페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있게 하는 기술

 

AJAX의 특징

• 비동기성: 페이지를 reroad 하지 않고 서버와 데이터를 주고받을 수 있다.
• 사용자 경험 향상: 페이지 전체를 reroad 하지 않기 때문에 사용자 경험이 향상된다.
• 효율적인 데이터 전송: 필요한 데이터만 전송하므로 네트워크 부담이 줄어든다.

 

AJAX의 구성 요소

• Javascript: 클라이언트 측에서 비동기 HTTP 요청을 보내기 위해 사용된다.
• XMLHttpRequest 객체: 브라우저 내에서 서버와 HTTP 요청을 주고 받을 수 있도록 한다.
• 서버 측 스크립트: 요청을 받아서 처리하고, 클라이언트에 응답을 보내는 서버 측의 코드.
• 데이터 포맷: XML, JSON 등

 

클라이언트 측 AJAX 통신 예제

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

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

  function makeRequest() {
    httpRequest = new XMLHttpRequest(); // HTTP request를 날리기 위한 Object 

    if(!httpRequest) {
      alert('XMLHTTP 인스턴스를 만들 수가 없어요 ㅠㅠ');
      return false;
    }
    httpRequest.onreadystatechange = alertContents; // 서버 응답에 따른 함수
    httpRequest.open('GET', 'test.html'); // 첫번째: HTTP method, 두번째: URL
    httpRequest.send();
  }
  
  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('request에 뭔가 문제가 있어요.');
      }
    }
  }
})();
</script>

출처: MDN Web Docs