Do not refresh change url:pushstate + Ajax

If you've ever played Google + and you've seen YouTube's new interface, you'll experience this new HTML5 feature. Using Pushstate + Ajax (Pjax), you can implement the AJAX load of the Web page, but also can complete the URL changes without the page jump refresh, as if the page has changed the hash (#).

Guide/Jump to

• 1  old solution
• 2  new solution: Pushstate
  • 2.1 HTML5 p Ushstate+ajax
  • 2.2 pushstate example
  • 2.3 demo demo
  • 2.4  Replacestate
  • 2.5 pushstate, replacestate difference
• 3  restrictions
• 4 ajax mate pushstate example
• 5 pushstate mates Popstate monitoring
  • 5.1  flowchart schematic
• 6 jquery + pjax plug-in

the old solution

SEO and Ajax have been said to be predators. The solution that Google has given is "#!", which had previously been called from Twitter to pop Ajax+hash. ~string"automatically convert to"? _excaped_fragment_=~string"to crawl dynamic content. But this will undoubtedly be very troublesome: first you need to do a "? _excaped_fragment_=~string" Disposition of the site, and if the user puts the URL "http://example.com/#!/~string "Copying and sharing directly means that the web must also monitor the Hashchange." But it doesn't matter if you think the #! looks good.

New Solution: Pushstate

However, HTML5 's new interface pushstate/replacestate can be a perfect solution to the problem, it avoids the problem of changing the hash, avoid the user does not understand the form of the URL is puzzled, while there are onpopstate to provide monitoring, good response back forward. And it doesn't need this URL to actually exist.

HTML5 's Pushstate+ajax

HTML5 provides a history interface to add or replace URLs in the form of a state to a browser, and its implementation functions are pushstate and replacestate.

Pushstate Example

The basic parameters of Pushstate () are:

Window.history.pushState (state, title, URL);

Where both state and title can be empty, but the recommendation is not NULL, the state should be created to match the Popstate listener.

For example, we now change the URL through Pushstate without refreshing the page.

var state = ({

URL: ~href, title: ~title, ~additionalkey: ~additionalvalue

} );

Window.history.pushState (state, ~title, ~href);

where the "~" symbol is a custom content. You can push this ~href(URL) into the browser's history. If you want to change the title of the page, you should:

document.title= ~newtitle;

Note that just pushstate is not able to change the title of the page Oh.

Demo Demos

Click I try (implement function onclick = History.pushstate (null, NULL, '/test-string '); ）。 In fact, this blog has also deployed this technique between articles.

replacestate

Window.history.replaceState (state, ~title, ~href);

the difference between pushstate and Replacestate

Pushstate () can create a history that fits the Popstate event, while Replacestate () replaces the current URL without creating a history.

Limiting factors

You can only replace the URL with the same domain, for example you can't replace http://google.com with http://baidu.com. And the state object does not store non-serializable objects such as the DOM.

examples of Ajax mates Pushstate

Now use Ajax + Pushstate to provide a new style of Ajax invocation. In the case of jquery, for SEO purposes, you should add a method to the onclick of the a tag.

$ ("~target a"). Click (function (evt) {

Evt.preventdefault (); Prevent the default jump action

var uri=$ (this). attr (' href ');

var newtitle=ajax_load (URI); You customize the Ajax load function, for example it will return Newtitle

Document.title=newtitle; Assign a new page title

if (history.pushstate) {

var state = ({

Url:uri, Title:newtitle

});

Window.history.pushState (State, Newtitle, URI);

}else{window.location.href= "#!" +~fakeuri; }//If not supported, use the old solution

return false;

});

function Ajax_load (URI) {... return newtitle;}//Your custom Ajax function, for example it will return Newtitle

You can complete the pushstate. As for the new title, Newtitle is another problem, for example, you can assign a Data-newtitle=~title attribute to a tag and read it at that time, or if you use the $.ajax () function, you can use $ (result). Filter ("title") . text () to get.

Also, if you need to use this Ajax for a connection to a newly loaded page, you need to redeploy the a label for the new content, for example

$ ("~newcontenttarget a"). Click (function (evt) {...});

pushstate with popstate monitoring

For a good browser-backed history forward and backward operation, you should deploy Popstate monitoring:

Window.addeventlistener (' Popstate ', function (evt) {

var state = Evt.state;

var newtitle = ajax_load (State.url); You customize the Ajax load function, for example it will return Newtitle

Document.title=newtitle;

}, False);

As a reminder, you can use setRequestHeader () to allow the server to output specialized content in conjunction with your AJAX request.

Flowchart Schematic

The approximate process of this example is shown in

jQuery + Pjax plugin

Already on GitHub, someone has made Pjax a jquery plugin that makes it easy to call and save a lot of code:

if ($.support.pjax) {

$ (document). On (' Click ', ' a[data-pjax] ', function (event) {

var container = $ (this). Closest (' [Data-pjax-container] ')

$.pjax.click (event, {Container:container})

});}

Do not refresh change url:pushstate + Ajax