Seemingly Asynchronous Page Load

Question

I am not sure what to call this but in google plus, when you navigate to different pages, the HTTP address changes but the userbars seem to remain static and not reload. What is happening and how is this done?

I hope this makes sense! Thank you!

using ajax() .. http://api.jquery.com/jQuery.ajax/ ... ajax you can load certain content in a page with out refreshing the page :) — bipen, May 15 '13 at 06:55

score 3 · Accepted Answer · edited May 23 '17 at 12:15

AJAX (Asynchronously loading the content)

The content is being loading asynchronously and the url in the address bar is being altered.

An basic example of loading content asynchronously:

$.ajax({
    url: 'http://www.example.net/load.html',
    dataType: 'html',
    success: function(data){
        // This will replace all content in the body tag with what has been retrieved
        $('body').html(data);
    }
});

See here for the $.ajax() documentation.

Modifying the URL without Redirecting

To change the url withour redirecting, you need to use the HTML5 history API. A similar question has been asked here before, please see:

Modify the URL without reloading the page

Extracted answer:

function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}

For more information on the HTML5 History API, please see here.

I understand. I was hoping for something...more elegant? Thank you for the code example! — user1909186, May 15 '13 at 07:03
@user1909186 By more elegant, do you mean by using a library? — Ben Carey, May 15 '13 at 07:04
Not sure exactly. I thought it might be something new that I wouldn't have thought of. XHR/AJAX were the ways that I was thinking. I guess I could make a library, but pjax looks interesting. — user1909186, May 15 '13 at 07:09

score 1 · Answer 2 · answered May 15 '13 at 07:00

1

It's likely that they're using the HTML5 History API, specifically the pushState method to add new history states. They're also probably using Ajax (XHR) to load in new content and then adding that content to the page via the DOM API.

Check out pjax, a library that takes care of most of this for you.

answered May 15 '13 at 07:00

James

109,676
31
162
175

Interesting, I'll take a look. Thank you! If you have any convenient code examples, that would be great, too! – user1909186 May 15 '13 at 07:01
@user1909186 You should check out pjax -- just added a link in the answer :) – James May 15 '13 at 07:01
Thank you! It's late. I realized that I know what you are talking about after all! – user1909186 May 15 '13 at 07:05

Seemingly Asynchronous Page Load

2 Answers2

AJAX (Asynchronously loading the content)

Modifying the URL without Redirecting