pushstate (ajax 뒤로가기)

ajax 에서 뒤로가기를 활성화 시키기 위해서는 여러가지 방법이 있다.

앵커, pushstate, 해쉬뱅 등이 그 예이다.

 

pushstate는 HTML5 에서 새로 추가된 History API의 추가된 메서드이다.

 

$('#button').click(() => {
    $.ajax({
        url: "/freeBoard,
        data: {page: 1},
        type: "get",
        success: (result) => {
            $(".content").html(result);
        }
    });
    history.pushState({
        data: "/freeBoard",
        page: 1
    }, null, "/freeBoard?page=1");
});

이러한 방식으로 ajax 동작 이후 hisory.pushState로 history.pushState(data, title, url)을 넣어주면 된다.

이 부분 까지 진행한다면 url의 변화를 볼 수 있을 것이다.

state를 저장한 뒤 이벤트를 감지하여 불러오는 ajax를 만들어주면 페이지까지 전환이 된다.

//이벤트 감지해서 뒤로가기 불러오는 ajax
$(window).on('popstate', function (event) {
    const data = event.originalEvent.state;
    $.ajax({
        url: data.data,
        data: {page:data.page, type: data.type, keyword: data.keyword},
        type: "get",
        success: (result) => {
            $(".content").html(result);
            //alert(JSON.stringify(data));
            //검색 처리 위해서
            //$("#type").val(data.type||"t");
            //$("#keyword").val(data.keyword);

        }
    })
});

아래와 같이 넣어주었던 값을 읽어 올수 있다.

data.data에는 freeBoard가 저장되있을 것이다. 검색처리 등의 경우 위의 주석과 같이 추가해줄 수 있다.