Independent Study Deep Linking for AJAX 

Li Wing Ho Andy

Statement of Academic HonestyThis assignment/paper represents my own work. I have not incorporated into this assignment/paper any unacknowledged material from the work of another person, including papers, words, ideas, information, computer code, data, evidence-organizing principles, or style of presentation taken from the Internet, books, periodicals, or other sources.

What is Deep Linking

• URL that point to a specific resource• bypassing "home" or "portal" page

Why is Deep Linking Important

• a build-in function of the web, enabling the web pages to be interconnected

• bookmarking• Search engines, SEO

Usability!

more likely to satisfy users' needs

The Situation of AJAX

• contents loaded by script in client side• AJAX intended to do: to prevent reloading of the

whole page• back button not functional

   Most of the time it does not matter.

How to Implement Deep Linking for AJAX

Concept • Use of '#' (hash)

 originally used for links that link to the same page.  For example: <a href="#C4">See also Chapter 4.</a>

Procedure

1.When the page loaded, check the URL to see if there is any hash value.

2.Listen for the change of the hash in the navigation bar.

3.Append some hash value in the links, like 'http://someURL/#info'

  Implement bywindow.location.hash 

Use of Libraries

• SWFAddress http://www.asual.com/swfaddress/

   • History, JQuery plug-in

http://plugins.jquery.com/project/history 

SWFAddress

• originally made for Flash• supporting both Flash and AJAX• sharing the same core JavaScript to detect and

change hash values

<script type="text/javascript">function handleChange(evt){    if (evt.pathNames[0] == 'info'){        //load info page    } else if (evt.pathNames[0] == 'contact') {        //load contact page    } else {        //load default page    }}

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);</script>

Live demohttp://blog.onthewings.net/page/deep-linking-for-ajax-demo/SWFAddress/

History, JQuery plug-in

• plug-ins written for jQuery

<script type="text/javascript">function pageload(hash) {    if(hash) {        //load some page    } else {            //load default page    }}$(document).ready(function(){    // Initialize history plugin.    $.history.init(pageload);        $("a").live("click",function(){        if ($(this).attr("href").charAt(0) == '#'){            var hash = $(this).attr("href");            hash = hash.replace(/^.*#/, '');            $.history.load(hash);            return false;        } else {            return true;        }    })});</script> 

Live demohttp://blog.onthewings.net/page/deep-linking-for-ajax-demo/jQuery-History/

Limitation

• SEO problem  workaround: non-AJAX version of the web site.

Reference• "Deep Linking" in the World Wide Web, W3C

http://www.w3.org/2001/tag/doc/deeplinking.html • Deep Linking is Good Linking, useit.com

http://www.useit.com/alertbox/20020303.html • Deep Linking in Flash and AJAX Applications, Christian Cantrell

http://weblogs.macromedia.com/cantrell/archives/2005/06/deep_linking_in.html

• Unique URLs - Ajax Patternshttp://ajaxpatterns.org/Unique_URLs

• SWFAddress, Asualhttp://www.asual.com/swfaddress/

• History, JQuery Plug-inhttp://plugins.jquery.com/project/history

• Deep Linking, Wikipediahttp://en.wikipedia.org/wiki/Deep_linking