Click here to Skip to main content
Click here to Skip to main content
Technical Blog

"Unique URL Pattern" in Ajax Web Application

, 25 Apr 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
BackgroundFew days ago one of my friend asked me how does Gmail change its URL while user operates inside it without page refreshing, I've 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 make you

Background

Few days ago one of my friend asked me how does Gmail change its URL while user operates inside it without page refreshing, I've 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 make your website's link "Bookmarkable, Linkable, Type-In-Able", plus Sharable IMHO, easy to be shared to Social network which is extremely important nowadays.

Implementation

The key technology to achieve the ""Unique URL" goal could be summarized into two points:
  1. If the content in the page has been updated by Ajax significantly enough, update the URL (location.hash) as well.

    // Ajax rendering all blog entries in page number 5
    location.hash = 'Blogs&Page5';
    
  2. Every time the Ajax page loads, JS should understand the URL and render related content as well.

    <body onload="restoreAjaxContent()">
    <script type="text/javascript">
    function restoreAjaxContent(){
        var urlHash = location.hash;
        var curPageNo = urlHash.replace('Blogs&Page','');
        // Safe parse curPageNo into number, handles wrong parameters (Ignored for here)
        // Display loading text/image on the page (optional but better UX).
        // Ajax rendering all blog entries in page number curPageNo.
    }
    </script>
    </body>
    
    
What I want to emphasize is the hash value, i.e. the content behind # is originally expected an HTML element's name attribute used for In-Page navigation, it is completely the contract between client Browser, HTML content and JavaScript, server side cannot get the information directly except we explicitly pass the value to the server side (hidden post, URL query string, Ajax etc), therefore,if some user access the unique URL, your website's client side JS should parse the hash and retrieve relevant data from server side.

Advantage

  1. Better user experience.
    Every time user accesses the unique URL Ajax page, the fixed part of this page loaded first, and then loads the main content 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 the 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 see 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!

  2. 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.

  3. Easy to support W3 web standard
    This is sort of kiddingSmile | :) Since your main content is Ajax loaded, W3 validator (so does Search Engine) won't validate the main content which is very possible does not strictly adhere all the standard rules.
Disadvantage
  1. Main content cannot be indexed by Search engines
    All main content is loaded by JavaScript, Search engine won't crawler those content, this is a serious problem! However, it is easy to walk around, builds a traditional page without Ajax, store it into sitemap.xml and submit to search engine Web Master tool.

  2. Harder to development and to maintain
    Client JavaScript/Ajax development is more complex and less convenient comparing to server side technology like ASP.NET, JAVA EE or PHP. Although there are jQuery (write less, do more), Prototype.js (make develop JS in a more OO way), DoJo and so on, it still might not be very happy while a developer is struggling with mixed HTML/CSS/JavaScriptSmile | :)

P.S. I spent two days in updating my blog (http://WayneYe.com), revised the paging style from traditional into the Ajax Unique URL pattern above, it is no 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Wayne Ye
Software Developer (Senior) SAP Labs Shanghai
China China
Wayne is a software developer, Tech Lead and also a geek. He has more than 6 years' experience in Web development(server: ASP.NET (MVC), Web Service, IIS; Client: HTML/CSS/JavaScript/jQuery/AJAX), Windows development (Winform, Windows Service, WPF/Silverlight, Win32 API and WMI) and SQL Server. Deep understanding of GOF Design Patterns, S.O.L.i.D principle, MVC, MVVM, Domain Driven Design, SOA, REST and AOP.
 
Wayne's Geek Life http://WayneYe.com
 
Infinite passion on programming!
Follow on   Twitter

Comments and Discussions

 
Generalhttp://rantdriven.com/post/Using-the-Repository-Pattern-with-the-Command-and-DataMapper-Patterns.aspx PinmemberSound Logic2-May-11 17:26 
Generalhttp://rantdriven.com/post/Using-the-Repository-Pattern-with-the-Command-and-DataMapper-Patterns.aspx PinmemberSound Logic2-May-11 17:26 
Generalarticle categorized as c++ Pinmembersteveb25-Apr-11 10:52 
GeneralRe: article categorized as c++ PinmemberWayne Ye25-Apr-11 17:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.141022.2 | Last Updated 25 Apr 2011
Article Copyright 2011 by Wayne Ye
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid