/**
* This is a generic AJAX class used to access the database and publish an HTML response.
*
* @author Rudy Bartel
* @copyright WedoTechnology Canada Inc.
* @version 1.0
* @date December 7, 2007
*
*/
function Ajax() {
var xmlHttp = null; // The AJAX request object.
var callbackFunction = null; // The callback function to reply to.
var htmlId = null; // The ID of the HTML element to put the response in.
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch ( e ) {
//Internet Explorer
try {
xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP" );
} catch ( e ) {
xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
}
}
if ( xmlHttp == null ) {
alert ( "Browser does not support HTTP Request" );
return false;
}
/**
* Sends an AJAX post request to the given URL and sets up the callback method.
* The callback method you specify should have one parameter for the html response to be published in the page.
* The parameters are given as an array of arrays where the inner array is a name/value pair.
* Sample usage:
*
* function my_callback_method( html ) { ... }
*
* function ajaxUpdate() {
* var ajax = new Ajax();
* ajax.post( "my_file.php", my_callback_method, [ ["first_name", "Rudy"], ["last_name", "Bartel"] ] );
* }
*
* param url The URL to send the request.
* param callback The callback method to send the response.
* param params The parameters for the request as an array of arrays.
*/
Ajax.prototype.post = function ( url, callback, params ) {
callbackFunction = callback;
if ( eval( "typeof(" + callbackFunction + ")") != "function" && callback != null ) {
alert( "Invalid callback function in Ajax.post (" + callback + ")" );
}
var paramString = getParamString( params );
xmlHttp.onreadystatechange = callbackStateChanged;
xmlHttp.open( "POST", url, true );
xmlHttp.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
xmlHttp.setRequestHeader( "Content-length", paramString.length );
xmlHttp.setRequestHeader( "Connection", "close" );
xmlHttp.send( paramString );
}
/**
* Sends an AJAX post request to the given URL puts the response in the HTML element for the given ID.
* The parameters are given as an array of arrays where the inner array is a name/value pair.
* Sample usage:
*
*
*
*
* param url The URL to send the request.
* param id The ID of the HTML element to put the response in.
* param params The parameters for the request as an array of arrays.
*/
Ajax.prototype.post2html = function( url, id, params ) {
htmlId = id;
if ( document.getElementById( id ) == null ) {
alert( "Invalid document element in Ajax.post2html (" + id + ")" );
}
var paramString = getParamString( params );
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open( "POST", url, true );
xmlHttp.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
xmlHttp.setRequestHeader( "Content-length", paramString.length );
xmlHttp.setRequestHeader( "Connection", "close" );
xmlHttp.send( paramString );
}
/**
* Gets a URI parameter string using the given array of arrays.
*
* param params The array of arrays of parameters.
* return The formatted parameter string based on the given arrays.
*/
function getParamString( params ) {
var paramString = "";
for ( i = 0; i < params.length; i++ ) {
if ( params[i] ) {
paramString = paramString.concat( params[i][0], "=", params[i][1] );
if ( i < params.length - 1 ) {
paramString = paramString.concat( "&" );
}
}
}
return paramString;
}
/**
* Handles the AJAX response and calls the callback function (if applicable) when the response arrives.
*/
function callbackStateChanged() {
if ( xmlHttp.readyState == 4 || xmlHttp.readyState == "complete" ) {
if ( callbackFunction ) {
callbackFunction( xmlHttp.responseText );
}
}
}
/**
* Handles the AJAX response and puts the response in the HTML element for the desired ID.
*/
function stateChanged() {
if ( xmlHttp.readyState == 4 || xmlHttp.readyState == "complete" ) {
if ( htmlId ) {
document.getElementById( htmlId ).innerHTML = xmlHttp.responseText;
}
}
}
}