push State,replace State,onpopstate 는 Ajax 페이지 의 전진 후퇴 리 셋 을 실현 합 니 다.

Ajax 를 사용 하면 비동기 로 데 이 터 를 얻 을 수 있 고 페이지 를 더욱 효율적으로 렌 더 링 할 수 있 습 니 다.
그러나 이런 문제점 도 있다.
페이지 를 새로 고치 면 페이지 가 초기 상태 가 됩 니 다.
브 라 우 저의 전진 후퇴 기능 이 잘못 되 었 습 니 다.
검색엔진 의 파충류 잡기 에 우호 적 이지 않다.
1、
이전에 브 라 우 저의 hash 닻 점 을 사용 하여 해결 할 것 입 니 다.
서로 다른 hash 는 페이지 의 다른 부분 을 표시 하고 페이지 새로 고침 데이터 가 정확 하지 않 은 문 제 를 수정 할 수 있 습 니 다.
그리고 onhashchange 이벤트 감청 hash 닻 점 의 변 화 를 통 해 수 동 으로 전진 후퇴 작업,브 라 우 저 지원 도

2、
그 다음 에 hashbang 기술 이 나 타 났 습 니 다.즉,url 뒤에 표 시 를 추가 하 는 것 입 니 다.\#!/my Path 는 상술 한 문 제 를 해결 합 니 다.
하나의 경 로 를 통 해 페이지 부분 을 정의 합 니 다.단일 페이지 응용 프로그램 에서 자주 볼 수 있 습 니 다.하지만 구 글 만 이 이 경로 에 대한 오 르 기 를 진정 으로 지원 한 것 같 습 니 다.
3、
HTML 5 의 새로운 기능 이 도움 이 되 었 습 니 다.push State,replace State 라 는 두 가지 새로운 history 방법 과 onpopstate 라 는 window 사건 을 통 해 상기 세 가지 문 제 를 해결 하 였 습 니 다.
물론 HTML 5 의 새로운 기능 이기 때문에 이전 버 전의 브 라 우 저 에서 지원 도가 좋 지 않 습 니 다.hashbang 방법 으로 호 환 하 는 것 을 권장 합 니 다.
본문 은 주로 push State 라 는 새로운 것들 을 강의 하고 있다.
글 이 너무 무미건조 하 니,먼저 그림 을 보고 직접 느껴 라.

이 밤 은 초기 값 이 0 이 고 비동기 적 으로 부가 가 치 를 요청 하면 전진 하거나 후퇴 하거나 갱신 할 수 있 으 며 url 을 새로 열 어도 해당 하 는 데 이 터 를 얻 을 수 있 습 니 다.

history.pushState(state, title, url)
history.replaceState(state, title, url)

그 중에서 state 는 json 대상 입 니 다.사용자 정의 로 데 이 터 를 저장 할 수 있 습 니 다.title 은 바로 이 url 에 대응 하 는 태그 title 입 니 다.(그러나 브 라 우 저가 이 인 자 를 무시 한 것 같 습 니 다)
url 은 한 페이지 의 태그 url 입 니 다.w=a,ajax Page.html/w=a,&w=a,하나의 태그 일 뿐 값 을 추출 할 때 대조 하면 됩 니 다)
replace State 와 push State 의 차이 점 은 전 자 는 현재 값 을 직접 교체 하고 후 자 는 스 택 에 값 을 누 르 는 것 입 니 다.
window.onpopstate 이벤트 가 발생 하면 history.state 를 통 해 상기 방법의 첫 번 째 json 대상 을 얻 을 수 있 습 니 다.
실현 부분
HTML

<div class="push-state-test">
<input type="button" id="ajax-test-btn" value="Ajax  ">
<p>value: <span id="ajax-test-val">0</span></p>
</div>

JS

var $val = $('#ajax-test-val'),
//          
m = window.location.search.match(/\?val=(\d+)/);
//      ，  url         
if (m) {
increaseVal(m[1] - 1);
}
//   
function increaseVal(val) {
$.post('ajax-test.php', {
val: val
}, function(newVal) {
$val.text(newVal);
//          
var state = {
val: newVal,
title: 'title-' + newVal,
url: '?val=' + newVal
}
//       history  
window.history.pushState && window.history.pushState(state, state.title, state.url);
});
}
$('#ajax-test-btn').click(function() {
increaseVal(parseInt($val.text(), 10));
});
//         ，  popstate  
window.onpopstate = function() {
var state = window.history.state;
console.log(state)
//       ，     ajax  
$val.text(state.val);
window.history.replaceState && window.history.replaceState(state, state.title, state.url);
};

PHP

<?php
$val = $_REQUEST['val'];
echo $val + 1;
?>

여기 통과?val=num 방식 으로 다른 ajax 결과 페이지 를 표시 합 니 다.
Tips:
pushstate 를 사용 한 후,현재 후퇴 하여 popstate 이 벤트 를 촉발 하여,해당 하 는 json 대상 을 가 져 옵 니 다.
json 대상 데이터 사용자 정의 가능
관련 표 시 를 간단하게 저장 하고 요청 을 보 내 거나 이 태그 페이지 에 해당 하 는 결 과 를 직접 저장 할 수 있 습 니 다.
후퇴 작업 에 따라 주소 표시 줄 url 이 업데이트 되 었 고 비동기 데이터 도 업데이트 되 었 습 니 다.
페이지 를 새로 고치 거나 새로 열 면 url 에 표 시 된 태그 에 따라 데 이 터 를 요청 해 야 합 니 다.
기억 해 야 할 것 은 브 라 우 저 는 url 이 부분 에 대응 하 는 이 비동기 콘 텐 츠 페이지 를 자동 으로 불 러 오지 않 습 니 다.가 져 와 야 합 니 다.
위 에서 말 한 것 은 편집장 이 소개 한 push State,replace State,onpopstate 가 Ajax 페이지 의 전진 후퇴 갱신 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!