Ajax Wrapper Class

[hotwheelharry]

Allo!
When I was learning Javascript I thought that all those big fancy frameworks were too big and Ajax functionality was too messy in them. Ajax can be clean!

This isn't some huge boost to Ajax, it just organizes it.
I think this script allows Ajax to be implemented in any website very easily.
If there is already something like this... oops,
I made it to up my skill anyway.

Compatability: All major browsers!

Feel FREE to do whatever you want with this script.

Happy Coding!

Just drop in the file.

<script type="text/javascript" src="Ajax.js"></script>


So simple...

var service = new Ajax(Ajax.GET, "service.php?param=4", false);
service.Send();
alert(service.Request.responseText);



Using the code:

/*##############
# Contructor:
# Ajax(method, url, async, onreadystatechange, onabort)
#
# Methods (static):
# Ajax.GetRequest();
# --> returns null or xmlrequest if supported
# Ajax.CheckSupport();
# --> returns true or false if supported
#
# Methods (instance):
# req.Send(params);
# --> sends a request, params are optional and only for POST
# req.Abort();
# --> stops a request
#
# Enum (static);
# Ajax.GET
# Ajax.POST
# --> both specify a type of request, not even necessary though,
# --> and just for the type of people who like enums.
#
# Properties (instance):
# req.Async ........................................................ [boolean]
# --> specifies if async request
# req.Method ...................................................... [string/int] (depends if you use "method" or Ajax.METHOD)
# --> specifies the type of request
# req.Url ............................................................ [string]
# --> specifies the location of the request
# req.Request ..................................................... [XMLRequest]
# --> contains the XMLRequest object
# req.OnReadyStateChange .................................. [function]
# --> is an event handler called when readystate changes
# req.OnAbort .................................................... [function]
# --> is event handler called when request is aborted
#
##############*/

//EXAMPLES

//this is a synchronous request, async=false
var searchRequest = new Ajax(Ajax.GET, "Search.aspx?q=apples", false);
searchRequest.Send();
var results = searchRequest.Request.responseText;
/* [Done!] */

//async request
var searchRequest2 = new Ajax("GET", "Search.aspx?q=turkey+sandwhich", true, function(request)
{
if(request.readyState == 4)
{
alert(request.responseText);
}
});
searchRequest2.Send();
/* [Done!] */


//A POST Example
var postRequest = new Ajax("POST", "post.php", false);
var params = "a=4&b=1337&operator=multiply";
postRequest.Send(params);
/* [Done!] */




//So why is this good?
//Because you can create as many requests as you want without them interfering with anything else.
//AND, you can re-use an old request after it's done if you want to.

//for example you could have many requests pending at the same time... id on't know how good of a thing that would be but you could do it.

var PendingRequests = new Object();
var TotalCompleted = 0;
for(var i = 0; i < 100; i++)
{
var url = "SomePage.php?id=" + i;
PendingRequests["r"+i] = new Ajax(Ajax.GET, url, true, function(req)
{
if(req.readyState == 4)
{
TotalCompleted++;
}
});
PendingRequests["r"+i].Send();
}
//now PendingRequests contains 100 Ajax requests all labeled PendingRequests.r0, PendingRequests.r1, PendingRequests.r2... etc.

//You can then access the returned data later in page execution like...
var product_ID_15 = PendingRequests.r15.Request.responseText;








/************
**** AJAX ***
************/

function Ajax(method, url, async, handler, onAbort)
{
this.Async = async;
this.Method = ""; //assigned to real in the switch statement
this.Url = url;
this.Request = Ajax.GetRequest();

var thatRequest = this.Request;
this.OnReadyStateChange = function(){
handler(thatRequest);
};
this.OnAbort = onAbort;
switch(method)
{
case Ajax.GET: this.Method = "GET";
break;
case Ajax.POST: this.Method = "POST";
break;
default: this.Method = method;
}
}
Ajax.prototype.Send = function(postData)
{
if(this.Request)
{
this.Request.open(this.Method, this.Url, this.Async);

if(this.Async)
{
this.Request.onreadystatechange = this.OnReadyStateChange;
}
if(this.Method.toUpperCase() != Ajax.POST)
{
postData = null;
}
this.Request.send(postData);
return true;
}
return false;
}
Ajax.prototype.Abort = function()
{
if(this.Request)
{
this.Request.abort();
if(typeof (this.OnAbort) == "function")
{
this.OnAbort(this.Request);
}
return true;
}
return false;
}


Ajax.GET = 0;
Ajax.POST = 1;

Ajax.GetRequest = function()
{
var request = null;
var constructorDeviceAwesome = null;
var turkeySandwhich = "Good";
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
Ajax.GetRequest = function()
{
return new XMLHttpRequest();
}
}
else if (window.ActiveXObject) {
try {
request = new ActiveXObject("MSXML2.XMLHTTP");
Ajax.GetRequest = function()
{
return new ActiveXObject("MSXML2.XMLHTTP");
}
}
catch (e1) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
Ajax.GetRequest = function()
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
catch (e2) {
//Failed to get XMLHttpRequest.
}
}
}
return request;
}

Ajax.CheckSupport = function()
{
var validReq = Ajax.GetRequest();
if(validReq != null)
{
return true;
}
else
{
return false;
}
}