Ajax XMLHttpRequest 사용해 GET, POST 방식 데이터 전송방법

 

Ajax 의 주요 구성 요소

1. XMLHttpRequest : 웹서버와 통신을 담당하는 것으로서 사용자의 요청을 웹서버에 전송해주고, 웹서버로 부터 받은 결과를 사용자의 웹브라우저에 전달해줌.

 

2. DOM (Document Object Model) : DOM은 HTML과 XML문서에 대하여, 이들 문서의 구조적인 표현방법을 제공하며, 어떻게 하면 스크립트를 이용하여 이러한 구조에 접근할 수 있는지를 정의하는 API 이다. DOM 객체는 텍스트와 이미지, 하이퍼링크, 폼 엘리먼트 등의 각 문서 엘리먼트를 나타낸다.

 

3. CSS : 글자색, 배경색, 위치 등 UI 관련 부분을 담당.

 

4. JavaScript : 사용자가 마우스를 드래그하거나 버튼을 클릭하면 XMLHttprequest 객체를 통해 웹서버에 사용자의 요청을 전송함. 웹서버로 부터의 응답은 XMLHttprequest 객체를 통해 얻어오는데 응답결과가 오면 DOM, CSS 등을 사용해서 화면을 조작함.

 

 

DOM (Document Object Model) 에 관련한 참조사이트 - http://wiki.gurubee.net/pages/viewpage.action?pageId=6259958

 

 

XMLHttpRequest 객체 생성하는 방법
1. IE (인터넷익스플로어)  : var xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");

2. 크롬, 파이어폭스등 나머지들 : var xmlHttpObject = new XMLHttpRequest();

 

 

웹브라우저에 상관없이 XMLHttprequest 객체 생성하는 방법

 

var xmlHttpRequest = 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;
      }
}

xmlHttpRequest = getXMLHttpRequest();

 

생성된 XMLHttpRequest 객체를 사용하여 웹서버에 요청을 전송하는 하는 방법

XMLHttpRequest 객체의 메소드들.

1-1) abort() 메소드 : 현재의 요청을 중단한다.

1-2) getAllResponseHeadders() 메소드 : Http 요청에 대한 모든 응답 헤더들을 키(key)와 값(value)의 쌍인 문자열을 리턴해준다.

1-3) getResponseHeaders() 메소드 : 매개 변수로 주어진 headerName 에 해당하는 헤더의 값을 문자열로 리턴해준다.

1-4) open() 메소드 : 사용자의 요청을 설정하는 메소드로 반드시 기술해야 하는 매개변수인 method, url 과 선택적으로 기술할 수 있는 요청에 대한 매개변수들을 갖고 있다.
1-5) send() 메소드 : 사용자의 요청을 서버로 보내는 역할.
1-6) setRequestHeader() 메소드 : 헤더의 값을 설정한다.
          

- GET 방식으로 웹서버에 있는 test.jsp 페이지에 요청하는 예
xmlHttpRequest = getXMLHttpRequest();
xmlHttpRequest.open("GET", "test.jsp?id=hanmailrg&passwd=javateacher", true);
xmlHttpRequest.send(null);                      

 

- POST 방식으로 웹서버에 있는 test.jsp 페이지에 요청하는 예
xmlHttpRequest = getXMLHttpRequest();
xmlHttpRequest.open("POST", "test.jsp", true);
xmlHttpRequest.send("id=hanmailrg&passwd=javateacher");           

 

open() 메소드는 3개의 파라미터를 입력받는데, 각 파라미터는 아래와 같은 의미를 가진다.

1. 첫번째 파라미터 : HTTP method 를 지정한다. HTML 폼을 보면 method 속성에 "GET" 이나 "POST" 를 값으로 주는데, 이 첫번째 파라미터도 같은 값이 사용된다.

2. 두번째 파라미터 : 접속할 URL 을 입력한다. 웹브라우저의 보안상의 이유로 접속할 URL은 현재 페이지와 같은 도메인에 있어야 한다.

3. 세번째 파라미터 : 비동기(true) / 동기(false) 방식을 지정한다.

