Patterns of Chaos
Logo

Simple AJAX Library

Updated April 12, 2008

This is a very basic, easy-to-use AJAX library. It has no fancy features, no DOM manipulation code - all it does is facilitates making an AJAX call and handling the response. In its present form, it makes no provision for queuing of calls and simply relies on browser queuing. Also, there is currently no provision for any sort of error handling.

Download

Right-click and select Save As: poc.ajax.js

Usage

Include a SCRIPT tag for POC.Ajax:

 <script type='text/javascript' src='javascript/poc.ajax.js'></script> 

To make an AJAX call, you first must define a response function, then create a POC.Ajax object, and finally make the request:

function resp(response_text)
{
  // Handle Ajax Response - for example:
  alert(response_text);
}

var obj = new POC.Ajax(resp);
obj.sendRequest('ajaxServerScript.php');
    

To send arguments via a standard AJAX request, simply add a query string to the end of the URL. The default AJAX method is GET:

obj.sendRequest('ajaxServerScript.php?arg1=something&arg2=somethingelse');

If you want to send data via a POST request, such as for a form submission, you must define an argument list. This list is formatted similarly to the query string, only it is not joined to the URL. Then, call the sendPostRequest method with the URL and argument list:

var args = "arg1=something1&arg2=something2&arg3=something3";
var url = "ajaxServerScript.php";
obj.sendPostRequest(url,args);
    

API

Create object:

var obj = new POC.Ajax(response_handler_function);

Make Ajax Call:

obj.sendRequest(url_of_ajax_server_script);

Make an Ajax POST request

obj.sendPostRequest(url_of_ajax_server_script,post_args);

Code

if (!POC) var POC = {};

POC.Ajax = function(fn)
{
  var obj = this;
  // set return function
  this.whatToDo = fn;
  
  function createRequestObject()
  {
    var ro;
    if (window.XMLHttpRequest)
    {
      ro = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
      ro = new ActiveXObject('Microsoft.XMLHTTP');
    }
    else ro = null;
    return ro;
  }
  
  this.http = createRequestObject();
  
  this.sendRequest = function(url)
  {
    this.http.open('get',url);
    this.http.onreadystatechange = this.handleResponse;
    this.http.send(null);
  }
  
  this.sendPostRequest = function(url,args)
  {
    this.http.open('POST',url,true);
    this.http.onreadystatechange = this.handleResponse;
    this.http.setRequestHeader
      ("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
    this.http.send(args);
  }
  
  this.handleResponse = function()
  {
    if (obj.http.readyState == 4)
    {
      if (obj.http.status == 200)
      {
        // process response
        obj.whatToDo(obj.http.responseText);
      }
      else
      {
        // process error
        // TODO: add some sort of error handling here
        alert('ajax error: '+obj.http.status);
      }
    }
  }
}
    

To do

  • Add better error handling options
  • Add queuing capabilities