loading...

Hyperlink 2.0 - Ajax Page Transitions

This script is sooo Web 2.0(it is so Web 2.0 that I think that it is really Web 2.5). It works perfectly if there is no javascript(Graceful degradation). As a matter of fact, it works better if there is no javascript. Can you think of another Ajax app that works better if there no javascript? I can't think of one - this script is the first in that area.

Working

When a user clicks on a link, this script finds which page linked and then load that page using AJAX internally. Then it takes the contents of the <body> tag and replace the contents of the body tag of the current page with the new content. Thus we render the new page - without changing the URL.

Code

See the code for hyperlink 2.0(JS File).

This script uses the JX Ajax Library and the getElementsByClassName function.

Problems

Just in case that there is anything wrong with your sarcasm detectors, let me make myself very clear. Do not use this method. I just provided this sample to make fun of the overuse/abuse of ajax we are seeing on the web. The main reasons why you should not use this script are given below...

Related Scripts

Comments

Anonymous at 10 Sep, 2006 02:12
whatz the solution for the problems listed here?
Reply to this.
Binny V A at 11 Sep, 2006 09:34
Use web 1.0 hyperlinks. There is nothing wrong with using tags. I just made this script as a joke.
Reply to this.
Anonymous at 30 Nov, 2006 06:24
Pretty funny ;)
Reply to this.
Anonymous at 07 Jan, 2007 05:18
I gotta tell my coder to use this on my next site. Thanks.
Reply to this.
Jercos at 19 Mar, 2007 06:25
Oh boy! a technology with a lotta hype!!! gotta use it!!!
Reply to this.
awadhesh at 29 Mar, 2007 02:04
why not work the js properly
Reply to this.
Anonymous at 19 Apr, 2007 12:28
This is more stupid than you probably realize. You're just thinking like a web 1.0 weenie rather than imagining the possibilities. Your list of problems is only valid if you implement this kind of transition wrong:

- Slower than the traditional way. It depends. If the user doesn't have to load a whole raft of server-side code in addition to the new content, this can be much faster. In general, it's demonstrably much faster than the traditional full-page-refresh method if a user isn't loading mostly-cached material from the previous page.

- No feedback - loading bars unavailable. Responsible developers always provide visual cues that something is being loaded. To do otherwise just isn't good Ajax. It's also not good user interface design, period.

- Breaks the Back button. Not necessarily. There are scads of libraries that maintain browser history for this kind of linking. However, the back button is overrated anyway.

- Users have no clue on which page they actually are - so they won't be able to bookmark the page. Again, this is true only if you don't follow good web design principles. In fact, this is just as much a problem whether you use traditional links or not. Losing users on websites has been a rite of passage for new web designers for well over a decade. There's no reason you can't provide breadcrumbs and other standard navigation context for Ajax-style linking. In fact, by avoiding a page refresh, this kind of navigation can actually preserve user orientation.

- Users will think that nothing is happening - when they click on the link and nothing happens. You already said this. See my reply to your "no feedback" item above.

However, you're right... no one should use this script of yours.
Reply to this.
Anonymous at 18 Feb, 2008 06:07
soooo true, anonymous.

whoever wrote this article is a web1.0-dumbo and has no idea what 'good web2.0 design' is
Reply to this.
Anonymous, but not the same one at 21 Apr, 2007 07:49
Um, the previous reply was more sarcasm, right?
Reply to this.
def47 at 06 May, 2007 03:07
Thanks I'm bookmarking this
and will re-read it when making my next blog :)
Reply to this.
free iphone at 31 Aug, 2007 03:17
Yeah, me too.
Reply to this.
Jim at 14 May, 2007 06:08
Yep, gonna have to use this on future sites. TY
Reply to this.
play uk bingo at 02 Jun, 2007 02:38
Thanks for posting this, I’m new to all this stuff
but I’m enjoying reading up on it all
and finding out everyones points of view
Reply to this.
butlimous at 23 Jun, 2007 07:00
Thanks for this nice entry. I want just to add that AJAX introduces new technologies everyday that help different ranks of web developers. However, AJAX needs good protection because it may be a good weapon for hackers. Thank you again!
Reply to this.
I love free at 26 Aug, 2007 10:27
OOooo.....k? What happens if your users have JS turned off?

Ah...I get it. This is a joke.
Reply to this.
free iphone at 31 Aug, 2007 03:15
"When a user clicks on a link, this script finds which page linked and then load that page using AJAX internally. Then it takes the contents of the tag and replace the contents of the body tag of the current page with the new content. Thus we render the new page - without changing the URL."

That's very cool for the interface, but terrible for search engines :(
Reply to this.
free ipod touch at 08 Sep, 2007 03:33
Cute, LOL.
Reply to this.
free ipod touch at 13 Sep, 2007 10:39
Transitions are awesome!
Reply to this.
gourmet at 04 Oct, 2007 06:22
Nice Idea ,

Funny anyway, gotta try
Reply to this.
JS at 07 Oct, 2007 05:15
I'll try this today, thanks :)
Reply to this.
benji at 18 Oct, 2007 02:42
LOL.
Reply to this.
JAke at 21 Nov, 2007 09:11
Thanks, works!
Reply to this.
JAke at 21 Nov, 2007 09:11
Confirmed!
Reply to this.
Robert Apple at 03 Jan, 2008 10:27
I've always hated it whenthe back button got broken. Back in my tech support days people thought that a broken back button meant a virus coming from the website.
Reply to this.
Chat at 17 Feb, 2008 06:44
broken back button meant a virus coming from the website.
Reply to this.
gamermediadownload at 17 Apr, 2008 10:01
LOL nice. Funny though, I'll give it a shot
Reply to this.
Comment


Comment




Comment Formating : HTML tags a, strong, em, b, i, code, pre, p and br allowed. Other tags will be shown as code(< will become &lt;). Urls, Line breaks will be auto-formated.