파라미터 넘기기

• POST, GET, PUT 차이

---

Get : 요청받은 url의 정보를 검색하여 응답

     특징 - url에 데이터 포함, 데이터를 header에 포함하여 전송, 전송 길이 제한, 보안 취약, 캐싱 가능 ( 한번 접근 후 빠          르게 접근 가능하도록 레지스터에 데이터를 저장시켜 놓는 것)

Post : 요청된 자원을 생성한다. 새로 작성된 리소스인 경우 http 헤더 항목 Location : URL 주소를 포함 하여 응답

     특징 - url에 데이터 노출하지 않고 데이터를 body에 포함 ( body의 데이터를 설명하는 Content-Type이라는 헤더 필드가 들어가며 데이터 타입을 명시 ) , 보안 O, 전송 길이 제한 X , 캐싱 X , 텍스트박스, 라디오 버튼과 같은 객체값도 전달됨, 타임아웃 존재

 

PUT : 요청된 자원을 수정(UPDATE)한다. 내용 갱신을 위주로 클라이언트 측은 요청된 URL을 그대로 사용한다

 

• AJAX

---

1) 비동기 자바스크립트와 XML( Asynchronous Javascript And Xml)

 : 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것

 : 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미 

: 통신을 하지만 새로 페이지가 로드되는 방식이 아닌 ajax 요청을 한 데이터만 가져와서 그 부분에 적용하는 방식 

: 클라이언트와 서버가 내부적으로 데이터 통신을 하고 그 결과를 웹 페이지에 프로그래밍적으로 반영, 그 결과, 화면의 로딩없이 그 결과를 보여줌
2)   페이지 전체를 refresh 하지 않고서도 수행되는 비동기성 

: 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 가능

: 페이지 새로고침없이 서버에 요청 : 서버로부터 데이터를 받고 작업을 수행
3) jQuery를 이용한 ajax 통신의 가장 기본적인 API

• data : 서버에 전송할 데이터, key/value 형식의 객체 
• datatype : 서버가 리턴하는 데이터 타입(xml, json, script, html) 
• type : 서버로 전송하는 데이터의 타입 (post, get) 
• url : 데이터를 전송할 url 

• success : ajax 송신에 호출될 이벤트 핸들러로 통신 성공 후 호출 (view->controller->view로 돌아온 데이터, dataType 호출)

   

 

Controller <-> JS 파라미터 넘겨주기

@Controller
@RequestMapping("/test")
public class GetParamController extends BaseController {

	@Inject
	private GetParamService getParamService;
	
	private static final Logger logger = LoggerFactory.getLogger(ArsCallController.class);

@RequestMapping(value="/selectProjectList", method=RequestMethod.GET, produces=APPLICATION_JSON)
	public @ResponseBody Map<String, Object> selectProjectList(HttpServletRequest request) {
		
		Map<String, String> params = RequestUtils.of(request).getRequestBodyParameterMap();
		Map<String, Object> result = new HashMap<String, Object>();
        
        int num = Integer.parseInt(params.get("num")); //num이라는 파라미터 값을 변수에 넣어줌
        String str = (String) params.get("str")); // str이라는 파라미터 값을 변수에 넣어줌
        List<도메인명> list = getParamService.selectProjectList(params); //db 조회한 값 list 에 넣기
        
        result.put("list",list); //key, value
        result.put("num",num);
        result.put("str",str);
        
        return result;
        }
       }
        
		

function popupOpen(){
	 var popUrl = "";
	 var popOption ="width=1062, height=749, resizable=no, scrollbars=no, status=no;";
	 var phoneNum = document.getElementById("phoneNum").value;
	 $.ajax({
		url: "/test/selectProjectList",
		type: "GET",
		dataType:"JSON",
		data:{"phoneNum": phoneNum}, //js 데이터가 controller로 이동
		success: function(data) {
		console.log(data);
		var msgs = data.num // controller에서 params 데이터 추출 
			window.open(popUrl+msgs,"",popOption);
		},
		error: function(request) {
			alert("실패");
		}});} 

+ AXBOOT에서의 활용

var ACTIONS = axboot.actionExtend(fnObj,{
	PAGE_SEARCH: function(caller, act, data){
	var pageData = caller.gridView01.getPageData();
		axboot.ajax({
			type: "GET",
			url: "/test/selectProjectList",
			data: $.extend({}, caller.searchView.getData(), pageData),
			callback: function(res){
            	//page 부분은 gridView에 paging 작업을 위한 데이터 전달
				caller.gridView01.setData({list:res.list, page:{ //controller에서 만든 list 조회하는데 searchView에서의 데이터를 가지고 조회
					currentPage: pageData.pageNumber,
					pageSize: pageData.pageSize,
					totalElements: res.totalCount,
					totalPages: res.totalPage
				}});
				//caller.gridView01.setData(res);
			},
            options: {
                onError: function (err) {
                    console.log(err);
                }
            }
		});
	}

 

• MEMO

---

가장 중요한 개념이라고 생각한다.

꼼꼼하게 정리를 해야 한다.