Doubt about $.getJSON and history.pushState

Question

I am studying about history.pushState and intend to develop a website as a way of study like this http://html5.gingerhost.com/

Regarding jQuery (function to load the new content) I understood perfectly, but I had some doubts:

1. There is a difference between window.history.pushState or only history.pushState?
2. What is the function of the first attribute (in this case "null") window.history.pushState(null, "titulo", "novaurl")?
3. The second attribute, responsible for the new title, does not work. Proceed with document.title = "novoTitulo" is the right way?
4. In the case of the cited cite as an example, $.getJSON to return the requested data, and this part I even understood how to return the PHP data, but, my big doubt is: if I own a large site, how will I return all the data being that I use Templates for PHP and HTML assistance (including database queries, and etc)Is that possible or will I have to change my structure? For, from what I understood the returned data are according to the variable cid passed through jQuery, and the data is returned with a echo json_encode()...?
5. There is even incompatibility of the function window.history.pushState() with the IE?
6. I’ve seen on Github a library called History js.. What does it serve since the history function is already native to browsers (I’m asking because I really couldn’t understand)?

Thank you!

Answer 1

I will reply point by point on the historical part. As for the getJSON, I think it is a case for a separate question, as I already said in the comment above (do not take it badly, we are crazy for organization here on the site, and ideally the questions are focused, so that they can help other people).

There is a difference between window.history.pushState or only history.pushState?

No. In the browsers, window is the global object. Everything is hanging on window can be accessed with or without the window..

What is the function of the first attribute (in this case "null") window.history.pushState(null, "titulo", "novaurl")?

This is one of the most interesting things in the history API. You can pass an object that represents the state of the application at that point. When the person returns to that point (via the browser’s "back" button, for example), an event is triggered popstate, and the Listener of that event receives the corresponding status object. So you can restore the state of the application without having to fetch data on the server.

The object to be passed must be a simple object that can be serialized (i.e., without functions/methods, and I would also avoid content inherited via prototype). The serialized object must occupy a maximum of 640k characters.

The second attribute, responsible for the new title, does not work. Proceed with document.title = "novoTitulo" is the right way?

The purpose of the second argument to pushState does not change the title of the page, but save a title in the history. If you want to change the current title, you really need to use document.title = "novoTitulo".

There is even incompatibility of the `window.history.pushState() function with IE?

Yes, as far as I know it is only available from IE10.

I’ve seen on Github a library called History.js. What does it serve since the history function is already native to browsers (I’m asking because I really couldn’t understand)?

The goal is to offer something close to the official browser API where it is not supported, such as versions of IE prior to 10. The library uses mechanisms of fallback as hashes to handle URL states and exchanges.

Relevant documentation:

• History API Usage Guide, MDN
• Specification