open() 메소드에서 세번째 파라미터를 true(비동기) 로 지정해주면 send() 메소드가 호출되고서 send() 메소드를 통한 서버와의 통신이 진행중이더라도 send() 메소드 호출 바로 다음의 코드로 넘어가 진행을 하지만, open() 메소드에서 세번째 파라미터를 false(동기) 로 지정해주면 send() 메소드가 호출되고서 send() 메소드를 통한 서버와의 통신이 완전히 완료된 이후에야 send() 메소드 호출 바로 다음의 코드로 넘어가 진행을 하게 된다.  
       

 

예를들어, 웹서버에 있는 "test.txt" 파일을 읽어오는 코드 예

xmlHttpRequest = getXMLHttpRequest();

xmlHttpRequest.open("GET", "test.txt", true);

xmlHttpRequest.send(null);      

 

서버에서의 응답처리를 해주는 방법은 XMLHttpRequest 객체의 프로퍼티들을 사용해서 처리해준다.

 

※  XMLHttpRequest 객체의 프로퍼티 종류

 

1) onreadystatechange : 서버에서 응답이 오면 해당하는 이벤트를 처리하기 위해 이벤트 핸들러 (자바스크립트로 되어진 콜백함수임) 에 해당하는 콜백함수가 실행되어야 하는데 그 콜백함수명을 입력받아주는 곳이 onreadystatechange 이다.   
 

2) readyState : 서버에서의 응답처리를 해주는 XMLHttpRequest 객체의 진행상태값을 알려준다.

--------------------------------------------------------------------------------------------------------
readyState 의 값     의미                 설명
--------------------------------------------------------------------------------------------------------
       0     uninitialized    XMLHttpRequest 객체만 생성되어져 있고 초기화가 안되어진 상태
                                     (open 메소드를 호출하지 않은 상태)
                            
       1     loading          open 메소드가 호출되어졌으나 send() 메소드가 호출되지 않은 상태
      
       2     loaded           send() 메소드가 호출되었으나 status 와 헤더는 도착하지 않은 상태
      
       3     interactive      서버에서 응답 데이터가 전달되어지고 있는 진행중인 상태
      
       4     completed        서버에서 응답 데이터가 모두 전달되어 모두 받은 상태로서 응답 데이터를 사용할 수 있는 상태.
                                      응답데이터는 요청이 성공한 응답데이터가 일수도 있고 요청이 실패한 응답데이터 일수도 있다.
---------------------------------------------------------------------------------------------------------  
    
 3) responseText : 서버에서의 응답을 문자열로 받을때 사용한다.
 
 4) responseXML : 서버에서의 응답을 XML 형태로 받을때 사용한다.
 
 5) responseBody : 서버에서의 응답을 이진 코드 형태로 받을때 사용한다.
 
 6) status : 서버로 부터 응답받는 Http 상태코드로서 숫자가 리턴된다.
-------------------------------------------------------------------------------------------------
   status 의 값       의미                              설명
-------------------------------------------------------------------------------------------------
         200           OK                               요청 성공
         403           Forbidden                접근 금지
         404           Not Found                페이지 없음
         500           Internal Server Error    서버 error 발생

 

그러므로 서버로 부터 응답이 XMLHttpRequest 객체를 통해 도착되어지면 XMLHttpRequest 객체의 status 프로퍼티 값을 확인하여 요청이 성공적으로 수행되어 도착했는지 실패한 응답이 도착했는지를 먼저 확인해야 한다.        
          
 

   

1. 사용자가 이벤트를 발생시키면 이 이벤트를 처리해주는 이벤트 처리함수를 호출한다.
2. 이벤트 처리함수에서는 XMLHttpRequest 객체의 send() 메소드를 사용하여 서버로 응답요청을 보낸다.
3. 서버는 응답요청에 해당하는 응답결과를 XMLHttpRequest 객체에게 보내준다.
4. 응답결과를 받은 XMLHttpRequest 객체는 응답결과를 가지고 onreadystatechange 프로퍼티에 입력되어진 콜백함수를 호출하여 콜백함수에 기재되어진 코딩대로 이벤트를 처리 (자바스크립트로 되어짐) 해준다.

 

 

※ open 메소드에서 URL이 GET 방식의 파라미터로 넘겨받도록 되어있는 경우 그 파라미터의 값이 한글일 경우 한글이 깨진다.
  

