URL change ajax call in Facebook

Question

In facebook, whenever you navigate to a different URL (in some situations), the URL changes but there is no feeling sensed as going to a different page.

For example: when we view pictures in facebook, and when we move to the next image the URL changes in the address bar

FROM >facebook.com/foo?bar=foobar&xxxx=

TO > >>facebook.com/foo?bar=boobar&xxxx=

and this is not hashed change also like

FROM >facebook.com/xxxxx#xxx=xxxx

TO > >>facebook.com/xxxxx#xxx=yyyy

How is this possible seamlessly. I mean how is that only a container is modified on URL change. URL change is supposed to navigate to a different page which can contain cached information from previous page and THIS navigation by URL change can be seen obviously by browser's screen going blank for a moment.

If using an iFrame, how to implement this ?

They are using the HTML5 History API. – Samuel Katz Jun 03 '11 at 16:01 — Samuel Katz, Jun 03 '11 at 16:01

score 1 · Answer 1 · answered Jun 12 '11 at 16:30

I use somehting similar to this

try {
  var stateObj = { foo: "bar" };
  history.pushState(stateObj, "page", href);
  loadPage(href);
}
catch(e) {
  window.location.hash = "#!/"+href;
}

If it supports the HTML5 pushState them change URL, but if it doesn't then the fall back is the window hash.

score 0 · Answer 2 · answered Jun 03 '11 at 16:04

0

There's a jQuery plugin called "address" that will watch for changes and call the function you give. I think it's just checking the URL every 100ms or so.

answered Jun 03 '11 at 16:04

Michael Lorton

43,060
26
103
144

score 0 · Accepted Answer · edited May 23 '17 at 12:19

0

wow. I just asked it few minutes ago ... use search next time ;)

Dynamic favicon when I'm proccessing ajax data

Modify the URL without reloading the page

edited May 23 '17 at 12:19

Community

1
1

answered Jun 03 '11 at 16:05

genesis

50,477
20
96
125

http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page – Boopathi Rajaa Jun 03 '11 at 16:16

score 0 · Answer 4 · answered Jun 03 '11 at 16:10

They issue an AJAX request for the data necessary to fulfil the "navigation", then tell the browser to "go to #xxx=yyy". Since such an anchor doesn't exist, the browser doesn't actually scroll down. However, it does record a new history entry, and also updates the URL so that if someone copy-pastes that URL, they will view the same object that the user is seeing, rather than just the original page.

URL change ajax call in Facebook

4 Answers4