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 JSL 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...- Slower than the traditional way
- No feedback - loading bars unavailable.
- Breaks the Back button.
- Users have no clue on which page they actually are - so they won't be able to bookmark the page.
- Users will think that nothing is happening - when they click on the link and nothing happens.
- And More...
Comments
- 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.
whoever wrote this article is a web1.0-dumbo and has no idea what 'good web2.0 design' is
and will re-read it when making my next blog :)
but I’m enjoying reading up on it all
and finding out everyones points of view
Ah...I get it. This is a joke.
That's very cool for the interface, but terrible for search engines :(
Funny anyway, gotta try
Nice job :)
a, strong, em, b, i, code, pre, pandbrallowed. Other tags will be shown as code(< will become <). Urls, Line breaks will be auto-formated.