2017 - 10 - 10 (화)
기본사항 정리
- AJAX/JSON 활용 예제 [참고]
ID 중복 여부 확인 예제: https://shj7242.github.io/2017/12/03/Spring27/
ID 찾기 : https://shj7242.github.io/2017/12/05/Spring29/
한국지도 활용한 데이터 시각화 : https://shj7242.github.io/2018/01/16/geoInfo/
AJAX 대시보드 작업 [데이터 시각화] : https://shj7242.github.io/2018/01/18/chart3/
AJAX jQgrid : https://shj7242.github.io/2017/12/29/jQuery10/
1 .. 공통 Controller 관리
공통적으로 표시할 개채들을 공통 class 를 하나 생성하여 관리한다.
package com.study.common.util;
public class CommonUtil {
public static String comboSelect(){
String sComboScript = "<select id = 'searchdate'>"
+"<option value = 'all' selected=''>-select-</option>"
+"<option value = '1d'>1일</option>"
+ "<option value = '1w'>1주</option>"
+"<option value = '1m'>1달 </option>"
+"<option value = '6m'>6개월</option>"
+"<option value = '1y'>1년</option>"
+"</select>";
return sComboScript;
}
}
공통적으로 쓰는 파일을 분리해준다면 Controller의 코드가 더욱 간결해질 것이다. Spring 에서는 편리하게 메소드단위 매핑을하여 여러개의 JSP 를 하나의 Controller 로 매핑이 가능하다. 즉, 그만큼 코드소스가 길어질 수 있기 때문에 가능한 공통기능을 위의 코드처럼 공통 Class로 빼주는게 좋다.
//Controller
@RequestMapping("/study/showMessage.html")
public String showMsg(Model model, HttpServletRequest req, HttpServletResponse res) {
model.addAttribute("message","hello! Spring");
model.addAttribute("combo", CommonUtil.comboSelect());
// combo 의 값으로 Static형태로 선언된 comboSelect() 메소드의 반환값을 불러온다. >> ComboBox 하나를 생성한다.
return "showMessage";
}
2 .. Ajax / JSON
Ajax
Ajax (Asynchronous JavaScript and xml) : 비동기식 소통을 위한 방법이다. 시계처럼 실시간으로 계속 바뀌어져야하는 부분이 있을 수 있다. 이 때 화면전체를 request 하고 response 받는다면 심각한 낭비일 것이다. Ajax 를 활용해서 특정 부분만을 새로고침하지 않더라도 고속전환으로 지속적으로 갱신되는 효과를 볼 수 있다.
JSON
JSON(JavaScript Object Notation) 은 웹 상에서 데이터를 주고받을 때 경량으로 주고받기 위한 방법이다. JSON 은 {속성 = 값} 쌍으로 되어있는 데이터 오브젝트이다. 보통 AJAX 통신에 있어서 데이터를 주고받을 때 주로 사용한다.
기초 예제 (MappingJacksonJsonView)
JSON을 사용하기 위해 다음의 코드를 Spring 폴더 내의 xml 문서 (dispatcher-Servlet)에 추가해준다. jsonView 를 인식하기 위해 beanNameViewResolver가 필요하다. (Application에는 수많은 Resolver가 존재한다. 이 때 우선순위를 0으로 하여 최우선 [ p:order=0 ] 으로 설정해준다.) 이 JSON 을 활용하여 Ajax 통신을 해볼것이다.
<bean class="org.springframework.web.servlet.view.BeanNameViewResolver"
p:order="0" />
<bean class="org.springframework.web.servlet.view.json.MappingJacksonJsonView" id="jsonView">
<property name="contentType" value="application/json; charset=UTF-8" />
</bean>
index.jsp 파일에서 getMessage() function을 호출한다. result()함수에는 data의 결과값 즉, JSON의 result키의 값을 보여준다는 뜻이다. ajax형태로 값을 전송하기위해 $.ajax() 형태로 보낼 값들을 세팅한다.
<!--index.jsp-->
<script>
function getMessage(){
$.ajax({
method : "POST",
url : "<c:url value='/study/getMessage.html'/>",
dataType : "JSON",
data : null,
error : function(){alert('error');},
success : result
})
}
function result(data){
alert(data.result)
}
</script>
<body>
<input type="button" value="getMessage" onClick="javascript:getMessage()"/>
</body>
url, param, method, callback 인자가 들어가는 function 함수를 정의해준다.
callback 함수 : callback의 일반적인 함수는 파라메터를 받아 함수 내부로 진입하고 결과값을 돌려줄 때는 return키워드를 사용해 호출자에게 값을 돌려주는 Call by value 또는 파라미터 자체를 전달하는 형태의 Call by reference형태가 있다.
//common.js
var util={};
util.requestSync = function(url,param, method, callback){
$.ajax({
method : method,
url : url,
dataType : "JSON",
data : param,
error : function(){alert('error');},
success : callback
});
}
Controller 에서 getMessage.html 을 매핑해준다. JSON형식(KEY:VALUE) 형태와 같게 MAP에 result , item Key 값에 대한 value 를 각각 저장한다. ModelAndView 를 통해 jsonView 에 저장된 값을 return 한다.
//Controller.java
@Controller
public class StudyController {
@RequestMapping("/study/getMessage.html")
public ModelAndView getMessage() { //매개변수가 없다.
Map map = new HashMap();
map.put("result", "비동기 통신 결과");
map.put("item", "비동기 통신 아이템");
return new ModelAndView("jsonView",map); //jsonview 는 dispatche.xml 의 jsonview 를 가져옴.
}
}
다음은 Ajax 통신예제 결과이다.
다음은 전달된 DataObject인 JSON이다.
