by-nc-sa     개발자, DBA가 함께 만들어가는 구루비 지식창고!

2.3 통신 예




통신 예

① 클라이언트의 이벤트가 Ajax 이벤트를 발생시킨다.

    <input type="text" d="email" name="email" onblur="validateEmail();"> 

② XMLHttpRequest 객체가 생성됨

  • open() 메소드를 통해 호출이 성립되는데, URL은 특정 HTTP메소드와 함께 설정됨
  • send() 메소드를 호출함으로써 비로소 요청이 발생함
        var xmlHttp;
    
        function validateEmail(){
          var email = document.getElementById("email");
          var url = "validate?email=" + escape(email.value);
          if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          }else {
            xmlHttp = new XMLHttpRequest();
          }
    
          xmlHttp.open("GET", url);
          xmlHttp.onreadystatechange = callback;
          xmlHttp.send(null);
        }
    
    

③ 요청이 서버로 전달된다. 서블릿이나 CGI 스크립트 등 서버측 프로그램을 호출할 것이다.

④ 요청을 받은 서버는 데이타 저장소나 타 시스템에 접근하여 작업하게 된다.

⑤ 요청이 브라우저로 돌아온다.

  • Context-Type이 text/xml형식으로 지정되었기 때문에 XMLHttpRequest 객체는 text/html 유형의 결과만을 처리할 수 있다.
  • 브라우저가 결과값을 개쉬하는 일이 없도록 헤더를 설정해야 한다는 사실을 유념하도록 한다.
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Pragma", "no-cache");
    

⑥ 응답이 변환되면 callback() 함수를 부른다

 function callback(){
    if(xmlHttp.readStat == 4) {         //complete
      if(xmlHttp.status == 200) {       //상태정상
        //do something interesting here
       //응답 후 로직을 구현하면 된다. 
      }
    }
  }

그림. Ajax를 통한 클라이언트-서버간 상호작용

문서에 대하여

문서정보

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.