Hijax

What is Hijax?

Treating Ajax as an enhancement.

By applying this enhancement progressively, graceful degradation is assured.

The wrong approach

Treating Ajax as an "all or nothing" technology.

It will take a lot of time and effort to create a "separate but equal" non-Ajax version.

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

Capturing form data

function prepareForm(formId) {
  if (!document.getElementById) return false;
  if (!document.getElementById(formId)) return false;
  document.getElementById(formId).onsubmit = function() {
    var data = "";
    for (var i=0; i<this.elements.length; i++) {
      data+= this.elements[i].name;
      data+= "=";
      data+= escape(this.elements[i].value);
      data+= "&";
    }
    return (!sendData(data,"formlogic.php"));
  };
}

Sending data with XMLHttpRequest

function sendData(data,file) {
  var request = getHTTPObject();
  if (request) {
    request.onreadystatechange = function() {
      doSomething(request);
    };
    request.open( "POST", file, true );
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    request.send(data);
    return true;
  } else {
    return false;
  }
}

Pattern recognition

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)

Capturing link data

function prepareLinks(containerId) {
  if (!document.getElementById) return false;
  if (!document.getElementById(containerId)) return false;
  var links =  document.getElementById(containerId).getElementsByTagName("a");
  for (var i=0; i<links.length; i++) {
    links[i].onclick =  = function() {
      var data = this.getAttribute("href").split("?")[1];
      return (!sendData(data,"formlogic.php"));
    };
  }
}

More pattern recognition

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
• Navigating archives

Example: Shopping cart (JS)

Reusable data capturing

function prepareLinks(containerId,canvasId,file) {
  if (!document.getElementById) return false;
  if (!document.getElementById(containerId)) return false;
  var links =  document.getElementById(containerId).getElementsByTagName("a");
  for (var i=0; i<links.length; i++) {
    links[i].canvasId = canvasId;
    links[i].file = file;
    links[i].onclick =  = function() {
      var data = this.getAttribute("href").split("?")[1];
      return (!sendData(data,this.file,this.canvasId));
    };
  }
}

Reusable data sending

function sendData(data,file,canvasId) {
  var request = getHTTPObject();
  if (request) {
    request.onreadystatechange = function() {
      parseResponse(request,canvasId);
    };
    request.open( "POST", file, true );
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    request.send(data);
    return true;
  } else {
    return false;
  }
}

Reusable page updating

function parseResponse(request,canvasId) {
  if (request.readyState == 4) {
    if (request.status == 200) {
      document.getElementById(canvasId).innerHTML = request.responseText;
    }
  }
}

Really resuable code

Create an object to encapsulate all your Ajax functionality.

Example: JS

Benefits of Hijax

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

Example: Sorting tables (JS)

Next

Ajax problemschallenges