[javascript/jquery] javascript beforeunload ajax example / 자바스크립트 beforeunload ajax 예제

[javascript/jquery] javascript beforeunload ajax example / 자바스크립트 beforeunload ajax 예제

 

 

javascript 에서

 

사용자가 화면을 벗어나거나 새로고침하는

 

이슈를 체크하기위해서

 

beforeunload 라는 이벤트를 사용합니다!

 

개발하는 내용이나 상황에 따라서는

 

특정함수를 호출하도록 하고,

 

ajax 로 서버에 데이터를 전송하기도 합니다.

 

이번에는 

 

beforeunload 이벤트발생시 함수를 호출하는 방법과

 

ajax 로 데이터 전송시 주의사항을 공유하고자 합니다!

 

beforeunload

 

위에 나온것처럼 beforeload 라는 이벤트를 적용하려면

 

아래와 같이 작성하시면 됩니다!

 

    window.addEventListener('beforeunload', call_unload);

    function call_unload() {
        $.ajax({
            type: "POST",
            url: "/test/",
            //async: false
        });
    }

 

위 내용 보시면 아시겠지만,

 

이벤트 리스너를 등록하는데 함수명을 같이 등록합니다.

 

그리고는 이벤트 발생시 작업할 내용을 함수안에 작성하시면 됩니다.

 

위의 경우에는 ajax 를 이용하여

 

서버에 데이터를 보내는 경우인데 

 

async 옵션을 false 로 주어 비동기식으로 처리하려고 하는데

 

서버로 데이터가 전송되지 않았습니다..

 

브라우저에서 비동기식으로 전송할 경우에 아무런 요청도 보내지 않기때문에

 

asyns: false 를 주석치고나니

 

바로 해결되더군요..

 

참고들 하세요!