이번에는 브라우저가 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 요청을 기억하고 브라우저를 앞뒤로 제어하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!