YEJIN LEE

“Keep turnin’ the pages”

2 minute read

Ajax

  • Asynchronous Javascript and XML의 약자

  • 웹 애플리케이션에서의 풍부한 사용자 인터페이스 구현 기술
    • Javascript와 XML기반의 비동기 통신 방식
  • 7가지 기술의 조합
    • XHTML, CSS를 이용한 표현 방식
    • DOM을 이용한 동적 생성
    • XML, XSLT(eXtensible Stylesheet Language Transformations)를 이용한 데이터 처리
    • XHR(XML Http Request)를 이용한 비동기 통신
    • Javascript를 이용한 통합 제어


Ajax 웹 애플리케이션 모델

기존의 전통적인 웹 전송 방식은 서버에서 데이터를 처리해 만든 HTML을 브라우저에 전송하는 방식이었다.

현재는 HTML전체를 전송하지 않고, 필요한 일부 정보만 가벼운 형태의 XML데이터(ex. JSON, CSV)를 브라우저에 전송한다. 브라우저는 이 데이터를 가지고 Ajax 엔진에서 HTML, CSS로 작성하여 넘긴다.


Ajax 비동기 통신 모델

기존 방식은 클릭할 때마다 HTML 문서를 요청하여 해석해야 했다. 따라서 서버에서 요청한 HTML문서를 수신받기 전까지 클라이언트는 아무것도 못하고 기다려야했다.

그러나, 현재에는 HTTP 객체를 사용하여 서버와 통신한다. 서버에 요청한 결과를 다시 받기 전까지 계속 다른 일을 할 수 있게 되었다.


XHR 객체

  • XMLHttpRequest

브라우저와 서버는 HTTP 프로토콜을 사용하여 통신한다. 주로 하이퍼링크나 HTML폼을 사용하는데, 브라우저가 서버에 HTTP를 요청하면 서버에서 HTML형태로 브라우저에 송신한다. 이 때 불편한 점은 전체 정보가 아닌 필요한 일부분, 정제된 정보만을 송수신할 수 없다는 것이다.

현재는 이를 해결하기 위해 XHR 객체를 이용하여 서버와 클라이언트 사이 데이터를 송수신할 수 있게 되었다.


처리 단계

  1. XHR 객체 생성 ➡️ newXHR()
  2. 요청할 정보 지정 ➡️ open(송수신방식, URL, 비동기여부)
  3. 서버에 HTTP 요청 ➡️ send()
  4. 서버에서 데이터 처리
  5. 브라우저에 전송 ➡️ onreadystatechange이벤트, readyState, status 속성
  6. 브라우저에서 응답 수신 및 처리 ➡️ responseXML, responseText

1. XHR 객체 생성

  • new XMLHttpRequest();

  • 객체 생성 코드

      function newXHR(){
      var reqHttp;

      if(window.XMLHttpRequest){  // XHR 객체를 지원하는지 검사
          try{
              reqHttp = new XMLHttpRequest();
          }catch(e){
              reqHttp = null;
          }
      }

      if(!reqHttp){   // reqHttp가 null인 경우
          alert("지원하지 않는 브라우저");
      }
        
      return reqHttp;
  }

2. 요청할 정보 지정

  • open(송수신방식, URL, 비동기여부)

  • 송수신방식
    • GET : 주소에서 파라미터 값을 바로 받을 수 있다
    • POST : 별도로 데이터를 송신하기 때문에 중요하거나 복잡한 데이터인 경우 이 방식을 택한다
  • URL
    • GET : 주소?파라미터=값&파라미터=값..
    • POST : 주소만
  • 비동기 여부
    • 비동기가 true로 디폴트값
    • 동기 = false

3. 서버에 HTTP요청

  • send()
    • GET : send(null) or send(“”)
    • POST : send(파라미터=값&파라미터=값&..)

5. 브라우저에 전송

  • 송수신 상태가 변하면 onreadystatechange이벤트 발생

  • readyState 속성값
    • 0 : 초기화전
    • 1 : 로딩중
    • 2 : 로딩완
    • 3 : 서버처리
    • 4 : 서버처리완
  • status 속성값
    • 200 : 성공
    • 403 : 접근 금지
    • 404 : 파일 없음
    • 500 : 서버 내부 오류


코드 예제

객체 생성

funtion newXHR(){
    var req;
    if(window.XMLHttpRequest){
        try{
            req = new XMLHttpRequest();
        }catch(e){
            req = null;
        }
    }

    if(!req){
        alert("지원하지 않는 함수");
    }

    return req;
}

HTTP 요청 및 응답

  • 객체를 생성한 뒤 이벤트를 처리해 상태에 따라 응답
funtion loadDocXHR(fname, callBack){
    var req = newXHR();     // 객체 생성
    req.onreadystatechange = function(){
        if(req.readyState == 4){
            if(req.status == 200){    // 성공
                callBack(req);
            }
            else{       // 오류
                document.write(req.responseText);
            }
        }
    }

    req.open("GET", fname, true);
    req.send(null);
}

전체

<html>
    <head>
        <script language="javascript" src="newXHR.js" ></script>
    </head>

    <body>
        <input type="button" value="예제 연습1" onClick="Test01('ex01.xml')"/>
        <script>
            funtion Test01(fname){
                var Task = function(request){
                    msg = request.reponseText;
                    alert("Test01 : " + fname + "/" + msg);
                }

                loadDocXHR(fname, Task)
            }
        </script>
    </body>

</html>

You may also enjoy