[javascript] 제이쿼리 Ajax로 비동기식 처리하기

searchList.jsp

        $.ajax({
            type : "GET",
            url : "${APP_PATH}/relic/${relicSearch.searchId}/searchAjax",
            dataType : "text",
            contentType : "application/json; charset=UTF-8",
            data : {
                "query" : query
            },
            success : function(result){
                console.log("AJAX_SUCESS");
            },
            error : function(request, status, error){
                console.log("AJAX_ERROR");
            }
        });

searchUser.java

...
    @RequestMapping(value=Constant.APP_PATH + Constant.SITE_ID_PATH + "/relic/{searchId}/searchAjax", method=RequestMethod.GET)
    public String relicSearchAjax(Model model, @CurrentSite Site currentSite,@PathVariable("searchId") String searchId, @ModelAttribute("relicSearch") RelicSearch relicSearch){
        return EcmsUtils.getThemePath(request) + "relic/searchAjax";
    }

searchAjax.jsp

    String query = getParameter('query');
    ....
    <input id="sv" name="query" title="검색어 입력" class="sl_input" type="text" style="width:350px;" value="<%=query%>" onkeypress="javascript:pressCheck((event),this);"/>

1. searchList.jsp와 똑같은 화면인 searchAjax.jsp 화면을 만든다.
2. searchList.jsp에서 ajax를 이용하여 query라는 데이터 값을 자바 서비스 단인 searchUser.java에 넘긴다.
3. searchUser.java에서 파라미터값인 query를 searchAjax.jsp로 넘긴다.
4. getParameter함수를 사용하여 파라미터 값을 받아서 사용한다.

다른 화면이 비동기식으로 현재화면을 엎는 로직이지만 사용자 입장에서는 같은 화면에서 값만 바뀌어 보인다.