Hijax

Progressive enhancement in theory

• Structure
• Presentation
• Behaviour

Progressive enhancement in practice

• Structure — HTML
• Presentation — CSS
• Behaviour — JavaScript

Learning from CSS

• Gotta keep 'em separated.
• External is better than inline.

• Inline

  <p style="font-weight: bold">This is an introductory paragraph.</p>

• External

  <p class="introduction">This is an introductory paragraph.</p>

  p.introduction { font-weight: bold; }

Unobtrusive JavaScript

• JavaScript pseudo-protocol

  <a href="javascript:window.open('help.html')">my help page</a>

• Meaningless link

  <a href="#" onclick="window.open('help.html'); return false">
  my help page</a>

• Inline JavaScript

  <a href="help.html"
  onclick="window.open(this.getAttribute("href")); return false;">
  my help page</a>

• No inline JavaScript

  <a href="help.html" class="help">my help page</a>

Writing the function

• function doPopups() {

•   var links = document.getElementsByTagName("a");

•   for (var i=0; i < links.length; i++) {

•     if (links[i].className.match("help")) {

•       links[i].onclick = function() {

•         window.open(this.getAttribute("href"));

•         return false;

•       };
      }
    }
  }

Triggering the function

• <script type="text/javascript" src="file.js"></script>
• doPopups();
• window.onload = doPopups;
• addLoadEvent from Simon Willison: addLoadEvent(doPopups);

Progressive enhancement and Ajax

• The wrong approach

  Treating Ajax as an "all or nothing" technology.

• What is Hijax?

  Treating Ajax as an enhancement.

The Hijax approach

• 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.

Server-side requirements

Back-end architecture should be modular.

Web pages are created by joining modules together (e.g. navigation, log-in form, shopping cart, etc.)

The paradox

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

Links

Clicking on a link returns the same page but with one portion changed (different data or different view of data).

• Product ratings
• Filtered result set

Example: Contact details (JS) (index.php) (people.php)

Forms

A page that includes a form: when the form is submitted, the same page is returned with just part of the page updated.

• Blog comments
• Shopping carts
• Registration forms

Example: Contact form (JS) (index.php) (formlogic.php)

The deceptively rich client

• No need to spend time and resources building a non-Ajax version.
• No duplication of logic (e.g. form validation).
• Client-side processing kept to a minimum: all the heavy lifting happens on the server.

Next...

Ajax challenges