Ajax 정복하기

최범균의 ajax를 공부를 하면서 필요한 부분을 기술하였으며 해당 부분은 ajax.js로 만들어서 사용을 할수가 있습니다.

var ajax = {};
ajax.xhr = {};
ajax.Event = {};

/*
 * Ajax(Asynchronous Javascript and XML) 개념 익히기
 *
 * XMLHttpRequest 사용하기
 *
 * XMLHttpRequest 객체를 사용해서 요청 전송할때 필요한 함수
 *
 * open() : 요청의 초기화. GET/POST선택. 접속할 URL 입력
 * send() : 웹 서버에 요청 전송
 * onreadystatechange = callbackFunction
 *
 * open() 인자 설명
 *
 * 1번째 인자 : HTTP 메소드 지정 (form 메소드)
 * 2번째 인자 : 접속할 URL
 * 3번째 인자 : 동기/비동기 방식 지정
 *
 * ex)
 *
 * GET 방식일 경우
 *
 * httpRequest = getXMLHttpRequest();
 * httpRequest.open("GET", "/test.jsp", true);
 * httpRequest.send(null);
 *
 * POST 방식일 경우
 *  
 * httpRequest = getXMLHttpRequest();
 * httpRequest.open("GET", "/test.jsp", true);
 * httpRequest.send("id=admin&pw=1234");
 */

/*
 * onreadystatechange 프로퍼티 설명
 *
 * XMLHttpRequest 객체에 onreadystatechange 프로퍼티에 콜백 함수를 지정하면 웹 서버로부터
 * 응답이 도착했을 때 콜백 함수가 호출된다. 이 때 실제로 onreadystatechange에서 명시한 콜백 함수
 * 는 readyState라는 프로퍼티의 값이 변경될 때마다 호출된다.
 *
 *
 * readyState 프로퍼티 설명
 *
 *  0 : UNINITIALIZED - 객체만 생성되고 아직 초기화되지 않은 상태(open 메서드가 호출되지 않음)
 *  1 : LOADING - open 메서드가 호출되고 아직 send 메서드가 불려지지 않은 상태
 *  2 : LOADED - send 메서드가 불려졌지만 status와 헤더는 도착하지 않은 상태
 *  3 : INTERACTIVE - 데이터의 일부만 받은 상태
 *  4 : COMPLETED - 데이터를 전부 받은 상태. 완전한 데이터의 이용 가능
 * 
 *  ex)
 *  function callbackFunction(){
 *   if(httpRequest.readyState == 1){
 *     
 *   }else if(...){
 *   
 *   }else if(httpRequest.readyState == 4){
 *    //서버로부터 응답이 도착
 *          //완료후 작업할 내용을 작성한다.
 *   }
 *  }
 *   
 */

/*
 * 서버로부터의 응답 상태 : status / statusText
 *
 * 웹 서버로부터 응답이 도착하면 웹 서버에서 처리가 올바르게 수행되었는지 확인해야 한다.
 * 웹 서버는 작업을 올바르게 실행했는지, 처리 도중에 에러가 발생했는지등의 상태 코드를 통해서 알려주는데,
 * XMLHttpRequest 객체는 웹 서버가 전달한 상태 코드를 status 프로퍼티에 저장한다. status 프로퍼티에
 * 저장되는 주요 상태 코드는 다음과 같다.
 *
 *  HTTP 주요 상태 코드
 * 
 *  200 : OK - 요청설명
 *  403 : Forbidden - 접근 거부
 *  404 : Not Found - 페이지 없음
 *  500 : Internal Server Error - 서버 오류 발생
 * 
 *  ex)
 * 
 *  function callbackFunction(){
 *   if(httpRequest.readyState == 4){
 *    if(httpRequest.status == 200){
 *     //정상적인 수행
 *        //완료후 작업할 내용 작성
 *       }else{
 *        alert('에러 발생' + httpRequest.status);
 *       }
 *      }
 *  }
 */

/*
 * 응답 데이터 사용하기 : responseText, responseXML
 *
 * XMLHttpRequest에서 정상적인 요청이 이루어질 경우 요청한 페이지에서 넘겨준 값을 알맞게 처리할때
 * 사용한다. 텍스트 형식과, XML형식이 있다.
 *
 * function callbackFunction(){
 * if(httpRequest.readyState == 4){
 *   if(httpRequest.status == 200){
 *    var txt = httpRequest.responseText; //text일 경우
 *     var xml = httpRequest.responseXML; //XML 형식인 경우
 *  
 *     alert(txt);
 *   }
 *  }
 * }   
 */

