Monday, October 02, 2006

Hijax

How can we make feature-rich web site and also offer the way so people with disabilities can access it?

The old way it to produce two version of the website, e. g. Flesh version and HTML only versions. The big drawback of this approach is that the user is presented with the choices first and only then the user enters the website with content. Or some sort of client-side script is run in order to determine the capabilities of the browser. There is no way easy way check the user this way (e. g. the user is blind). Therefore we have a behavior that can be switched ON or OFF.

A better way is progressive enhancement. Initially we have content that we want to publish or present. Then we have the markup – (X)HTML. We add the presentation layer – CSS. At last we add the behavior on top – DOM Scripting.

We still have to answer whether we have some of the functionality in-line or external (*.css and *.js files).

The HIJAX way is :

  • Begin by creating a website using traditional page refreshes,
  • Data is sent to the server via links and form submissions: the server returns updated pages,
  • Intercept (hijack) those links and forms using (unobtrusive) JavaScript,
  • Send that data to XMLHttpRequest instead of the server,
  • The server returns just the information that's required instead of an entire page,

We have a choice of data format:

  • XML + DOM methods
  • JSON + eval()
  • HTML + innerHTML

Another important thing is that the browser is an unpredictable environment. The user can be running on any OS with any type of web browser. The only thing that we know is what is on our server. Therefore all business logic should be kept on the server side. For example a table sorting can be done on the client-side by JavaScript. This would off-load the server, but we would have to face the challenges with the differences between JavaScript support on various browsers. On top of that we would have no feedback about the usage of table sorting. If this logic was on the server, we could collect the data about table sorting and improve the website accordingly.

The main benefits of using Hijax approach are that we do not need to spend time building a non-Ajax version. Our web application will be still accessible in the usual way. We do not duplicate the logic (client-side and server-side validation) and the links are spiderable and potentially bookmarkable.

HIJAX is a term coined by. I learnt about Hijax at the Web Directions conference. Jeremy Keith presented Proressive Enhancement with Hijax. He is an author of DOM Scripting: Web Design with JavaScript and the Document Object Model and currently working on his next book Bulletproof Ajax.

No comments:


Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.