Few days ago, one of my friends asked me how Gmail changes its URL while user operates inside it without page refreshing. I had no idea about that at that time, he then shared a link Ajax Pattern - Unique URLs which deep dives into this topic, as the article mentioned: Unique URL makes your website's link "Bookmarkable, Linkable, Type-In-Able", plus Sharable IMHO, easy to be shared in Social network which is extremely important nowadays.
The key technology to achieve the ""Unique URL" goal could be summarized into two points:
- If the content in the page has been updated by Ajax significantly enough, update the URL (
location.hash) as well.
location.hash = 'Blogs&Page5';
- Every time the Ajax page loads, JS should understand the URL and render related content as well.
var urlHash = location.hash;
var curPageNo = urlHash.replace('Blogs&Page','');
What I want to emphasize is the hash value, i.e., the content behind
- Better user experience: Every time user accesses the unique URL Ajax page, the fixed part of this page is loaded first, and then the main content loads asynchronously. If the main content is large enough, for example, contains images or rich media content, the "async loading" is much better than the page loading blocked by downloading those images/medias. For instance, originally loading one specific page requires 2 seconds totally, after applying this "async loading", the fixed part cost 0.4 seconds to be loaded and the main content costs 1.8 seconds, from user's point of view, usually the latter case would be better because the user sees your page is partially loaded within a short period (0.4) which feels good enough, plus a graceful loading/splash screen, eventually the UX got improved significantly!
- Better SEO support (Performance Aspect): The page rendering speed is an important fact for a search engine's crawler, by applying "async loading", the crawler will deem the page it is crawling has a good loading speed - 0.4 seconds.
- Easy to support W3 web standard This is sort of kidding. :) Since your main content is Ajax loaded, W3 validator (so does Search Engine) won't validate the main content which very likely does not strictly adhere to all the standard rules.
P.S. I spent two days updating my blog (http://WayneYe.com), revised the paging style from traditional into the Ajax Unique URL pattern above, it is not doing Ajax paging and update URL like "http://wayneye.com/#Blogs&Page5", it definitely "Bookmarkable, Linkable, Type-In-Able and Sharable", plus a loading panel and content fades in effect, I believe its UX is much better than before.