브라우저가 Ajax 요청을 기억하고 브라우저를 앞뒤로 제어하는 ​​방법

이번에는 브라우저가 Ajax 요청을 기억하고 브라우저의 앞으로 및 뒤로 단계를 제어하는 ​​방법을 보여 드리겠습니다. 주의 사항 다음은 실제 사례를 살펴보겠습니다.

다른 웹페이지를 탐색할 때 브라우저의 앞으로 및 뒤로 키를 사용하여 이전과 이후에 방문한 페이지로 이동할 수 있습니다. 이들 모두의 공통점 중 하나는 브라우저 주소 표시줄의 주소가 변경되었다는 것입니다. 브라우저 자체는 사용자가 방문한 페이지 기록을 기록하는 스택을 유지 관리합니다. 스택은 사용자가 다른 페이지에 액세스하는 순서를 기록합니다.

하지만 개발 중에는 웹 페이지의 사용자 경험을 향상시키기 위해 Ajax 기술을 사용하는 경우가 많습니다. 그러나 Ajax 자체는 브라우저 주소 표시줄의 URL을 변경하지 않습니다. 이때 브라우저는 Ajax 요청을 기록하지 않습니다. 이 경우 페이지에서 5번의 ajax 요청이 발생한 후 사용자가 뒤로 버튼을 클릭하면 브라우저는 이전 ajax 요청을 다시 요청하지 않고 이전 페이지로 돌아갑니다.

이 문제를 해결하는 첫 번째 방법은 위치의 해시 값을 사용하는 것입니다. URL의 해시 값이 변경되면 페이지가 이동하지 않지만 브라우저는 해시된 URL을 기록 기록에 기록합니다. 이 기능을 사용하면 기록 기능으로 Ajax 요청을 인위적으로 시뮬레이션할 수 있습니다. 아래는 이 방법의 데모입니다.

ul{
 margin:0;
 padding:0;
}
li{
 list-style: none;
 display: block;
 float: left;
 border: 1px solid #000;
 padding: 10px;
 margin-right: 20px;
 cursor: pointer;
}
li.active{
 background-color: #000000;
 color: #fff;
}
<ul>
 <li data-id="1">1</li>
 <li data-id="2">2</li>
</ul>

먼저 두 개의 버튼을 생성합니다. 버튼을 클릭하면 서버로 요청이 전송되고 서버는 매개변수를 통해 data-id에 해당하는 결과를 반환합니다.

동시에 버튼 상태를 변경하고 위치 해시 값을 data-id 값으로 변경합니다. 마지막으로 위치 해시 값 변경을 모니터링하고 위 단계를 반복합니다.

function sendAjax(hash){
 console.log("recived data:" + hash);
}
function btnStatus(hash){
 $("li").removeClass('active');
 $("li[data-id="+hash+"]").addClass('active');
}
function onHashChange(){
 var curHash = window.location.hash.replace("#","");
 if(curHash){
  btnStatus(curHash);
  sendAjax(curHash);
 }
}
window.onhashchange = onHashChange;
$("li").click(function(){
 var id = $(this).attr('data-id');
 window.location.hash = id;
});

"1-2-1" 순서대로 버튼을 눌렀을 때 콘솔 출력은 다음과 같습니다

recived data:1
recived data:2
recived data:2

이때, 리턴버튼을 3번 연속으로 누르면 다음과 같은 출력이 나옵니다. 콘솔은 다음과 같습니다

recived data:1
recived data:2
recived data:1

이렇게 시뮬레이션이 구현된 것을 볼 수 있습니다. 브라우저에 Ajax 요청을 기록하는 기능이 추가되었습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Ajax+PHP로 장바구니 만들기에 대한 자세한 튜토리얼

AJAX 페이징 효과 구현 방법

위 내용은 브라우저가 Ajax 요청을 기억하고 브라우저를 앞뒤로 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!