0

I have a Ajax site that works with jQuery and History.js, when a link is clicked I execute this:

var $this = $(this), // $(this) is the link
url = $this.attr('href'),
title = $this.attr('title') || null;
History.pushState(null, title, url);
event.preventDefault();

Then I look the statechange for make the ajax call and change the page content:

$(window).bind('statechange', function () {
     var State = History.getState(),
     url = State.url
     $.ajax({
        url: url,
        success: function (data, textStatus, jqXHR) {
           // I change the content etc etc
        }
});

But the Referrer header is always the URL which is being requested, so for example, I click a a link with href "/test" on my page "/home", then the code will send the ajax call to /test, but in that request it send as referrer the same "/test" and no "/home".

I trie to make the ajax call after the pushState, and it work fine it sends the referrer fine, but the back button just stop working, it change the url but not the content so, i need to look for statechange again.

What can I do?

Sorry for my english and thanks!

CristianOspina
  • 43
  • 7
  • `$.ajax()` allows request headers to be set manually - see [API docs](http://api.jquery.com/jquery.ajax/) - so you could tried setting the referer header to `/home`. – Roamer-1888 Oct 01 '14 at 01:49
  • Thanks @Roamer-1888 I also see this option, but all that i read was that the browser will overwrite the referrer for security reasons. Read here: [changing the referrer of an Ajax POST](http://stackoverflow.com/questions/8231366/changing-the-referrer-of-an-ajax-post) so I dont test that. – CristianOspina Oct 01 '14 at 02:11
  • In that case, it would appear that you can't rely on a 'statechange' handler to make the AJAX request. Try turning the process inside-out - make the AJAX call then perform `History.pushState()` in the success handler. – Roamer-1888 Oct 01 '14 at 15:39
  • Thanks again @Roamer-1888 That was i tried and it works But as I say, the back button stop working, because when a user press the back button of the explorer it perform the 'statechange'... So its like I need to know when a user goes back or forward, and instead perform the AJAX call, any toughts? Thanks! – CristianOspina Oct 01 '14 at 21:50
  • I think most people end up changing the url's #hash string rather than making History entries. – Roamer-1888 Oct 01 '14 at 21:56

1 Answers1

0

Never mind, my solution was: First make the ajax call, then the History.pushState on success as I said before, but to solve the back/forward button just need listen to 'popstate' and not 'statechange'. 'popstate' was the solution.

Regards.

CristianOspina
  • 43
  • 7
  • Glad this worked for your use case, however I would caution against building this way in general. You end up having a lot of extra logic in that amounts to "Check and see whether this is a state I pushed, or whether it is an identical state the *browser* is pushing based on a back/forward click." And the place that looks convenient to send that info is the state itself, but then it'll lie to you when it's a pushed state! IMO the "Referer" header isn't worth it—I would just change the app to accept a referer parameter (or custom header) and consume that instead of the header. – XP84 Mar 03 '15 at 01:00