AJAX URLs & URL Rewriting

Question

I am starting to set up a personal website, and I would like it's layout to look something like

-------------------------------
- Page Header & Menus Go Here -
-------------------------------
-        Main Contents        -
-------------------------------
-           Footers           -
-------------------------------

The main question is that I would like it to be a single-page interface in which the main contents are loaded and displayed with a combination of AJAX and jQuery to produce a nice effect. However, I would, of course, like to have the contents bookmark-enabled and indexed by search engines. I have skimmed throught the Single Page Interface Manifesto which explains some nice ways of achieving this, but I wouldn't really like to have my URLs like

http://www.mysite.com/index.php#!section=section1

http://www.mysite.com/index.php#!section=section2

I would, of course, like to re-write them as

http://www.mysite.com/section1

http://www.mysite.com/section2

My questions are this whether this approach is correct/doable and if AJAX URLs are compatible with URL rewriting. What URLS would be indexed by, say, Google anyway?

Answer 1

If you want your page to work without reloading and update at the same time the page's URL, the only way to archieve this is by changing the hash in the URL (location.hash = 'whatever').

URL rewriting cannot be used since the hash is not sent to the server, it's only available in the browser's scope.

Check Facebook or Twitter URLs. They are prettier than #!section=section1 but still need the hash.

Cheers.

Answer 2

If you want to load different content/tabs/some content of page without reloading browser, Now It is possible with pjax..

you can use something like http://padrino-pjax.heroku.com/ you can try it, go to the link and click on any of links home,dinosaurs,aliens and you will see It will change url and some content without reloading full page

It is achieved using ajax+push/pop of url in browser

Answer 3

I'm looking for a solution myself for a similar problem (I have a client site with an AJAXed wordpress theme, and these dreadful #! stuff on the URL prevent all the Social sharing plugins I have tried so far, from working correctly).

Apparently, there is a solution (with some drawbacks ofc..). I found about it here: http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

I know it's like two years since you've asked, but it could be helpful for someone else, or you may wanna check it out just for the sake of the curiosity itself! :-)