历史Api

Question

$('#Head a').click(function()
{
    alert("");
    var link = $(this).attr('href');
    $.get(link, function(data) {
        $('#NavDetailContent').html(data);
        history.pushState(null, null, link);
        e.preventDefault();
    });
    return false;
});

$(window).bind("popstate", function() {
    $.get(document.location, function(data) {
        $('#NavDetailContent').html(data);
        alert("");
    });
});

I was tring out history api but i found the following.

1. When i move from a ajax link to a non ajax link and i click back only the content that was got from ajax only showed up and not the full page. So why is this because of history api or what (this is all that show's up on back)

2. when i refresh the page the popstste event is fired. This time if i am on a non ajax page it fires a request and loads the content in a div . I have taken care on my sever side to show up different pages for ajax and non ajax even when it's ajax request but it shows up non ajax page, only in this case all other times it works fine

Answer 1

On this project https://github.com/defunkt/jquery-pjax there is used special HTTP header to prevent this. They use the same way to generate content AJAX and NONAJAX, but if you use ajax, on server side, the content arround is not generated. So when you go back, you send link to server without special HTTP header, so page is generated full with all countent arround.