Ajax 뒤로가기 문제해결 방안

Ajax는 페이지의 새로고침 없이 데이터를 가져와 화면에 뿌려주는 대중적인 웹 기술입니다. 그러나 Ajax를 이용하면, 우리가 흔히 사용하는 뒤로가기 기능을 사용할 수 없습니다. 우리는 이를 보완하기 위해 location.hash를 이용한 HashBang이라는 기술 혹은 PushState를 이용한 PJAX라는 기술을 이용할 수 있습니다.

1. HashBang

ex) http://homepage.com/#!/id

JavaScript에 의존한 기능으로 id에 해당하는 데이터를 가져와 뿌려주게 됩니다. 많은 브라우저에서 지원되는 기능입니다. JavaScript에 의존하므로 script 에러 발생 시 이용이 불가하며 모든 트래픽을 다루어야 하기 때문에 캐시 문제가 발생합니다. 또한, referrer 정보에 기록이 남지 않는 문제가 있습니다.

* 사용 방법은 https://gist.github.com/Problematic/1622847 예제를 참고하세요.

2. PJAX

<a href="/home" class="pjax-test">home</a> $('.pjax-test').pjax('#main')

jQuery 1.8 이상에서 지원하며 사용이 간편합니다. HTML5 기능을 지원하지 않는 브라우저에서는 동작하지 않는 단점이 있으나, 일반 페이지 이동 방식처럼 사용할 수 있습니다.

*사용 방법은 https://github.com/defunkt/jquery-pjax 예제를 참고하세요.

참고: http://blog.outsider.ne.kr/698, http://jaweb.tistory.com/531