[ajax] 쉽게하는법 :: 깨알지식 , 공부공부
먼저 몸으로 배운 ajax 사용법에 대해..설명하고자 합니다.
간단하게 작성해야할 코드부분부터 소개하고 설명하겠어요.
==================jsp =====================
$("#id").click(function() {
$.ajax({
var test = $("#id").val();
type:"POST",
url:"onchang.do", //보내고자하는 servlet 매핑주소를 입력함
data:({"test ":test }), //위에 선언한 변수 test의 데이터를 보냄
success: function(data) { //function안에 data값은 servlet에서 보내주는 변수명임
if(data.trim() != "a") { //변수명이 "a"면 success를 타고 아니면 error로 설정
return false;
},
error : function() {
alert("data error");
}
});
});
====================java==================
@RequestMapping("/test.do")
public void onchang2(HttpServletRequest request,
HttpServletResponse response, Model model) throws Exception {
PrintWriter out = response.getWriter(); // ajax에서 데이터를 받고 다시 보낼수 있도록 선언
String data="a"; //이제 여기 안에서 db값 불러오고 지지고 볶은 후,
out.println(data); // 로직이끝나는 시점에서 data값을 전송함
그러면 위에 ajax에서 data="a" 이니까 , if문을 타고 로직을 수행함.
즉, id값을 찾아서 id값을 가진 데이터를 클릭 하게되면, ajax를 수행하다가 .do매핑주소로 들어간다. 그 동안 script는 멈춰있는상태가 되고, servlet로직을 수행하게된다. servlet로직을 수행후,
out(data)를 다시 ajax로 보내는데 여기서 data의 값을 비교 후, ajax에서 또 다른 수행을 하게된다.
모든 수행이 끝이 나면, id값을 클릭 했을 시, 필요한 이벤트처리를 쉽게 할 수 있다. 하지만 주의할 점은 .do를 최소한으로 만들어야 좋다. 왜냐하면 지극히 내생각이지만 db에서 query도 적게 만들 수 있고, 이벤트 실행할 때 마다 데이터를 보낼 때 시간이 오래 걸리는 것으로 기억한다.(몸으로..)
* $("#id).click(function(){}): → ajax → test.do → ajax → end
*부족한부분은 나중에 추가설명하겠습니다. 더 열공열공