Wednesday, January 25th, 2006

Hijax: Graceful Degration

Category: Accessibility, Programming

Jeremy Keith (via Marko Samastur) writes of a Hijax, a specific technique for graceful degradation:

I wrote some time back about progressive enhancement with Ajax. It’s a very simple idea:

  1. First, build an old-fashioned website that uses hyperlinks and forms to pass information to the server. The server returns whole new pages with each request.
  2. Now, use JavaScript to intercept those links and form submissions and pass the information via XMLHttpRequest instead. You can then select which parts of the page need to be updated instead of updating the whole page.

Jeremy points out that the server-side will need to flexible, so you can return either the entire page (for the initial version) or small blocks (for the Ajax version). While he suggests this should be done upfront, you could also take an agile view and do it only after creating an initial, non-Ajax, website.

Worth noting there are libraries like ComfortASP that (as far as I can tell) automate this pattern. i.e. You code up a conventional web app and they’ll intercept things such that web remoting can happen automatically if it’s supported in the browser.

This alone won’t make applications really rich – Ajax is a lot more than fusing blocks of content onto the page. However, it’s certainly a handy technique for making applications a bit richer, while gracefully degrading and with minimal programming effort.

Posted by Michael Mahemoff at 10:07 am
13 Comments

+++--
3.8 rating from 83 votes

13 Comments »

Comments feed TrackBack URI

If you use Ajax to smarten up your traditional web application, previously built or not, I believe this should be the only way.

I remember at some point early last year there was a european (dutch?) web company that rebuilt their whole web appearance with Ajax, without no-script fallback.
I thought this to be a massive step back for accessibility, and expect many examples to follow; but many others have written about it, I guess I don’t have to elaborate.

Aside from that, you might want to give your technorati tag another “s”.

Comment by Matthias — January 25, 2006

Well this isn’t anything new and not a technique per-se. You can do this (like i do) by using behaviours…

e.g. create a hyperlink (for instance with href=”delete/item/1″), and create a behaviour which you initialize on page load. In this behaviour, the onclick does some ajax stuff and returns false.

And there you have it, excellent fallback!

Comment by Gilles — January 26, 2006

Isn’t that what the article said?

Comment by Matthias — January 26, 2006

this href="delete/item/1" is starting to spread over the internet. It is not clear what it is supposed to do. But it is important to insists that this is BAD if it implies deleting data from a database etc…

GET method should not be used for actions that alter data. This should be done with a POST. So to degrade gracefully, the delete action should be supported by a form element.

Comment by Mortimer — January 26, 2006

Matthias,

Why would a get for data update be any different than doing a post?

Comment by Richard Collette — January 30, 2006

The degrading happens automatically if you use Xin – (Ajax is assumed to begin with) – you dont have to do anything special server/clientside either way.
http://www.naltabyte.se/howto.htm

Comment by Mikael Bergkvist — January 30, 2006

[…] First, let me explain why only these 6 Frameworks are included although there is a lot more AJAX stuff for ASP.NET out there. All the frameworks listed here have one unique AJAX feature: They allow updating page content without programming AJAX directly – i call it indirect AJAX programming – a compareable concept is called Hijax. […]

Pingback by Ajaxian » A Comparison of Ajax Frameworks for ASP.NET — February 3, 2006

[…] First, let me explain why only these 6 Frameworks are included although there is a lot more AJAX stuff for ASP.NET out there. All the frameworks listed here have one unique AJAX feature: They allow updating page content without programming AJAX directly – i call it indirect AJAX programming – a compareable concept is called Hijax. […]

Pingback by A Comparison of Ajax Frameworks for ASP.NET — Sam’s random musings Archive — February 3, 2006

No, it’s not the “only way”. Like anything else, it depends wholly on the application’s audience. I would way that 90% of AJAX uses would benefit from this paradigm, but that still leaves 10% in an ever-increasing population of audiences of specific-use web-based applications which have been created to replace native desktop applications. This is one of the primary uses of AJAX, so it is not wise to suggest that the “only way” to use AJAX is in a way that degrades gracefully. Doing so will have you left behind.

Comment by mwarden — February 17, 2006

But why not let the browser handle the Hijaxing internally?

That’s what happens in the Windows Application framework – the window manager takes care of the screen updates.

Right now Hijax is the window manager for web forms…

Comment by Troels Wittrup Jensen — February 23, 2006

Jak sprawdzić czy dana wartość istnieje w bazie danych, oraz parÄ™ innych wyczytaych "nowoÅ›ci" z blogów, min AJAX, Origami, Hijax…

1) Jak przeszukać wszystkie kolumny we wszystkich tabelach w bazie danych by znaleźć okreÅ›lony klucz/sÅ‚owo?…

Trackback by Co Kierepka czyta, wie lub myÅ›li, że wie :) — February 24, 2006

@ Matthias : I think you’re right that it’s a bad idea to propogate URLs containing verbs altogether. Submissions of requests for action should occur through POSTs, PUTs, and DELETEs which should happen as form submission > interception by javascript > submission to server via xmlhttprequest. If this model is observed, we won’t wind up with URLs like …/action/collection/id (GETs for getting details on an object are just the implied action when you want info on …/collection/id).

Note: I’m brand new to AJAX so if something I said was wrong, cut me a little slack and school me in the wise ways.

Comment by James Revillini — February 25, 2006

One point to remember here is that you also need to incorporate a history management framework for the back button to function properly

Comment by deniz dizman — September 17, 2007

Leave a comment

You must be logged in to post a comment.