We must try to seperate the things which need to be loaded on the fly, and things which should allow the viewer to be taken to a seperate page. I'm going to restrict myself to the blog environment, since I'm most familiar with use of asychronocity in blogs. In blogs, things which should be loaded asynchronously are the things which are secondary to the primary data. For example, related posts. It'd be perfectly logical to load a post which is related the one a viewer is currently reading, so that he can read it in context, rather than load it in a seperate page and take it out of context. This is a tremendoes usability upgrade, since all the information is available to the viewer without the need to switch pages. The same logic is followed in Heads Up Displays (HUD ). This does increase productivity, since it takes away a lot of clicks and keypresses.
So you see the example of making backlinks asynchronous? :) Yes! That was an idea back then, which I wanted to work on. But being as lazy as I am, never got around to it. But since then, I've been fiddling around with AJAX for my Native Search Suggestions and hence have gotten a good understanding of how it works and how to make it work. So, now I'll reveal my Asynchronous Backlinks! :)
Introduction
This is not to be confused with Recursive Backlinks by Greg. That has a completely different purpose, though is asynchronous too. AB works to make browsing backlinked posts faster, especially if they're from the same blog. Actually, only if they're from the same blog. This works great for someone like me who links back to his own posts a lot. If you don't link to your own posts, then this is definitely not for you. The reason is because the hack is limited by rules of AJAX. I can't access content from sites not on my domain. I could PHP my way around it, but I think its not fair to steal clicks and hits away from someone elses site that way.
Ok, so you like what you see? Want to try it out first? Here's a good page to try it out on. Native Blog Search. That is one the most linked to pages on this blog. Check out the backlinks, try all of them, and keep an eye to the bottom right of your screen. You'll see what I mean! :P
You wanna implement it now? Cool! :)
Implementation
Start by getting yourself a copy of Prototype.js. You're going to need this. Host it yourself (Google Pages is a fantastic way to do so!), or you can grab the one off Jscripts. I'll try and keep that updated, but don't count on it. Once you do that, add these lines in (I take the Jscripts script by default) as indicated
To the <head> area, and
After the </body> of your template. Now find your <$BlogItemBody$> tag, and replace that with
Done? Good, thats a lot of work done! :) Now, find the code for your backlinks. People have different codes for their backlinks, so I won't ask you to put any lines in. Just alter them. Add an onclick="req('<$BlogBacklinkURL$>" statement to the link which points to the backlink URL, and change the href to make it point to #. Add a <div id="aload"></div> wherever you want to show the output. Thats it! You're done! Need an explanation? Ok!
Explanation
The first thing you have to pay attention to is the two commented statements that you've wrapped your post body tag with. They are used by the script to detect exactly which part to print out. You can use any other line or code to demarkate, but remember, it should be unique. If it clashes with anything before its intended target, you'll get a messed up output.
That is all that is there to it really. The script just makes an AJAX call to the page pointed to by your backlink. If its in your domain, the returned text is filtered out and shown to you. You can add script.aculo.us effects like I have to make it more appealing, but that is all there is to it really! Too simple for you? Go ahead, expand it, lets see what you can come up with! :)
« link to me!
my coComments
my claimID
subscribe to feed
add to google
add to del.icio.us
add to yahoo!
add to bloglines
add to msn
add to Netvibes!
add to feedster
add to furl
