구글 picasaweb를 보면 사진 네비게이션 시 페이지 리로드 없이 URL을 변경하는 것을 볼수 있습니다.
북마크를 지원하고, Back 버튼을 지원하는 AJAX 애플리케이션입니다. AJAX를 적용할때 어떻게 URL을 변경시켜서 Bookmark를 지원하고, Back 버튼을 지원하는지 궁금해 져서 찾아 보았습니다.
방식은 생각보다 간단하네요.
우선 브라우저에서 url을 변경시킬때 리로드를 방지하는 방법은 "#"을 URL에 붙이는 것입니다. HTML에서 URL에 첨부하는 #은 Anchor를 의미합니다. 그리고 현재 페이지에서 URL에 #이하가 변결될 때는 리로드 되지 않고 현재 페이지에서 이동만을 하게 됩니다.
이 것을 응용하여 AJAX를 구현하고 현재 데이터에 해당하는 정보를 #뒤에 추가하는 방법으로 위와 같은 애플리케이션을 만들수 있습니다.
간단하게 URL을 변경시키는 자바 스크립트를 만들어 보면 다음과 같습니다.
test.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var i = 0;
function changeURL(){
parent.location.hash = "image"+i;
i++;
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="submit" value="changeURL" onclick="changeURL()" />
</BODY>
</HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var i = 0;
function changeURL(){
parent.location.hash = "image"+i;
i++;
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="submit" value="changeURL" onclick="changeURL()" />
</BODY>
</HTML>
이 Html을 실행하면 다음과 같은 결과를 볼 수 있습니다.
위 자바스크립트는 ajax 기능을 배제한 단순 URL 변경 코드입니다. 이 로직을 AJAX에 응용하면 북마크가 지원되고, Back 버튼이 지원하는 것이 간단히 처리 됩니다.
댓글 없음:
댓글 쓰기