HTML5 History API implements refresh-free jump_html5 tutorial skills

Once when I was surfing the Internet, I found that the login and registration animation effects were very gorgeous, but what shocked me was that the page could jump without refreshing (it has been revised, you can click here to see this effect: GitHub or FM), I reviewed the front-end knowledge I had learned, and it seemed that there was no technology that could achieve this. So I searched on Baidu and discovered that this was originally achieved by using the History API in HTML5, but it has never been put to use. It was not until the blog was revised that this technology was applied.
In HTML5,
1. Added the ability to add items in the browser history through JS.
2. Display and change the URL in the browser address bar without refreshing the page.
3. Added an event that is triggered when the user clicks the browser's back button.
Through the above three points, you can dynamically change the URL in the browser address bar and dynamically display the page content without refreshing the page.
For example: When the content of page A and page B are different, before HTML5, if you switch from page A to page B, you need to switch from page A to page B in the browser, or in other words, if you need If you want to use the back button function, you can add #XXXX to the URL address to achieve the back function. So now in HTML5, you can implement the following processing through the History API:
1. Request the B data in the page by sending an AJAX request on page A.
2. Load the corresponding information to the corresponding location through JS in page A.
3. Use the History API to switch from the URL address of page A to the URL address of page B in the browser's address bar without refreshing the page.
History API in HTML4
Attributes
1.length The number of history items. The history that JavaScript can manage is limited to the range that can be reached using the browser's "forward" and "back" keys. This attribute returns the sum of the addresses contained under the "forward" and "backward" buttons.
Methods
1.back() Back, which is equivalent to pressing the "Back" key.
2.forward() forward, which is equivalent to pressing the "forward" key.
3.go() Usage: history.go(x); Go to a specified address within the history range. If x < 0, go back x addresses, if x > 0, go forward x addresses, and if x == 0, refresh the now open web page. history.go(0) is equivalent to location.reload().
History API in HTML5
1. history.pushState(data, title [, url]): Add a record to the top of the history stack; data will be in When the onpopstate event is triggered, it is passed as a parameter; title is the page title, and all current browsers will ignore this parameter; url is the page address, optional, and the default is the current page address.
2. history.replaceState(data, title [, url]): Change the current history record, the parameters are the same as above.
3. history.state: used to store the data of the above method. Different browsers have different read and write permissions.
4. popstate event: This event is triggered when the user clicks the browser's back or forward button. In the event processing function, read the state attribute value of the event object that triggered the event. This attribute value is the first parameter value used when executing the pushState method, which stores the synchronously saved value when adding a record to the browser history. object.
So far, IE10, firefox4 and above, Chrome8 and above, Safari5, Opera11 and above browsers support the History API in HTML5.
HTML:

Copy code

The code is as follows:

• 
  测试
  


• 
  测试
  


• 
  测试
  

JS:

复制代码

代码如下:

/**
* HTML history and ajax
*/
$(function(){
var ajax,
currentState;
$('.container li').unbind().bind('click',function(e){
e.preventDefault();
var target = e.target,
url = $(target).attr('href');
!$(this).hasClass('current') && $(this).addClass('current').siblings().removeClass("current");
if(ajax == undefined) {
currentState = {
url: document.location.href,
title: document.title,
html: $('.content').html()
};
}
ajax = $.ajax({
type:'POST',
url: url,
dataType:'json',
success: function(data){
var html = '';
if(data.length > ) {
for(var i = , ilist = data.length; i < ilist; i ) {
html = '

' data[i].age '

'
'

' data[i].name '

'
'

' data[i].sex '

';
}
$('.content').html(html);
}
var state = {
url: url,
title: document.title,
html: $('.content').html()
};
history.pushState(state,null,url);
}
});
});
window.addEventListener('popstate',function(event){
if(ajax == null){
return;
}else if(event && event.state){
document.title = event.state.title;
$('.content').html(event.state.html);
}else{
document.title = currentState.title;
$('.content').html(currentState.html);
}
});
});