집 > 기사 > 웹 프론트엔드 > 브라우저가 Ajax 요청을 기억하고 앞뒤로 이동할 수 있는 문제 해결

브라우저가 Ajax 요청을 기억하고 앞뒤로 이동할 수 있는 문제 해결

亚连원래의: 2018-05-22 13:43:361616검색

다른 웹페이지를 탐색할 때 브라우저의 앞으로 및 뒤로 키를 사용하여 이전과 이후에 방문한 페이지로 이동할 수 있습니다. 이 글에서는 주로 브라우저가 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에 해당하는 결과를 반환합니다. .
동시에 버튼 상태를 변경하고 위치 해시 값을 data-id 값으로 변경합니다. 마지막으로 위치 해시 값 변경을 모니터링하고 위 단계를 반복합니다.

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

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

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

이때, 리턴버튼을 1번에 3번 누르면 행, 콘솔 출력은 다음과 같습니다.

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

이는 Ajax 요청을 기록하는 브라우저의 기능을 시뮬레이션하는 것을 볼 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

브라우저가 Ajax 요청을 기억하고 앞뒤로 이동할 수 있는 문제 해결

관련 기사