I have just made a independent study on “deep linking for AJAX” for the course Web 2.0 technology. Seems that most of the info on the web about deep linking implementation are for Flash web site but not AJAX’s, so I release my report and presentation slide here hoping can help somebody.
What is Deep Linking
Deep Linking is a URL that point to a specific resource like a web page or a file. User can access the resource directly through the URL without further navigation (ie. bypassing “home” or “portal” page).
Why is Deep Linking Important
Deep linking is originally a build-in function of the web, enabling the web pages to be interconnected, letting the users go to a specific resource easily by clicking on the links from any web page. Without deep linking, the web sites will become too separated and cannot be called as a “web”.
Moreover, deep linking is the basic requirement for bookmarking. Since bookmarking is keeping the URL of a specific web page (or any other resources), if the page itself do not have its own URL, there is no way to bookmark it.
Search engines, which index the web pages like we bookmark them, require heavily on deep linking too. Search engines find the links on a page and follow the links to index the pages. Texts or other resources that can only be triggered to shown by script will be ignored by (most of the) search engines. So deep linking has its value of SEO.
To conclude, it is the matter of usability. Wherever the deep links are presented, eg. bookmark menu, search results, they are more usable since they are more likely to satisfy users’ needs and nearly all web-related software works with deep links since it is the architecture of the web.
The Situation of AJAX
Since the contents of AJAX sites are loaded by script in client side, they do not own a URL by default. ie. There is no deep link to that loaded content. It is a product of what AJAX intended to do: to prevent reloading of the whole page.
What is worse is when the user click the back button in the browser, the page would not reload the previous content but go the page before visiting the site. It is because the back button is implemented to track the change of URL but not the change of content.
Most of the time it does not matter since the loaded content is very small and subtle, for example validation of forms or log in result or hot posts. They are not the main content of the page so no deep link is reasonable.But if there are some cases that the main content is loaded by AJAX, deep linking should be implemented.
How to Implement Deep Linking for AJAX
Low Level Concept
There is a trick that use ‘#’ in the URL. The ‘#’ is known as a hash, which is originally used for links that link to the same page. For example:
<a href="#C4">See also Chapter 4.</a>
The above link will link to the anchor tag with attribute ‘name’ equals to ‘C4′. When clicked, the page will scrolled to the element.
It is used for implementing deep linking for AJAX because the browser would not refresh the page when the link is clicked.
What we need to do is when the page loaded, check the URL to see if there is any hash value, do the loading if needed. After that, listen for the change of the hash in the navigation bar. When it is changed, get the value and do the according operation.
The above actions can be done trivially by using the following property:
Use of Libraries
There are quite a few libraries for deep linking. They are already stable and widely used in commercial projects. We can use these libraries to avoid reinventing the wheel.
I coded two minimal demos for the two libraries (which are different from below), which can be viewed at http://blog.onthewings.net/page/deep-linking-for-ajax-demo/.
The most simple example is first link the library in head:
And then declare a function to handle the change of hash value and add the listener.
More examples can be found on http://www.asual.com/swfaddress/samples/.
History, JQuery plug-in (http://plugins.jquery.com/project/history)
This is a the plug-ins written for jQuery.
And then declare a function to handle the change of hash value. This plug-in unlike SWFAddress, it do not auto listen the change of URL. So we need to set up our own function to do so or as below bind the function to the anchor tags.
- “Deep Linking” in the World Wide Web, W3C
- Deep Linking is Good Linking, useit.com
- Deep Linking in Flash and AJAX Applications, Christian Cantrell
- Unique URLs – Ajax Patterns
- SWFAddress, Asual
- History, JQuery Plug-in
- Deep Linking, Wikipedia