/*
 * 동기 방식과 비동기 방식의 실행 차이
 *
 * XMLHttpRequest의 open() 함수는 인자를 세 개를 받는데, 그 중 마지막 인자는 동기/비동기 여부를
 * 표시한다. 아래 코드처럼 open() 함수에 세 번째 인자 값을 true로 지정하기 되면 비동기 방식으로 호출된다.
 *
 *  1. httpRequest = getXMLHttpRequest();
 *  2. httpRequest.onreadystatechange = callbackFunction;
 *  3. httpRequest.open('GET', '/test.jsp', true) <-- 마지막 인자
 *  4. httpRequest.send(null);
 *  5. //비동기 방식
 *  6. callSomeFunction();
 * 
 * 
 *  비동기 방식 - send()함수가 호출된 뒤 곧바로 6.줄의 callSomeFunction 함수가 실행된다.
 *  동   기 방식 - send()함수가 호출되면, 서버와의 통신이 완전히 완료된 이후에 send() 함수 이후의
 *          코드 6.줄의 callSomeFunctiong함수가 실행된다.
 */

/*
 * 파라미터의 한글 처리 방법 : "name=" + encodeURIComponent('한글');
 */

 

/*
 * ajax 실행
 *
 * 사용법
 * new ajax.xhr.Request('targetPage.jsp', 'num=1&id=test', targetFunction, 'POST');
 * @param url 요청 URL
 * @param params 인자값
 * @param callback 콜백함수
 * @param method POST,GET
 */
ajax.xhr.Request = function(url, params, callback, method){
 this.url = url;
 this.params = params;
 this.callback = callback;
 this.method = method;
 this.send();
}

ajax.xhr.Request.prototype = {
 /**
  * Ajax HttpRequest 객체를 구한다.
  * @return
  */
 getXMLHttpRequest: function(){
  if(window.ActiveXObject){ //IE에서 XMLHttpRequest 구하기
   try{
    return new ActiveXObject("Msxml2.XMLHTTP"); //IE중에서도 Microsoft.XMLHTTP 보다 이전 버전 이므로 먼저 구한다.
   }catch(e){
    try{
     return new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e1){
     return null;
    }
   }
  }else if(window.XMLHttpRequest){ //IE 이외의 파폭,오페라 같은 브라우저에서 XMLHttpRequest 구하기
   return new XMLHttpRequest;
  }else{
   return null;
  }
 },
 /**
  * Ajax 통신을 한다.
  * @return
  */
 send: function(){
  this.req = this.getXMLHttpRequest();
  
  var httpMethod = this.method ? this.method : 'GET';
  if(httpMethod != 'GET' && httpMethod != 'POST'){
   httpMehtod = 'GET';
  }
  
  var httpParams = (this.params == null || this.params == '') ? null : this.params;
  var httpUrl = this.url;
  
  if(httpMethod == 'GET' && httpParams != null){
   httpUrl = httpUrl + "?" + httpParams;
  }
  
  this.req.open(httpMethod, httpUrl, true);
  this.req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  
  var request = this;
  this.req.onreadystatechange = function(){
   request.onStateChange.call(request);
  }
  this.req.send(httpMethod == 'POST' ? httpParams : null);
 },
 /**
  * 콜백함수 호출
  * @return
  */
 onStateChange: function(){
  this.callback(this.req);
 }  
}
/**
 * 이벤트 리스너 등록
 */
ajax.Event.addListener = function(element, name, observer, useCapture){
 useCapture = useCapture || false;
 
 if(element.addEventListener){ //기타 브라우저
  element.addEventListener(name, observer, useCapture);
 }else if(element.attachEvent){  //IE 브라우저
  element.attachEvent('on' + name, observer);
 }
}
/**
 * 등록된 이벤트 리스너 삭제
 */
ajax.Event.removeListener = function(element, name, observer, useCapture){
 useCapture = useCapture || false;
 
 if(element.removeEventListener){ //기타 브라우저  
  element.removeEventListener(name, observer, useCapture);
 }else if(element.detachEvent){  //IE 브라우저
  element.detachEvent('on' + name, observer);
 }
}

/**
 * 이벤트 대상 반환
 */
ajax.Event.getTarget = function(event){
 if(event == null) return null;
 if(event.target) return event.target; //W3C 표준 이벤트 타켓
 else if(event.srcElement) return event.srcElement; //구버전의 IE 타겟
 return null;
}

