[자바스크립트][비동기통신] XMLHttpRequest 이용한 Ajax 실습해보기

[자바스크립트][비동기통신] XMLHttpRequest 이용한 Ajax 실습해보기

 

1. 간단한 개념 정리

Ajax란 비동기 JavaScript와 XML을 뜻한다. 간단히 말하면, 서버측 Scripts와 통신하기 위한 XMLHttpRequest 객체를 사용하는 것을 말한다.

서버측으로 다양한 형식(대표적으로 JSON)의 정보를 주고 받을 수 있다.

본 포스팅에서는 JavaScript에서 XMLHttpRequest를 이용한 Ajax를 구현한다.

 

2. XMLHttpRequest를 이용한 Ajax 구현 과정

1) XMLHttpRequest 객체 구하기

2) 웹 서버에 요청 전송하기

3) 웹 서버에서 응답이 도착하면 화면에 반영하기

 

2. 1 XMLHttpRequest 객체 구하기

* IE의 경우 ActiveX 컴포넌트로 XMLHttpRequest 객체를 지원

* 그 외 브라우저는 기본적으로 XMLHttpRequest 객체를 지원

<script type="text/javascript">

     //getXMLHttpRequest()함수로 생성한 객체를 저장하기 위해 선언한 전역 변수
     var httpRequest = null;
    
     function getXMLHttpRequest() {
          //브라우저가 IE일 경우 XMLHttpRequest 객체 구하기
          if (window.ActiveXObject) {
              //Msxml2.XMLHTTP가 신버전이어서 먼저 시도
              try {    
                      return new ActiveXObject("Msxml2.XMLHTTP");
             } catch(e) {
                 try {
                         return new ActiveXObject("Microsoft.XMLHTTP");
                     } catch(e1) { return null; }
             }
          //IE 외 파이어폭스 오페라 같은 브라우저에서 XMLHttpRequest 객체 구하기
         } else if (window.XMLHttpRequest) {
               return new XMLHttpRequest();
         } else {
             return null;
         }
    }
    var httpRequest = null;

</script>

 

2. 2 웹 서버에 요청 전송하기

open() 메서드 - 요청의 초기화. GET/POST 선택. 접속할 URL입력

• 첫 번째 인자 : 'GET', 'POST', 'HEAD' 중 하나의 방식 설정
• 두 번째 인자 : 접속할 URL 입력. 보안상(동일출처원칙) 이유로 현재 페이지와 같은 도메인에 있어야 한다.
• 세 번째 인자 : 동기/비동기 방식을 설정(true 일 경우 비동기)

send() 메서드 - 웹 서버에 요청 전송

• GET방식으로 요구한 경우 파라미터가 없다면 인자 값에 null을 주면 된다.
• POST방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능하다. 다만 데이터는 서버에서 쉽게 parse할 수 있는 형식(format)이어야 하거나 JSON, SOAP 등과 같은 다른 형식으로도 가능하다.

 * 아래는 GET방식과 POST방식에 대한 예제코드이다.

httpRequest = getXMLHttpRequest();
httpRequest.open("GET","/test.jsp?id=neloi&pw=1234",true);
httpRequest.send(null);

httpRequest = getXMLHttpRequest();
httpRequest.open("POST","/test.jsp",true);
httpRequest.send("id=neloi&pw=1234");

 

2. 3 서버 응답 처리하기 

서버로부터 응답을 받았으면 클라이언트는 이를 알맞게 처리해야 한다.

• * onreadystatechange : 서버로부터 응답이 도착하면 호출될 함수를 지정하는 프로퍼티
• *(아래 예제코드 참고) callbackFunction : onreadystatechange 프로퍼티를 통해 지정한 콜백 함수
• * onreadystatechange 프로퍼티로 지정한 콜백 함수는 응답이 도착할 때 뿐만이 아니라 open() 메서드나 send() 메서드가 호출될 때도 실행된다.

<script type="text/javascript">

function getXMLHttpRequest(){
 ....
}

var httpRequest =null;

function processEvent(){
    httpRequest = getXMLHttpRequest();
    httpRequest.onreadystatechange = callbackFunction;
    httpRequest.open("GET","/test.jsp",true);
    httpRequest.send(null)
}

function callbackFunction(){
   //서버로부터 응답이 왔으므로 알맞은 작업을 수행
}

</script>

<input type="button" onclick="processEvent()">

 

2. 4 XMLHttpRequest 객체의 상태 - readyState

