Ajax기초

Ajax란?

Asynchronous JavaScript and XML(비동기 방식의 자바스크립트와 XML)

Ajax를 구성하는 요소들

• XMLHttpRequest : 웹 서버와 통신담당. 사용자의 요청을 웹에 전송, 웹서버로부터 받은 결과를 웹 브라우저에 전달
• DOM : 문서의 구조를 나타낸다.
• CSS : 글자 색, 배경색, 위치, 투명도 등등 UI관련 부분
• 자바스크립트 : 사용자로 부터 이벤트(마우스 드래그나 버튼 클릭)를 받아 XMLHttpRequest객체을 통해서 웹서버에 요청 밑 응답을 받아 화면 조작

Ajax와 기존방식의 차이점

• 웹 브라우저가 아닌 XMLHttpReqeust 객체가 웹 서버와 통신
• 웹 서버의 응답 결과가 HTML이 아닌 XML 또는 단순 텍스트
• 페이지의 이동없이 결과가 화면에 반영

XMLHttpRequest 객체

XMLHttpRequest 프로그래밍 순서

1. XMLHttpReqeust 객체 구하기
2. 웹 서버에 요청 전송하기
3. 웹 서버서 응답이 도착하면 화면에 반영하기

1. XMLHttpRequest 객체 구하기

IE와 나머지 브라우저가 서로 다름. IE는 ActiveX 컴포넌트로 제공하며, 나머지 브라우저들은 XMLHttpRequest클래스를 기본적으로 제공하고 있다.

<script type="text/javascript">
  var httpRequest = null;

  function getXMLHttpRequest() {
    // IE
    if (window.ActiveXObject) {
      try {
        return new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
        try {
          return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e1) { return null; }
      }
    }
    // FF, Opera...
    else if (window.XMLHttpRequest) {
      return new XMLHttpRequest();
    } else {
      return null;
    }
  }
</script>

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

• open() 함수 : 요청의 초기화, GET/POST 방식 선택, 접속할 URL
• send() 함수 : 웹 서버에 요청전송

2.1 open()함수의 인자

httpReqeust.open("GET", url, true);
순서대로

1. HTTP 메소드(GET, POST)
2. 접속할 URL
3. 동기/비동기 방식 지정

2.2 GET방식 전달의 예

httpRequest = getXMLHttpRequest();
httpReqeust.open("GET", "/test.jsp?id=2&passwd=1111", true);
httpReqeust.send(null);

2.3 POST방식 전달의 예

httpRequest = getXMLHttpRequest();
httpReqeust.open("POST", "/test.jsp", true);
httpReqeust.send("id=2&passwd=1111");

3. 서버응답 처리하기

3.1 onreadystatechange, 콜백함수

httpRequest = getXMLHttpRequest();
httpRequest.onreadystatechange = callbackFunction;
httpReqeust.open("POST", "/test.jsp", true);
httpReqeust.send("id=2&passwd=1111");

// 콜백 함수 function callbackFunction() {
    ....
}

3.2 readStatus

바로위의 httpRequest.onreadystatechange에서 명시한 콜백함수는 readyStatus라는 프로퍼티의 값이 변경 될때마다 호출된다.

값	의 미	설 명
0	UNINITIALIZED	객체만 생성되고 아직 초기화되지 않은 상태(open메소드가 호출되지 않음)
1	LOADING	open메소드가 호출되고 아직 send메소드가 불리지 않은 상태
2	LOADED	send메소드가 불렸지만 status와 헤더는 도착하지 않은 상태
3	INTERACTIVE	데이터의 일부를 받은 상태
4	COMPLETED	데이터를 전부 받은 상태. 완전한 데이터의 이용 가능

 function callbackFunction() {
  if(httpRequest.readyState == 1 || httpRequest.readyState == 2 ||
   httpRequest.readyState == 3) {
   // 작업중임
  } else if(httpRequest.readyState == 4) {
   // 서버에서 완전한 응답이 도착한 경우
   // 응답결과에 따라 알맞은 작업 처리
  }
 }

readyState 값이 2, 3 인 경우 웹 브라우저에 따라 다르게 처리된다. 따라서 readyState의 값을 사용할 때는 1과 4를 사용하는 것이 크로스브라우저를 지원할 수 있는 가장 알맞은 밥법이다.

3.3 status/statusText

웹 서버로부터 응답이 도착하면 웹 서버에서 처리가 올바르게 수행되었는지 확인해야한다. XMLHpptRequest객체는 웹 서버가 전달한 상태코드를 status 프로퍼티에 저장한다.

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

XMLHttpReqeust는 statusText프로퍼티도 제공하는데, 위의 표의 텍스트 문장을 저장한다. (오페라 8.51버전까지는 제공하지 않는다고 함.)

지금까지의 소스~

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

3.4 responseText

서버로부터 응답이 도착한 것을 확인, 서버가 요청을 바르게 수행했을 경우 (readyState == 4 && status == 200) 단순 텍스트로 참조