submit 후 HttpServletResponse 응답 받는법

 

일반적으로 뷰 단에서 submit와 같이 동기방식을 할 경우,
서버에 요청을 하고 응답을 받을 수가 없는 문제점이 있습니다.

 

예를 들어 로딩바 같은 경우 서버에서 실행되고 난 다음 응답 여부를 모르니
로딩바를 제어할 수가 없는 상황인거죠.

 

AJAX를 사용하면 되지만 OutputStream를 사용하는 경우에는 getWrite를 사용할
수가 없기 때문에 응답 메세지를 받기에는 어려움이 있습니다.

 

이를 해결하기 위해서는 제이쿼리의 filedownload를 사용하면 됩니다.

 

filedownload의 기능은 form의 submit 방식을 iframe으로 지정하고,
서버에서 response의 header에 쿠기를 생성하여 체크하는 방식입니다.

 

 

 

 

아래 코드를 정리해보았습니다.

 

 

 

 

 

---

 

 

 

 

 

 

JS 적용

 

 

 

 

jquery.fileDownload.js

0.02MB

 

 

 

 

 

우선 filedownload에 대한 js를 만들어 줍니다.

 

 

 

 

<script type="text/javascript" src="/js/jquery.fileDownload.js"></script>

 

 

그리고 뷰 상단에 경로를 적용시켜줍니다.

 

 

 

 

 

반응형

 

 

 

 

 

 

HTML&SCRIPT

 

 

<script type="text/javascript">
 
function downLoad(){
 
 
    $("#lodingbar").css("display", "");
  
 
    $.fileDownload($("#download").prop('action'),{
      httpMethod: "POST",
      data:$("#download").serialize(),
      successCallback: function (url) {
          $("#lodingbar").css("display", "none");
      },
      failCallback: function(responesHtml, url) {
          $("#lodingbar").css("display", "none");
      }
    });
 
 
}
 
</script>
 
 
<form id="download" name="download" action="download.do" method="post">
 
 
</form>

 

 

저는 로딩바의 설정을 위해 작업하였습니다.

함수에 들어오면 로딩바를 보여주고,

 

fileDownload의 첫번째 부분에 URL를 타게 해줍니다.

그리고 데이터를 FORM ID값을 넣어주면 되는거죠.

성공할 경우 successCallback, 실패할 경우 failCallback를 타게 할 겁니다.

 

 

 

 

 

 

 

 

SERVER (download.do)

 

 

@RequestMapping(value={"download.do"}, method = RequestMethod.POST) 
public String  download(HttpServletRequest request,HttpServletResponse res){
 
    try{
        
        //성공시 응답 부분
        res.setHeader("Set-Cookie", "fileDownload=true; path=/");
 
 
    } catch (Throwable e) {
 
        //실패시 응답 부분
        res.setHeader("Set-Cookie", "fileDownload=false; path=/");
        return null;
    }
 
    return null;
 
}

 

 

자바 기반의 코드입니다. 

 

여기서는 특별할 것 없이 HttpServletResponse객체에 setHeader를 이용하여

 

성공할 경우 res.setHeader("Set-Cookie", "fileDownload=true; path=/");

실패할 경우 res.setHeader("Set-Cookie", "fileDownload=false; path=/"); 

 

위와 같이 설정해줍니다.

구분점은 fileDownload의 true와 false입니다.

 

 

 

fileDownload의 문서 링크이니 참고하시면 될 것 같습니다.
http://johnculviner.com/tag/jquery-filedownload-js/