JSP에서 비동기 통신 ajax로 데이터 넘기기.

ajax를 이용하면 비동기 통신이 가능하다.
이것은, 페이지의 별다른 리로드 없이 현재 페이지의 상태는 유지한채 서버와 통신하여 데이터만 가져올 수 있는데
예를 들어 회원 가입을 할 경우 각 폼에 사용자가 입력을 한 후 ajax를 이용하여 액션을 취하면, 현재 입력 되어 있는
폼값은 그대로 유지한채 데이터만 통신하여 가져올 수 있다.

 

ex > id 중복 체크 경우, 현재 페이지의 각 폼값은 그대로 유지한채,
액션이 취해지면 해당 액션에서 id 중복 체크 데이터 결과만 리턴 받을 수 있다.

 

* 해당 jsp 페이지에서 폼 입력 view를 만들고, ajax 프레임워크를 import 시킨다.
관련 스크립트 파일은 자료실에 올려 놓았다..
ex> <script type="text/javascript" src="../css/prototype.js"></script>

 

 
* 자바 스크립트를 이용하여 폼 데이터 전송
ex> var myAjax 참고. ( 액션으로 폼 데이터를 전송 시키는 방법 )

<script type="text/javascript">

 /*
 * DB에 현재 입력 된 ID가 존재 하는 비교 한다.
 */
 function idChk()
 {
  var vForm = document.vForm;
  var id = vForm.id.value;
  
  if(id == "")
  {
   alert("사용하실 아이디를 입력 후 ID 중복 체크를 하십시오.");
   vForm.id.focus();
   return;
  }
    
  var url = "../login.do?task=idChk";
  var myAjax = new Ajax.Request(url,
     { 
      method: 'post',
      parameters: Form.serialize('vForm'),
      onComplete: callbacka
     }
    );
 }

 

* 액션에서 리턴 된 값을 받는 방법
ex> onComplete 에 명시된 callbacka 이름의 자바 스크립트로 해당 리턴값을 받을 수 있다.

function callbacka(originalRequest)
{
 var forward = originalRequest.responseText;
    
 // 이미 존재하는 id 라 가입이 불가능한 아이디일 경우.
 if( forward == "idChkNo" )
 {
  alert("이미 존재하는 아이디 입니다.");
 }
 else // idChkOk 가 넘어올 경우 가입이 가능한 아이디.
 {
  alert("사용이 가능한 아이디 입니다.");
 }
}

 

 

* 액션에서 ajax로 넘어온 데이터를 가공 후 포워드 시키기
ex> request.getParameter(); 를 이용하여 jsp 에서 넘어온 폼 데이터 값을 가공하고, 다시 서블릿 forward 시 아래와 같이 사용.

String task = req.getParameter("task");
String forward = task;
.
.
.
else if(task == null || task.equals("idChk")) // 회원 가입 페이지에서 id 중복 체크일 경우.
{
 forward = idChk(req);
   
 res.setContentType("text/xml;charset=EUC-KR"); // 한글이 깨질 경우 처리.
 res.setHeader("Cache-Control", "no-cache");
 res.getWriter().write(forward); // forward 변수에 담긴 id 체크 상황을 자바스크립트로 전달
   
 forward="";
}
.
.
.
return map.findForward(forward);

* forward = ""; 이부분은.. 마지막 forward를 스트럿츠로 return 시키는 과정에서
jsp 페이지 전체를 forward에 담아 문자열로 넘기는 바람에, 해당 변수 데이터값만 불러오고자
한번 null 값으로 초기화 하였다.. 이부분을 몰라;; 한참을 헤맸.... ㄱ- ;;;