Archive for the ‘Technology’ Category

Hijax, jQuery, and CakePHP Sweetness



What is Hijax

Hijax, the term, is a play on words. It combines the words Ajax and Hijack to describe its core functionality. Hijax uses Ajax and Javascript where available to create those Web 2.0 effects to which we have all grown accustomed: shiny transitions and quick page interaction. It also Hijacks the HTTP reqeust when Javascript is availble and enables Ajax form submission, history, page loading, etc. When Javascript is not available, the page functions normally, except without the fancy transitions and Ajax page interactions.

Backwards compatibility is the core idea of Hijax: to create a rich client experience while not sacrificing anything in accessibility. The core Hijax proponents, and unobtrusive Javascript coders in general, stress that developers should progressively enhance rather than abandoning accessibility from the start. Jeremy Keith, who coined the term Hijax, states it best in his writeup at DOMscripting:

  • Plan for Ajax from the start.
  • Implement Ajax at the end.

This essentially means developing a fully functioning site before adding Ajax or Javascript effects. Then, when the core functionality is complete, we add in Javascript and Ajax while not breaking any of the functionality that previously worked.

This is normally accomplished by transferring most of the responsibility of data processing to the server, instead of relying on Javascript to do much of the heavy lifting. The implication is that by relying on the server we need less Javascript code to accomplish the same amount of interaction that would require much more Javascript. This in turn means less dependence on Javascript for normal page interactions.

In Practice

In practice, Hijax requires a modular web framework to be able to conditionally respond to differing types of requests. For example, a non Javascript capable browser will submit a form using standard urlencoded GET or POST parameters and standard HTTP headers. The browser then expects a full page to be sent in response. An Ajax form submission can submit the form as a serialized JSON or XML object with the X-Requested-With header set to XMLHttpRequest. The page would then expect perhaps a JSON object or a partial page response to load into a container. The server side script, in order to fully realize Hijax, must be able to flexibly respond to each of those requests.

Likewise, the Javascript library must be able to unobtrusively Hijack form submissions. jQuery is an excellent choice in terms of unobtrusiveness and community support. Many people report success in using the popular Form plugin with Hijax implementations. It allows the developer to remove all behavioral code from the markup and place it in the HEAD or in a separate included file. This approach to Hijax is vital as it removes the dependency on Javascript to normal form submission, and other page interactions.

Another excellent choice in Hijax frameworks is CakePHP. CakePHP already does most of the heavy lifting by determining request types and deserializing XML objects, among other features. This allows the developer time to focus on the actual implementation of the application rather than focus on creating a Hijax friendly framework. Much of the work is done by the RequstHandler component which handles converting request objects and setting content type specific layouts or views.

For Example

While the only example of Hijaxing an application in this post is by Hijaxing forms, it can be done with any Ajax technique. I am currently working with Hijax techniques in creating an accessible navigation system where non Javascript requests will get a standard querystring appended to the url, and Ajax requests will get a # appended, such that history is preserved in both instances. In order to preserve history with Ajax requests I am using the excellent History plugin. In the non Javascript instance a full page is included in the response, where in an Ajax response only the content of the page that changes is included in the response. In both cases the action code and the view code are almost exactly the same.

In Summary

Hijax, in summation, is not just another useless buzzword. Hijax offers web developers and designers the flexbility and interactivity of Ajax while at the same time ensuring that a site is usable by the greatest possible amount of users. As opposed to other Ajax frameworks or techniques that aim to make the web more interactive, Hijax aims to make the web more interactive and more accessible.