HTML5 History API

HTML5 History API

A First Look at the HTML5 History API

http://net.tutsplus.com/tutorials/html-css-techniques/a-first-look-at-the-history-api/

HTML5의 History API에 대한 기초적인 설명을 해주는 글입니다. 하단에 다른 강좌의 링크들도 있습니다.

HTML5의 History API를 사용하면 (pushState, relpaceState 메서드) 페이지의 새로고침 없이 새로운 내용을 보여주면서(Ajax 사용) URL도 변경할 수 있어서 다른 페이지로 이동할 때 페이지 깜빡임 없이 애니메이션 효과를 주면서 이동할 수 있습니다. 물론, 실제로 페이지가 이동한 것은 아니고 Ajax로 새로운 내용을 불러온 것이지만 URL이 바뀌므로 새로고침해도 바뀐 새로운 내용을 볼 수 있습니다.

이 것이 가능하려면 물론 해당 URL에 Ajax 없이 그냥 접속했을 때 그 내용이 보여지게끔 프로그램이 작성되어 있어야 할 것입니다.

pushState 기능이 지원되는 크롬 등의 브라우저로 jQuery의 GitHub 페이지인 https://github.com/jquery/jquery 에 접속해 보십시오
그리고 여기에서 디렉토리 목록 중 build 를 클릭해보겠습니다. 화면이 애니메이션을 사용해서 전환되면서 주소창에 URL은 https://github.com/jquery/jquery/tree/master/build 로 바뀝니다. 뒤로가기 버튼을 클릭하면 역시 애니메이션이 되면서 https://github.com/jquery/jquery 로 바뀝니다. Ajax로 내용을 갱신하면서 URL만 바꿔주기 때문에 애니메이션을 사용한 화면전환이 가능합니다. 그리고 https://github.com/jquery/jquery 에서 build 디렉토리를 클릭하지 않고 주소창에 바로 https://github.com/jquery/jquery/tree/master/build 을 입력해도 페이지가 열리도록 처리되어 있습니다.

인터넷 익스플로러 6,7,8,9는 History API의 pushState를 지원하지 않기 때문에 이런 기능을 만들기가 어렵습니다. 그런데 Hashbang 이라는 기법을 사용하면 #를 사용해서 History API의 pushState 기능과 유사하게 만들 수 있습니다. 트위터에서도 한 때 Hashbang을 사용했었습니다.