AJAX GET 방식 관련 기초

AJAX란 ? 

 

Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자.

브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법임.

 

일반적으로 제이쿼리를 이용하여 AJAX를 사용하는 경우가 많지만 아래와 같이 XMLHttpRequest 객체를 선언하여 사용할 수 있다.

// XMLHttpRequest 객체 선언
ajax = new XMLHttpRequest();
 
function idchkbtn(){
   fid = document.getElementById('tid');
   fpassword = document.getElementById('tpassword');
   
   console.log(fid.value);
   console.log(fpassword.value);
 
   ajax.onreadystatechange = callbackajax;
   
   ajax.open('GET','/rest_idchk?id='+fid.value+'&pw=' + fpassword.value);
   ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   ajax.send();
}

onreadystatechange는 XMLHTTP의 상태(readyState)가 변경될 때 마다 callback함수를 호출한다.

-> callbackAjax

아래와 같이 Callback 함수 호출을 함. 즉, 서버단에 Response를 내려주면 callback함수가 호출된다고 할 수 있음.

function callbackajax(){
   if(ajax.readyState == 4){
       alert(ajax.responseText);      
   }
}

 

서버단

-> 아래와 같이 getParameter를 이용하여 서버에서 데이터를 받을 수있음.

    @RequestMapping("/rest_idchk")
    public int rest_idchk(HttpServletRequest request) {
        
        ModelAndView mav = new ModelAndView();
        HashMap<String, Object> map = new HashMap<String, Object>(); 
        String id =request.getParameter("id");
        String password = request.getParameter("pw");
        
        if(StringUtils.isEmpty(id) || StringUtils.isEmpty(password)) {
            
            mav.addObject("msg", "id 또는 비밀번호를 입력하시기 바랍니다.");
            return 0;
        }
        
        map.put("id", id);
        map.put("password", password);
 
        
        int count =0;
        try {
            count= infodao.loginAction(map);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
            
        if(count > 0) {
            return 1;
        
        } else {
            return 0;
        }
        
    }