Ajax로 요청한 페이지 URL #hash 구현하기.

기본적으로 Ajax로 페이지를 요청할 경우 주소창의 URL은 변경되지 않는다.
그런 이유로 페이지를 URL을 복사해서 지인에게 알려준다던지 기존의 정적인 페이지의 URL 복사 기능이 제한 되었다.

이 부분을 보완하는 방법이 #hash를 이용한 클라이언트 라우팅이다.

[구글 Gmail은 #hash를 적극적으로 사용하는 대표적인 서비스다]
hash

[핵심요소]

// 현재 해쉬 정보를 확인.
console.log(location.hash); 

// 현재 보는 페이지에서 해쉬가 변경되면 동작하는 이벤트.
$(window).bind('hashchange', function() { 
  // do something 
});

[기본적인 구현 개념]

  • 페이지가 로드될때 해쉬가 있다면 그 해쉬에 해당하는 페이지를 Ajax 요청 처리.
  • 동일한 도메인에서 해쉬가 바뀌면 hashchange 이벤트가 발동하는데 그 경우 Ajax요청 처리.

[얻어 생긴 유용한 기능]

  • hash가 생겨 Ajax 호출 페이지라도 자연스럽게 뒤로가기, 앞으로가기 기능이 된다.

[구현 화면 보기]
preview

[참고]

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다