/*
 * 마우스 이벤트 종류
 *
 * click : 마우스 버튼 클릭시 발생
 * dbclick : 마우스 버튼 더블 클릭 발생시 발생(비표준)
 * mousedown : 마우스 버튼이 눌렸을 때
 * mouseup : 마우스 버튼을 뗐을 때
 * mouseover : 마우스가 영역 안으로 들어왔을 때
 * mousemove : 마우스가 영역 안에서 이동할 때
 * mouseout : 마우스가 영역 밖으로 나갈 때
 *
 */

/*
 * 마우스 클릭 버튼 판별하기
 *
 * button 프로퍼티를 사용(event.button)
 * 또는 which 프로퍼티 사용(파이어폭스, 사파리, 모질라 지원)
 *
 * button 프로퍼티 (파이어 폭스/모질라)
 * 0 : 일반버튼(보통 왼쪽 버튼)
 * 1 : 추가 버튼(보통 가운데, 또는 휠 관련)
 * 2 : 콘텍스트 버튼(보통 오른쪽 버튼)
 *
 * button 프로퍼티 IE 
 * 1 : 왼쪽 마우스 버튼 (단 click 이벤트일 경우는 0 을 반환)
 * 2 : 오른쪽 마우스 버튼
 * 3 : 휠(가운데)
 *
 * which 프로퍼티 사용 (IE 경우 undefind 값이 없음)
 * 1 : 왼쪽
 * 3 : 오른쪽
 * 2 : 휠(가운데)
 *
 */

/*
 * 마우스 발생 위치 정보
 *
 * clientX : 웹 브라우저에서 출력되는 영역에서 X 좌표값을 반환 --> X
 * clientY : 웹 브라우저에서 출력되는 영역에서 Y 좌표값을 반환 
 * screenX : 전체 화면에서 X 좌표값을 반환한다. --> X
 * screenY : 전체 화면에서 Y 좌표값을 반환한다.
 *
 */

/*
 * 브라우저 안에 스크롤 된 마우스의 마우스의 좌표 구하기
 *
 * scrollLeft, scrollTop를 이용
 *
 * clientX, clientY의 마우스 좌표를 구한 영역에 위에 코드를 사용하여 스크롤 된
 * 영역만큼 더해준다.
 */

/*
 * 마우스 이벤트로 작업을 할 경우는 오른쪽 마우스 클릭은 가급적 사용하지 않느것이 좋다
 * 이유는 클릭 이벤트 자체를 지원하지 않는 브라우저가 있기 때문이다.
 */

/**
 * 마우스 좌표값을 반환한다.
 */
ajax.Event.getMouseXY = function(event){
 var mouseX = event.clientX;
 var mouseY = event.clientY;
 
 var dd = document.documentElement; //W3C 표준 (최신 브라우저에서는 지원)
 var db = document.body; //구버전의 경우 (document.documentElement 미지원 경우)
 
 if(dd){
  mouseX += dd.scrollHeight;
  mouseY += dd.scrollTop;
 }else if(db){
  mouseX += db.scrollHeight;
  mouseY += db.scrollTop;
 }
 
 return {x: mouseX, y: mouseY};
}

/**
 * 마우스 왼쪽 버튼 클릭 여부를 boolean 형식으로 반환한다.
 */
ajax.Event.isLeftButton = function(event){
 return (event.which) ? //which 프로퍼티 여부가 존재하는지 여부
   evnet.which == 1 && event.button == 0 : //파이어폭스/모질라
    (event.type == 'click') ? event == 0 : event.button == 1; //IE경우
}

/**
 * 마우스 오른쪽 버튼 클릭 여부를 boolean 형식을 반환한다.
 */
ajax.Event.isRightButton = function(event){
 return event.button == 2; //오른쪽 버튼의 경우는 IE, 파이어폭스/모질라가 모두 동일
}

/*
 * 키보드 이벤트
 *
 * keydown : 키보드를 누를 때 발생한다.
 * keyup : 키보드에서 뗄 때 발생한다.
 * keypress : 키보드를 누를 때 발생한다.(비표준)
 */

/*
 * 키보드 이벤트 프로퍼티
 *
 * keyCode : 키 코드값
 * ctrlKey : Ctrl 키를 누른 경우 true
 * shiftKey : Shift 키를 누른 경우 true
 * altKey : Alt 키를 누른 경우 true 
 */