About using Pushstate in Ajax

A few days ago to help students change a management system front-end section, the entire page layout is the header and footer fixed, the left is the navigation bar, the right side of the content display bar ... He used to use an IFRAME to achieve, but this causes each click in the navigation bar will refresh the entire page, each page has a lot of content to repeat, it appears to be poor performance ...

This will have to use asynchronous refresh, that is, using AJAX to load the right side of the content bar, with the content of Ajax not much to say ... What you know about the front end is going to be a ...

But Ajax can also be bad:

1, loading the page and the original page to share the entire resource, a page to load the content of page B, that is, if the B page also has JS code and variable method and a in the same may also trigger a page of some events, resulting in conflict, but fortunately before his JS variable, method names are specially set, I do not need to worry about this ...

2, unable to forward the back Although there is no refresh operation, the URL does not change ...

First, pushstate usage

Fortunately, the Pushstate attribute was added to the H5 so that it was easy to move backwards ...

Grammar:

1 history.pushstate (state, title, URL);

A new browser history set by State , title, and URL is created. The browser does not load the URL after calling the Pushstate () method, only to plug it into the browser history. If you call pushstate every time you click on an event, after a few clicks, you'll go back and you'll see that the URL's address will change. But the content on the right doesn't change.

Pushstate only changes the history record and is not responsible for recording the page content status of each URL ...

Second, popstate

At this point the Popstate function, each forward and backward will trigger the Popstate event, so you can bind popstate the event, you can based on the current URL address of the query content of the corresponding menu to perform Ajax loading,  Achieve the forward and backward effects of Ajax. Of course there is a history.replacestate method, which is similar to pushstate, but changes the current URL and does not plug into the browser history ... You can use this method when the page is just loaded ...

Third, code example

Click events

1 varElemenus = $ (". Left a"). Click (function(e) {2 E.preventdefault ();3 4   if(history.pushstate)5{/*Ajax onboarding ~ ~*/  6   7    vartitle = $ ( This). text (); 8 9document.title=title;Ten  One  if(Event &&/\d/. Test (Event.button)) A{history.pushstate ({title:title},title, "?") + This. Href.split ("/") [3]);/*here to determine whether the trigger click event, or mouse click event, or it will become a dead loop*/   }  }  -  -  return false;  the}）

Popstate Events

1 varPagetrigger=function(target) {2     3     varQuery=location.href.split ('? ') [1], Eletarget = Target | |NULL; 4     if(typeofquery = = "undefined") {5         if(Eletarget=elemenus.get (1)) {6History.replacestate (NULL, Document.title, Location.href.split ("#") [0] + "?" +eletarget.href.split ("/") [3] ); 7 Console.log (eletarget.href);8Pagetrigger (Eletarget);//trigger The Click event directly9             Ten         }  One      } A     Else { -Elemenus.each (function(){  -               //prepared for the Popstate event the  -            if(Eletarget = = =NULL&& This. Href.split ("/") [3] = = =query) { -Eletarget = This;//Popstate to the previous page, you must trigger the corresponding Click event, so be sure that the A element -           } +       });  -  +          if(!eletarget) {//if the current element still does not exist, use replacestate to swap the initial page to the current URL and call it from the beginning again A  atHistory.replacestate (NULL, Document.title, "base.html");  - Pagetrigger (); -}Else { - Console.log (eletarget); -$ (Eletarget). Trigger ("click"); -         } in      -  to    } + } - if(history.pushstate) {//if the browser supports the Pushstate attribute of history, the Pagetrigger event is triggered directly when the forward and backward theWindow.addeventlistener ("Popstate",function() { * Pagetrigger ();  $                                                              Panax Notoginseng     });  -     //Default Loading the Pagetrigger (); +}

Now there is the jquery ajax + pushstate plug-in =pjax,pjax is a new technology based on Ajax+history.pushstate, the technology can change the content of the page without refreshing, and can change the URL of the page. The Pjax is a ajax + pushState package that supports local storage, animation, and many other functions. Currently support jquery, Qwrap, Kissy and many other versions.

About using Pushstate in Ajax