Putting it all together

Pattern recognition

• One part of the page is a container for links or a form.
• The data from this container is captured.
• This data is sent to a URL via XMLHttpRequest.
• A loading function is triggered to let the user know something is happening.
• Part of the page—the canvas— is updated.
• A callback function is triggered to let the user know something has happened.

Abstraction

function Hijax() {

•   var container,url,canvas,data,loading,callback,request;

•   this.setContainer = function(value) {
      container = value;
    };

•   this.setUrl = function(value) {
      url = value;
    };

•   this.setCanvas...
    this.setLoading...
    this.setCallback...

}

Capture form data

this.captureData = function() {

•   if (container.nodeName.toLowerCase() == "form" {

•     container.onsubmit = function() {

•       var query = "";
        for (var i=0; i<this.elements.length; i++) {
          query+= this.elements[i].name;
          query+= "=";
          query+= escape(this.elements[i].value);
          query+= "&";
        }

•       data = query;

•       return !start();
      };

Capture link data

} else {

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

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

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

•       var query = this.getAttribute("href").split("?")[1];

•       url+= "?"+query;

•       return !start();
      };
    }

•   links = null;

}

Create an instance

var start = function() {

•   request = getHTTPObject();

•   if (!request || !url) {
      return false;

•   } else {
      initiateRequest();
      return true;
    }

};

Begin the Ajax request

var initiateRequest = function() {

•   if (loading) {
      loading();
    }

•   request.onreadystatechange = completeRequest;

•   if (data) {
      request.open("POST", url, true);
      request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      request.send(data);

•   } else {
      request.open("GET", url, true);
      request.send(null);
    }

};

Complete the Ajax request

var completeRequest = function() {

•   if (request.readyState == 4) {

•     if (request.status == 200 || request.status == 304) {

•       if (canvas) {
          canvas.innerHTML = request.responseText;
        }

•       if (callback) {
          callback();
        }
      }
    }

};

Public methods

function Hijax() {
  this.setContainer = function(value) { };
  this.setUrl = function(value) { };
  this.setCanvas = function(value) { };
  this.setLoading = function(value) { };
  this.setCallback = function(value) { };
  this.captureData = function() { };
}

Private methods

function Hijax() {
  var start = function() { };
  var getHTTPObject = function() { };
  var initiateRequest = function() { };
  var completeRequest = function() { };
}

Using the object

• var instance = new Hijax();

• instance.setContainer(document.getElementById("container"));

• instance.setUrl("myfile.php");

• instance.setCanvas(document.getElementById("canvas"));

• instance..setLoading(function() {
    displayLoading(document.getElementById("canvas"));
  });

• instance.setCallback(function() {
    fadeUp(document.getElementById("canvas");
  });

• instance.captureData();

Example

Bulletproof Books

• index.php
• products.php
• rating.php
• shoppingcart.php
• Cart.inc
• hijax.js

Error handling

• var container,url,canvas,data,loading,callback,errorhandler,request;

• this.setErrorhandler = function(value) {
    errorhandler = value;
  };

• completeRequest

  if (request.status == 200 || request.status == 304) {
  ...
  } else {
    if (errorhandler) {
      errorhandler();
    }
  }

Timing out

• var container,url,canvas,data,loading,callback,errorhandler,request,timer;

• initiateRequest

  timer = setTimeout(function() {
    request.onreadystatechange = function() {};
    request.abort();
    if (errorhandler) {
      errorhandler();
    }
  },60000);

• completeRequest

  if (request.status == 200 || request.status == 304) {
    clearTimeout(timer);
  }

Next...

The future of Ajax