앞서 2. 3에서 서버로부터 응답이 도착하면 콜백 함수가 호출된다고 했었는데, 실제 콜백 함수가 호출되는 시점은 readyState라는 프로퍼티의 값이 변경될 때마다 호출된다.

• 값 / 의미 / 설명
• 0 / UNINITIALIZED / 객체만 생성되고 아직 초기화되지 않은 상태, open() 메서드가 호출되지 않았음
• 1 / LOADING / open() 메서드가 호출되고 아직 send() 메서드가 호출되지 않은 상태
• 2 / LOADED / send() 메서드가 호출되었지만 STATUS와 헤더는 도착하지 않은 상태
• 3 / INTERACTIVE / 데이터의 일부를 받은 상태
• 4 / COMPLETED / 데이터를 전부 받은 상태

* 보통은 readyState 값이 4인 경우만 원하는 기능을 수행하지만 가끔 시간이 걸릴 경우 아래 예제코드와 같이 나머지 값을 유용하게 사용할 수 있다.

function callbackFunction(){
      if(httpRequest.readyState == 1  ||  httpRequest.readyState == 2
       || httpRequest.readyState ==3 ){
                       //화면에 작업 중 메시지 출력
      }else if(httpRequest.readyState == 4){
           if(httpRequest.status == 200){
                   //서버 응답 결과에 따라 알맞은 작업 처리
           }else{
               alert("문제 발생:" + httpRequest.status);
           }
      }
}

 

2. 5 서버로부터의 응답 상태 - status / statusText

* 2. 4 예제코드 참고

• 값 / 텍스트 / 설명
• 200 / OK / 요청 성공
• 403 / Forbidden / 접근 거부
• 404 / Not Found / 페이지 없음
• 500 / Internal Server Error / 서버 오류

 

2. 6 응답 데이터 사용하기 - responseText

• 서버 응답에 따른 확인사항 처리 후(readyState == 4 && status == 200) 이상이 없다면, 이제 서버가 전송한 데이터를 사용해야 한다.
• * 단순 텍스트 형식(format)에 대한 데이터 처리를 해보겠다.
• 서버가 생성한 단순 응답 텍스트를 참조하려면 responseText 프로퍼티를 사용하면 된다.
• * 아래 예제코드 참고(서버의 응답 텍스트를 alert로 출력해 주는 예제)

<script type="text/javascript">
 var httpRequest = null;
 
 function getXMLHttpRequest() {
      if (window.ActiveXObject) {
         try {
           return new ActiveXObject("Msxml2.XMLHTTP");
         } catch(e) {
               try {
                   return new ActiveXObject("Microsoft.XMLHTTP");
               } catch(e1) {
                  return null;
              }
          }
      } else if (window.XMLHttpRequest) {
              return new XMLHttpRequest();
      } else {
             return null;
      }
 }

 function load(url) {
  httpRequest = getXMLHttpRequest();
  httpRequest.onreadystatechange = viewMessage;
  httpRequest.open("GET", url, true);
  httpRequest.send(null);
 }
 function viewMessage() {
  if (httpRequest.readyState == 4) {
     if (httpRequest.status == 200) {
         alert(httpRequest.responseText);
     } else {
         alert("실패: "+httpRequest.status);
     }
   }
 }
 </script>

<input type="button" value="simple.txt" onclick="load('simple.txt')">
<input type="button" value="simple2.jsp" onclick="load('simple2.jsp')">

 

2. 7 코드가 실행되는 순서(XMLHttpRequest 객체를 사용하는 Ajax 통신 과정)

• 1) 사용자의 이벤트가 발생하면 이벤트 처리 함수를 호출한다(AJax를 구현해놓은).
• 2) 이벤트 처리 함수에서는 XMLHttpRequest 객체의 send() 메서드를 호출한다.
• 3) XMLHttpRequest 객체의 send() 메서드가 호출되면 웹 서버에 요청이 전송된다.
• 4) 웹 서버는 알맞게 처리한 뒤 응답 결과를 XMLHttpRequest에 전송한다.
• 5) XMLHttpRequest 객체에 응답이 도착하면 onreadystatechange 프로퍼티를 통해 지정한 콜백 함수를 호출한다.
• 6) 콜백 함수 내에서 서버 측이 응답이 올바른 것인지 readyState 프로퍼티와 status 프로퍼티를 통해 판단한다.
• 7) 이상이 없으면 서버 응답 데이터를 responseText 프로퍼티를 사용하여 처리한다.