Ajax - Ajax 기본 구동 원리

Ajax는 비동기식 통신 방식을 이용하여 페이지 이동없이 페이지를 변환 할 수 있는 기술이다. Ajax는 event에 의해 발행되기 때문에 event발생후 다른 작업을 할 수 있다.

▶ 장점
 - 페이지 이동 없이 고속으로 화면을 전환할 수 있다. 
 - 서버 처리를 기다리지 않고, 비동기 요청이 가능하다. 
 - 수신하는 데이터 양을 줄일 수 있고 클라이언트에게 처리를 위임할 수도 있다.

▶ 단점
 - Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다. 
 - Http클라이언트의 기능이 한정되어 있다. 
 - 페이지 이동 없는 통신으로 인한 보안상의 문제 
 - 지원하는 Charset이 한정되어 있다. 
 - 스크립트로 작성되므로 Debugging이 용이하지 않다. 
 - 요청을 남발하면 역으로 서버 부하가 늘 수 있음.


작동 순서
① jsp의 메인페이지에서 어떠한 이벤트가 발생된다.
② 발생한 이벤트는 script를 실행 시키고 ajax engine 으로 데이터를 전달한다.
③ Ajax engine은 request 객체를 생성하여 WAS로 보내주고 요청한 a.jsp파일을 찾는다.
④ WAS는 request를 분석하여 전달될 a.jsp페이지가 text페이지 인지 아니면 xml 데이터인지를 판단하여 적당한 데이터를 response에 데이터를 실어 보내고 결국 script부분으로 돌아온다.
⑤ 전달된 데이터를 원하는 위치에 삽입한다.

Ajax의 핵심
1. XMLHttpRequest Object 생성

윈도우판 IE에서 XMLHttp Object 생성하는 클래스
obj = new ActiveXObject("Microsoft.XMLHTTP")
obj = new ActiveXObject("MSXML2.XMLHTTP")

윈도우판 IE 이외에서 XMLHttp Object를 생성하는 생성자
obj = new XMLHttpRequest()

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

2. open method

obj.open(method, url, [async, [user, [ password ]]])
- obj는 위에서 생성한 XMLHttpRequest 객체

설명 : 요청을 초기화해서 HTTP 메소드 및 URL 등을 설정하는 메소드

method : GET/POST
url : 요청대상 url
       async(옵션) : 비동기 true, 동기 false (default : true)
       user(옵션) : 인증페이지에서 사용될 사용자 이름
       password(옵션) : 인증페이지에서 사용될 암호

- POST 방식 :
                     obj.open( 'POST', 'http://www.myweb.net/' )
                     send('data=1')

send에 파라미터로 전달될 값을 넣어준다.
예) send('userId="user01"&'userPw="123"'')

- GET 방식 :
                   obj.open( 'GET', 'http://www.myweb.net/', true, id, password )
                   send(null)

3. 요청 헤더 설정
setRequestHeader(header, 값)
설명 : 인수로 지정한 요청 헤더를 설정하는 메소드, open() 메소드가 먼저 호출되어야함.
open() 메서드와 send() 메서드 사이에 위치하여야 함.
header : 검색하고 싶은 헤더 이름
값 : 설정하고 싶은 값

예)obj.open( 'POST', 'http://www.myweb.net/' )
    obj.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')

    send('~~~~')

4. Http 요청 송신
send(body)
설명 : 요청을 송신하는 메소드

예)  var str = 'data=aaa&test=10'
      send(str)

5. 착신
요청이 송신되면 서버로부터 그에 대한 응답이 도착하는데, 언제 도착할지 모를때 이를 확인하기 위해 onreadystatechange이벤트를 이용한다.

obj.onreadystatechange = 핸들러 함수 이름
function 핸들러 함수 이름(obj)
 
예)
obj.onreadystatechange = func1
function func1() {
       if ( obj.readyState == 4 ) {
            alert(obj.responseText);
       }
}

readyState 값이 변화할때 데이터를 얻어 온다.

데이터가 정확히 처리 되었는지 안되었는지 확인 하는 방법

- readyState

위와 같은 표값으로 처리가 되었는지 안되었는지 확인 할 수 있다.

- status
3자릿수의 숫자(long)로 HTTP상태 코드를 나타내는 프로퍼티, send()가 성공한 뒤에 얻어낼 수 있다.

- statusText
HTTP상태 텍스트(영문)를 나타내는 프로퍼티
Opera 8에서는 "undefined"가 반환된다. 따라서, 크로스 브라우저를 실현하는 경우에는 statusText보다 status 쪽이 안전하다.

예)
obj.onreadystatechange = function () {
    if (obj.readState == 4 && obj.statusText == "OK") {
       alert(obj.responseText)
    }
}

보통의 방식
obj.onreadystatechange = function () {
    if (obj.readState == 4 && obj.status == 200) {
       alert(obj.responseText)
    }
}


5. 데이터

- xml 파일로 데이터를 받는 형식

xmlobj = obj.responseXML
요청에 대한 응답을 XML(DOMDocument)로 반환한 프로퍼티
xmlobj : XML 문서(Object data Type)
   
if (obj.readState == 4) {    //데이터 로딩이 되었으면
       // 응답을 취득
        var xmlDoc = oj.responseXML      //XML데이터를 전송 받겠다.
       // test tag를 배열로 set
        var nodes = xmlDoc.getElementsByTagName("test")    //XML문서에서 TAG NAME이 test인것의 정볼르 nodes에 저장한다.
       // 최초 test tag의 firstChild 값을 표시한다.
       alert(nodes[0].firstChild.nodeValue)                            //test라는 첫번째 노드[0]에서,첫번째 eliment[firstChild],값[nodeValue]
    }


jsp로 xml을 만들려면 다음과 같이 선언해야 한다.
<?xml version="1.0" encoding="euc-kr" ?>
<%@ page  contentType="text/xml; charset=EUC-KR"%>


- text 파일로 데이터를 받는 형식

value = obj.responseText
요청에 대한 응답을 텍스트로 돌려주는 프로퍼티

obj.onreadystatechange = function () {
    if (obj.readState == 4) {
       alert(obj.responseText)
    }
}

jsp페이지에서 text로 데이터를 전달 하려면 다음과 같이 선언해야 한다.
<%@ page contentType="text/plain; charset=euc-kr" %>