How to make the browser remember ajax requests and control the browser forward and backward

This time I will show you how to let the browser remember ajax requests and control the browser's forward and backward steps. What are the things to note , the following is a practical case, let’s take a look.

When we browse different web pages, we can use the browser's forward and back keys to go to the pages we have visited before and after. One thing these all have in common is that the address in the browser address bar has changed. The browser itself maintains a stack that records the history of the pages visited by the user. The stack records the order in which the user visited different pages.

But in development, we often use ajax technology to improve the user experience of web pages. However, Ajax itself does not change the URL in the browser's address bar. It operates within the same web page. At this time, the browser does not record the Ajax request. In this case, after the user clicks the back button after 5 ajax requests triggered by a page, the browser will not request the previous ajax request again, but will return to the previous page.

The first way to solve this problem is to use the hash value of location. When the hash value of the URL changes, the page will not jump, but the browser will record the hashed URL in the history record. Using this feature, we can artificially simulate ajax requests with history functionality. Below is a demo of this method.

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>

First create two buttons. When the button is clicked, a request is sent to the server and the data-id is brought to the server through parameters. The server returns the result corresponding to the data-id.
At the same time, change the button state and change the hash value of location to the value of data-id. Finally, monitor the location hash value changes and repeat the above steps.

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;
});

When we click the button in the order of "1-2-1", the output of the console is as follows

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

At this time, when we press the return button three times in a row, the output of the console is as follows

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

It can be seen that this simulates the function of the browser recording ajax requests.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed tutorial on making a shopping cart with Ajax+PHP

How to achieve AJAX paging effect

The above is the detailed content of How to make the browser remember ajax requests and control the browser forward and backward. For more information, please follow other related articles on the PHP Chinese website!