GET 방식으로 웹서버에 있는 test.jsp 페이지에 요청하는 예 (한글깨짐)
xmlHttpRequest = getXMLHttpRequest();
xmlHttpRequest.open("GET", "/test.jsp?name=서영학&addr=서울", true);
xmlHttpRequest.send(null); 

GET 방식으로 웹서버에 있는 test.jsp 페이지에 요청하는 예 (한글이 안깨지도록 하는 방법)

- 문자열을 UTF-8로 인코딩해주는 자바스크립트 함수 encodeURIComponent() 함수를 사용하면 된다.
     
xmlHttpRequest = getXMLHttpRequest();
var params = "name=" + encodeURIComponent("서영학") + "&addr=" + encodeURIComponent("서울");
xmlHttpRequest.open("GET", "test.jsp?" + params, true);
xmlHttpRequest.send(null); 
         

 

 

[지금까지 Ajax의 기본 동작원리를 알아보았다. 일반적으로 동일한 작업이 공식화 되어있으므로 이것을 모듈화 하도록 한다.]
   

 

XMLHttpRequest 객체 생성의 모듈화

- xmlHttpRequest.js 파일 생성및 내용
  

var xmlHttpRequest = 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; 
   }
} // end of getXMLHttpRequest()


function sendRequest (url, params, callback, method) {
   xmlHttpRequest = getXMLHttpRequest();
   var httpUrl = url;
   var httpParams = (params == null || params == "") ? null : params;

   var httpMethod = method ? method : "GET"; 
   /* 자바스크립트에서는 어떤 변수에 null 이 들어오면 false 로 인식하고, null 아닌 어떤 값이 들어오면 true 로 인식한다. */

   httpMethod = httpMethod.toUpperCase(); // 대문자로 변환해서 저장함.

   if(httpMethod != "GET" && httpMethod != "POST") {
      httpMethod = "GET";
   } // 이제 변수 httpMethod 에는 "GET" 또는 "POST" 만 들어오게 된다.

   if(httpMethod == "GET" && httpParams != null) {
      httpUrl = httpUrl + "?" + httpParams;
   }

   xmlHttpRequest.open(httpMethod, httpUrl, true);

   if(httpMethod == "POST") {
      xmlHttpRequest.send(httpParams);
   } else if(httpMethod == "GET") {
       xmlHttpRequest.send(null);
   }

   xmlHttpRequest.onreadystatechange = callback;

} // end of sendRequest (url, params, callback, method)

 

 

 

 
Document Object Model 과 XML

1. DOM (Document Object Model)과 HTML/XML

- DOM(Document Object Model) 은 문서를 객체를 표현하기 위한 표준으로서 HTML 이나 XML 등의 문서를 객체로 표현할 때 사용되는 API 이다.

- DOM API는 문서를 트리 구조로 표현하기 때문에 쉽게 이해할 수 있다.

- DOM API 에서 모든 것은 Node 로 표현되며, 문서의 각 구성 요소들은 모두 Node 또는 하위 인터페이스로 매핑된다.

 

• Document : 전체 문서를 나타낸다.
• Element : 각 태그를 나타낸다. <books> 나 <book> 과 같이 태그를 Element 노드 라고 부른다.
• Text : 예를 들어 <title>JAVA 프로그래밍</title> 에서 문자열 데이터인 JAVA 프로그래밍 문자열을 Text 노드 라고 부른다.
• CDataSection : XML 문서의 CDATA 영역의 문자열값을 CDataSection 노드 라고 부른다.
     

※ CDATA(Character DATA)란?
문자 데이터라는 뜻이다. 이것을 이해하려면 먼저 반대 개념의 PCDATA 를 알아야 한다. PCDATA 는 Parsed Character DATA 로 parser(해석기)에 의해 parsing(해석)되는 문자 데이터를 말한다. 해석을 한다라는 말은 문자 데이터 안에 XML 권고안에 규정되어 있는 문자로 쓰여 졌는지 조사하고, 또한 엔티티 참조가 있다면 엔티티 참조에 해당하는 값으로 치환하는 작업을 의미한다.