[Web] Ajax 시작하기

Ajax란?

• Asynchronous JavaScript And XML을 말한다.
• 서버와 통신하기 위해서 XMLHttpRequest 객체를 사용하는 것을 말한다.
• AJAX를 통해서 JSON, XML, HTML 그리고 일반 텍스트 형식을 포함한 다양한 포맷을 주고 받을 수 있다.
• AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행되는 "비동기성"이다.
• 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트할 수 있게 해준다.

 

페이지 새로고침 없이 서버에 요청하면 서버로부터 데이터를 받고 작업을 수행한다.

 

 

XMLHttpRequest

JavaSctript를 이용하여 서버로 보내는 HTTP Request를 만들기 위해서는?

그에 맞는 기능을 제공하는 Object의 인스턴스가 필요하다 ! XMLHttpRequest가 그러한 Object의 한 예이다.

 

 

XMLHttpRequest 만드는 방법

var httpRequest = new XMLHttpRequest();

 

 

서버의 응답을 받은 후의 동작 결정

httpRequest.onreadystatechange = function(){
      // 서버의 응답에 따른 로직을 여기에 작성합니다.
};

 

 

XMLHttpRequest 요청 보내기

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);

서버로 부터 응답을 받은 후의 동작을 결정 한 뒤에, 요청을 합니다. 아래와 같이 HTTP request 객체의 open()과 send()를 사용하면 요청을 할 수 있습니다.

 

open() 메서드의 파라미터

• 첫 번째 파라미터 : HTTP 메서드
• 두 번째 파라미터 : 호출 URL
• 세 번째 파라미터 : 비동기식으로 수행될 지 결정. T(비동기식)/F(동기식)

send() 메서드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능하다.

 

 

예제

"I'm a test." 라는 문장이 적힌 test.html 이라는 HTML 문서를 요청해서 문서의 내용을 파라미터로 alert() 함수를 호출할 것입니다.

 

<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>

 

[출처]

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started