AJAX 웹 페이지 는 브 라 우 저 전진 후퇴 등 기능 을 유지 합 니 다.

일부 AJAX 가 대량으로 사용 되 는 페이지 에 서 는 새로 고침 이 잘 되 지 않 을 때 가 있 습 니 다.새로 고침 한 후에 볼 수 있 는 것 은 원래 와 매우 다른 페이지 이기 때 문 입 니 다.일부 페이지 의 콘 텐 츠 가 대량으로 업 데 이 트 된 상황 에서 AJAX 를 사용 해 야 하 는 지 에 대해 서 는 논의 하지 않 고 브 라 우 저의 전진,후퇴,리 셋 등 기능 을 간단하게 설명 한다.여기에 두 개의 Tabs 가 있 는 페이지 를 가정 합 니 다.모든 Tab 에는 대량의 문자 가 포함 되 어 있 고 그림 도 있 을 수 있 습 니 다.만약 지금 Tab 2 의 내용 이 매우 좋다 고 생각한다 면,그것 을 즐겨 찾기 폴 더 에 넣 거나 친구 에 게 보 내 라.다음 에 즐겨 찾기 폴 더 를 통 해 열 거나 친구 가 이 링크 를 눌 렀 을 때 Tab 1 의 내용 을 볼 수 있 고 마우스 로 Tab 2 를 다시 클릭 해 야 원 하 는 내용 을 볼 수 있 습 니 다.페이지 논리 가 더 복잡 하 다 면 여러 단계 의 조작 을 해 야 원 하 는 내용 으로 돌아 갈 수 있 는데 이런 체험 은 좋 지 않다.새로 고침,즐겨 찾기 폴 더 추가 등 기능 을 정상적으로 사용 하려 면 현재 동작 이 URI 에 나타 나 도록 해 야 합 니 다.그러나 URI 를 변경 하 는 동시에 페이지 새로 고침 을 일 으 킬 수 없 기 때문에 URI 의 세 션(fragment)을 변경 하여 구현 할 수 있 습 니 다.예 를 들 어 Tab 1 을 누 르 면 URI 를http://www.example.com/example.html#tab1,Tab 2 를 누 르 면 URI 를http://www.example.com/example.html#tab2。

 
function ShowTab1() { 
$("#tab2").hide(); 
$("#tab1").show(); 
window.location.hash = "#tab1"; 
}; 
function ShowTab2() { 
$("#tab1").hide(); 
$("#tab2").show(); 
window.location.hash = "#tab2"; 
}; 

이렇게 하면 URI 에 변화 가 생 겼 지만 통과 하 든http://www.example.com/example.html#tab1역시http://www.example.com/example.html#tab2방문 페이지 는 모두 Tab 1 의 내용 을 표시 하기 때문에 페이지 를 불 러 올 때\#후의 내용 을 읽 어야 합 니 다

 
$(document).ready(ShowTab()); 
function ShowTab() { 
if (window.location.hash == "#tab2") 
ShowTab2(); 
else 
ShowTab1(); 
} 

이렇게 하면 리 셋 과 즐겨 찾기 폴 더 가입 등 기능 을 모두 사용 할 수 있 지만 전진 과 후퇴 는 번 거 로 울 수 있 습 니 다.이 두 단 추 는 이미 사용 할 수 있 게 되 었 지만,클릭 할 때 웹 페이지 의 내용 은 변 하지 않 았 다.우 리 는 body 의 onhashchange 사건 을 사용 해 야 합 니 다.onhashchange 이 벤트 는 모든 브 라 우 저 에서 지원 하 는 것 이 아 닙 니 다.이 이 벤트 를 지원 하지 않 는 브 라 우 저 에서 도\#후 내용 의 변 화 를 감지 하려 면 windows.location.hash 의 변 화 를 정기 적 으로 감지 하거나 onhashchange 이 벤트 를 스스로 실현 하 는 함 수 를 써 야 할 수도 있 습 니 다예제 코드 패키지 다운로드 (Visual Studio 2010)