Independent Study Deep Linking for AJAX Li Wing Ho Andy Statement of Academic Honesty This 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.
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/
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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 }}