deep linking for ajax presentation
DESCRIPTION
A presentation of independent study for the course Web 2.0 technologies in City University of Hong Kong. For more information please go to http://blog.onthewings.net/2009/04/08/deep-linking-for-ajaxdeep-linking-for-ajax/TRANSCRIPT
![Page 1: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/1.jpg)
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.
![Page 2: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/2.jpg)
What is Deep Linking
• URL that point to a specific resource• bypassing "home" or "portal" page
![Page 3: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/3.jpg)
Why is Deep Linking Important
• a build-in function of the web, enabling the web pages to be interconnected
• bookmarking• Search engines, SEO
![Page 4: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/4.jpg)
Usability!
more likely to satisfy users' needs
![Page 5: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/5.jpg)
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.
![Page 6: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/6.jpg)
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>
![Page 7: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/7.jpg)
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
![Page 8: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/8.jpg)
Use of Libraries
• SWFAddress http://www.asual.com/swfaddress/
• History, JQuery plug-in
http://plugins.jquery.com/project/history
![Page 9: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/9.jpg)
SWFAddress
• originally made for Flash• supporting both Flash and AJAX• sharing the same core JavaScript to detect and
change hash values
![Page 10: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/10.jpg)
<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>
![Page 11: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/11.jpg)
Live demohttp://blog.onthewings.net/page/deep-linking-for-ajax-demo/SWFAddress/
![Page 12: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/12.jpg)
History, JQuery plug-in
• plug-ins written for jQuery
![Page 13: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/13.jpg)
<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>
![Page 14: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/14.jpg)
Live demohttp://blog.onthewings.net/page/deep-linking-for-ajax-demo/jQuery-History/
![Page 15: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/15.jpg)
Limitation
• SEO problem workaround: non-AJAX version of the web site.
![Page 16: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/16.jpg)
![Page 17: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/17.jpg)
![Page 18: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/18.jpg)
![Page 19: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/19.jpg)
![Page 20: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/20.jpg)
![Page 21: Deep Linking For Ajax Presentation](https://reader035.vdocument.in/reader035/viewer/2022081413/546aebc3af795920668b61c5/html5/thumbnails/21.jpg)
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