쒸임의 블로그

  <script language="javascript">
//-Ajax라고 특별할게 없다. 자바스크립트다.
  var req;
//-XMLHttp객체 (이 객체를 이용해서 이전방식의 페이지이동 데이터 처리를 한다.
  function initRequest()
//-XMLHttpObject를 초기화 한다.
  {
      if(window.XMLHttpRequest)
      {
//-모질라 기반에서
          req=new XMLHttpRequest();
      }
      else if(window.ActiveXObject)
      {
//-IE기반에서
          req=new ActiveXObject("Microsoft.XMLHTTP");
      }
  }
  function validateUserId()
//-언제 XMLHttp객체를 사용할것인가? 이 함수를 호출하면 사용된다.
  {
      initRequest();
      req.onreadystatechange=processRequest;
//-XMLHttp객체를 이용하여 통신을 한 결과물을 가지고 어떤일을 할것인가? processRequest 함수에서 이를 이용하는 코드를 작성한다.

      target1=document.getElementById("userid");
      target2=document.getElementById("passwd");

      var url="login.php";
      req.open("POST",url,true);
//-POST방식으로 위의 URL을 열고
      req.setRequestHeader("Method","POST "+url+" HTTP/1.1");
      req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      req.send("userid="+escape(target1.value)+"&pwd="+escape(target2.value));
//-데이터를 보낸다.(페이지 이동이 없다) 위의 두줄은 POST이기때문에 추가되는 헤더.
  }
  function processRequest()
//-XMLHttp객체가 데이터를 전송한후 결과 처리를 하는 함수.
  {
      if(req.readyState==4)
      {
//-URL이 존재한다면!
          if(req.status==200)
          {
//-URL을 성공적으로 읽어 드리면!
              if(req.responseText=="MATCH")
//-응답된 URL의 텍스트가 MATCH이라면 처리 이자리에 XML데이터가 올수 있어 더욱 복잡한 처리가 가능하다.
              {
                  window.location="main.html";
              }
              else if(req.responseText=="NOUSER")
              {
                  alert("NOUSER EXIST");
                  document.getElementById("loginfrm").reset();
                  document.getElementById("userid").focus();
              }
              else if(req.responseText=="NOTMATCH")
              {
                  alert("INCORRECT PASSWORD");
                  document.getElementById("passwd").value="";
                  document.getElementById("passwd").focus();
              }
          }
      }
  }
  </script>

이처럼 Ajax란 것은 자바스크립트에서 XMLHttpObject를 사용하는것 이상도 이하도 아니다. 단지 이러한 기법을 사용해서 Ajax란 이름이 붙여진것과 같이 비동기적인 처리를 웹에서도 할수 있다는 의미가 되며, 쉽게 풀어쓰면 로그인시에 타닥,타닥하면서 데이터 처리를 위해서 페이지가 이동되던것을 뒷단으로 숨길수 있다는 소리이다.
게다가, 이러한 데이터의 교환에서 XML이 중요한 수단으로 사용되며, 이러한 이유로 인하여 web 2.0의 중요한 한 자리를 Ajax가 차지하고 있다는 것이다.