나는 Spring3.x framework에서 JQuery를 이용한 Ajax 사용 환경을 구축하려고 한다.
페이지에서 클릭 이벤트가 일어났을 때 서버에서 적당한 값을 가져와 노출하는 서비스를 만들려고 한다. 아주 단순한 예제이지만 기본 개념을 이해하는데는 무리가 없을 것이다.
준비사항은 Spring3.x framework, JQuery, Ajax에 대한 기본적인 이해를 하고 있다는 가정하에 시작한다는 것을 잊지 말아야 한다.
AjaxTestContorller.java
package study.web.jini.sample.ajax;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class AjaxTestController {
@RequestMapping(value = "sample/ajax/test.jws", method=RequestMethod.GET )
public ModelAndView ajaxTestMethod(HttpServletRequest req, HttpServletResponse res ) throws Exception {
return new ModelAndView("sample/ajaxtest");
}
/**
* Ajax - @ResponseBody 어노테이션을 이용해 보자.
* @param request
* @return
* @throws Exception
*/
@RequestMapping(value="sample/ajax/click.jws", method=RequestMethod.POST)
public @ResponseBody String clickMethod (HttpServletRequest request) throws Exception {
String str = "CLICK TEST success!!";
return str;
}
}
"sample/ajax/test.jws" 를 호출 할 경우 JQuery를 사용한 ftl(freemarker) 페이지로 이동하도록 controller를 생성한다.
그리고 Ajax를 사용하기 위해 @ResponesBody Annotation을 이용하여 Ajax 이벤트 이후에 수행할 process에 대한 메소드를 정의한다.
아래는 Ajax가 실행되는 페이지 ftl 이다.
<title>Ajax Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script type="text/javascript" src="/js/jquery-1.4.4.js"></script>
<script type="text/javascript">
/*
* jQuery $.ajax()
*/
function doAjaxAction() {
$.ajax({
type: "POST",
url: "/sample/ajax/click.jws",
//data: ({Id:$("#Id").val(), Pwd:$("#Pwd").val()}),
//contentType: "text/plain; charset=euc-kr",
success: function(data) {
if(data != null) {
$("#RsltTblAjax").html(data);
} else {
$("#RsltTblAjax").html("null 입니다.");
}
},
error: function(e){
alert('error' + e);
}
});
}
</script>
<!-- HTML -->
<br>
<h3>Ajax Test !!</h3>
<br>
<br>
<br>
<a href="#" onclick="doAjaxAction();">CLICK!!</a>
<p id="RsltTblAjax"></p>
페이지 내에 CLICK!! 링크를 클릭할 경우 "/sample/ajax/click.jws"를 호출하여 ajax 연동을 하게 된다. 위의 내용은 성공 할 경우 Controller내의 clickMethod를 호출하고 결과 값으로 "CLICK TEST success!!"를 리턴하는 내용이다.
아래는 Spring3.x Framework의 servelt-context.xml 내용이다.
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
<!-- Enables the Spring MVC @Controller programming model -->
<annotation-driven />
<beans:bean id="viewResolver" class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
<beans:property name="order" value="2" />
<beans:property name="cache" value="true"/>
<beans:property name="prefix" value=""/>
<beans:property name="suffix" value=".ftl"/>
<beans:property name="contentType"><beans:value>text/html; charset=euc-kr</beans:value></beans:property>
<beans:property name="exposeSpringMacroHelpers"><beans:value>true</beans:value></beans:property>
</beans:bean>
<context:component-scan base-package="study.web.jini" />
</beans:beans>
댓글 없음:
댓글 쓰기