Ajax로 구현된 페이지네이션의 뒤로가기 이슈

검색을 해보면 해결 방법들이 많아 해결책을 찾는데는 그렇게 어렵지 않다.  적용하는 방법도 어렵지 않으니 잘 읽어보고 해당 페이지에 적용하면 됩니다.

뒤로가기 매커니즘 - 왼쪽이 POST요청 오른쪽이 Ajax 요청 

이미지출처-http://beyondj2ee.tumblr.com/ 

1.문제점

서버와 통신후 ajax를 이용해 컨텐츠를 로드할경우 사용자에게 깔끔한 경험을 줄 수있어 과거 방식에 비해 획기적이긴하나 게시판 페이지네이션을 이용하다가 인터넷 사용자들이 굉장히 많이 이용한다는 <뒤로가기> 행동을 할때 그 페이지는 초기화 되어버려 ajax로 로드했던 컨텐츠가 모두 날라가 사용자에게 불편을 주는 문제가 있다.

예를들어 어떤사용자가 

ajax로 페이징이 적용된 A페이지 에서 4page 상품리스트를 보고있다가 정보를 더 알고자 하는 상품이 보여 상품view 페이지로 이동을 한후 다시 원래 A페이지로 뒤로가기를 할 경우 A페이지는 초기화된 1page상품리스트가 보여 다시 4page로 찾아가야하는 불편이 발생한다.

만약 150page 상품리스트 페이지를 보고있는 사용자가 이런 경험을 한다면 아마 더 짜증 날 것이다. 

2.원인

ajax는 비동기적 통신으로 서버의 컨텐츠를 로드하는데 이러한 ajax가 DOM object를 별도로 관리하지 않아서 생기는 문제이다. 그렇기 때문에 페이지를 다시 로드 할경우 초기화된 최초페이지의 컨텐츠로만 보이게된다. 

3.해결책

javascript 의 widnow 객체의 하위 객체인 location의 hash값 를 이용하면 해결됩니다.(죽 window.location.hash)

(브라우져가 뒤로가기할때 window.location.hash 값을 보고 페이지를 로드함)

페이지를 이동하기전 location.hash 에 현재페이지 정보를 내부링크로 설정한후 저장해두는것입니다. 그리고 문서가 재로드되면 hash를 검사해서 해당 page를 가져와서 그 값으로 다시 ajax 요청을 하면 됩니다. 

내부링크 가 중요한데 내부링크란?  보통 이미지맵에 링크를 걸때나 scroll이생기는 긴 문서에서 하단으로 이동할때 이런 내부링크를 이용하죠? 이런링크를 말합니다. A.html#map1  

코드를 보면 이런식으로 해주면 됩니다. 

A.html  (제품 리스트 페이지)

/******************************

HTML  부분 코드 

*******************************/

//--상품 보기 페이지는 문서내에서 이런식으로 링크가 걸렸겠죠?

<a href="../goods/view.php?seq=302211" id="link">  

/*****************************

같은 문서내 script 부분 코드

*******************************/

jquery script 부분 

jq(document).ready(function() {

//-- 문서가 로드 될때마다 hash 체크

CheckForHash();

//--click 이벤트를 걸어 이벤트가 발생할때마다 현재 페이지를 내부링크처럼 hash에 저장해둡니다.

jq("#link").live("click", function(e) {

var local_currentPage=jq("#local_listcontainer_page").val();

var fo_currentPage=jq("#fo_listcontainer_page").val();

//저는 이페이지에서 두개의 페이징이 있어서 ^를 구분자로 두개의 현재페이지 정보를 마킹해놓았습니다.

str_hash=local_currentPage+"^"+fo_currentPage;

document.location.hash = "#" + str_hash;

});

//-- check hash

function checkForHash() {

if(document.location.hash)

{

//hash 가 있다면 ^ 를 구분자로 하나씩 string을 추출하여 각각 페이지정보를 가져옵니다.

var str_hash = document.location.hash;

str_hash = str_hash.replace("#","");

arr_curpage=str_hash.split("^");

localcurpage=arr_curpage[0];

focurpage=arr_curpage[1];

// 뒤로가기 처리.. 각각 현재페이지를 가지고 다시 ajax를 실행해줍니다.

localsearch(localcurpage);

fosearch(focurpage);

} 

else 

{

//nothing..

}

}

});

script 부분 코드 에서 jq 는 사이트에서만 사용하는 jQuery에 $의 별칭입니다. 코드를 이렇게 작성하면 뒤로가기는 해결됩니다~ ^^

4.결론 

브라우저는 사용자가 뒤로가기 행동을 취할때 window.location.hash 값을 보고 페이지를 로드함으로 location.hash에 현재 페이지정보가 들어있는 값을 내부링크로 setting한후에 페이지가 다시로드될때 이값을 사용하여 ajax 요청을 하면 뒤로가기 처리가 됩니다.

※ 뒤로가기 이슈를 Iframe 이나 jquery 플러그인으로 해결 하는 방법도 있으니 참고