Deep Linking For Ajax Presentation
Post on 18-Nov-2014
14342 Views
Preview:
DESCRIPTION
Transcript
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
top related