Você está na página 1de 14

/*-------------------PUBLIC FUNCTIONS-----------------------------*/

/**
This function will make a AJAX request and manipulate the innerHTML
of the passed "div" dom element with the AJAX response.
By - Harshad Nelwadkar

Parameters:
url - The server-side resource to make a request to.
divObj - The dom element Object whose 'innerHTML' will be replaced with the AJAX
response
data - The request parameters or form Object
replaceOrAppendp- append/replace the innerHTML of Div with response Test

Imp Note:
All request are HTTP 'POST' by default.
*/
/**
loadingString - is the Loading Message to Display
*/
var loadingString = '<table width="100%" border="0" cellspacing="0"
cellpadding="0"> <tr><td width="91%" bgcolor="#FFFFFF"
class="style2">&nbsp;</td>'
+'<td width="9%" bgcolor="#FF1A1A" style="color:
#FFFFFF;font-weight: bold;">Loading....</td></tr></table>"' ;

function ajaxAppend(url, divObj ,formObj)


{
sendAJAXRequest(url, divObj, formObj, "append") ;
}
function ajaxAppendWithParam(url, divObj, params)
{
sendAJAXRequest(url, divObj, params, "replace") ;
}
function ajaxReplace(url, divObj ,formObj)
{
sendAJAXRequest(url, divObj, formObj, "replace") ;
}
function ajaxReplaceWithParam(url, divObj, params)
{
sendAJAXRequest(url, divObj, params, "replace") ;
}
function getAjaxResponse(url, params, funToCall)
{
sendAJAXRequest(url, null, params, "return", funToCall)
}
////////////////////////////////////////////////////////////////////////
function sendAJAXRequest(url, divObj, data, replaceOrAppend, funToCall)
{
var fun = null ;
var params = null;

if(trimAll(replaceOrAppend.toUpperCase()) =='APPEND')
{
fun = appendResponse ;
}
else if(trimAll(replaceOrAppend.toUpperCase()) =='REPLACE')
{
fun = replaceResponse ;
}
else
{
fun = returnResponse ;
}
if((typeof(data) == "object") && (data.elements != "undefined"))
{
//If a Form is passed.
var formObj = data;
params = AjaxRequest.serializeForm(formObj);
}
else
{
params = data; //The object passed was a url-encoded string of request
parameters.
}
//che
if(funToCall == 'undefined')
{
funToCall = null ;
}
AjaxRequest.submitPostRequest(
params,
{
'url':url
,'onSuccess':fun
,'divObj':divObj
,'onLoading':onLoadingMessage
,'onTimeout':onTimeOutMessage
,'onError':onErrorMesssage
,'timeout':15000
//,'async':false
,'funToCall':funToCall
}
);
}//end of sendAJAXRequest

/**
Note: It is recommeded that developers do not call the below functions
directly. Please use the friendly function abov
*/

appendResponse = function(req){
req.divObj.innerHTML = req.previousState +
req.responseText ;
}
replaceResponse = function(req){
req.divObj.innerHTML = req.responseText ;
}
returnResponse = function(req){
//if funToCall is of type function then this is
called by sending responseText as parameter
// funToCall is a user function on jsp
if(typeof(req.funToCall) == "function")
{
req.funToCall(req.responseText) ;
}
}
onTimeOutMessage = function(req){
if(req.divObj != null)
{
req.divObj.innerHTML = "A timeout occured
while connecting to the server.Please try again." ;
}
}
onErrorMesssage = function(req){
if(req.divObj != null)
{
req.divObj.innerHTML = "An error occured
while trying to complete your request. Error code ="+req.status
+"<br>Please
contact system administrator." ;
}
}
onLoadingMessage = function(req){
if(req.divObj != null)
{
req.divObj.innerHTML = loadingString ;
}

// ===================================================================

/**
* The AjaxRequest class is a wrapper for the XMLHttpRequest objects which
* are available in most modern browsers. It simplifies the interfaces for
* making Ajax requests, adds commonly-used convenience methods, and makes
* the process of handling state changes more intuitive.
* An object may be instantiated and used, or the Class methods may be used
* which internally create an AjaxRequest object.
*/
function AjaxRequest() {
var req = new Object();

// -------------------
// Instance properties
// -------------------

/**
* Timeout period (in ms) until an async request will be aborted, and
* the onTimeout function will be called
*/
req.timeout = null;

/**
* Since some browsers cache GET requests via XMLHttpRequest, an
* additional parameter called AjaxRequestUniqueId will be added to
* the request URI with a unique numeric value appended so that the
requested
* URL will not be cached.
*/
req.generateUniqueUrl = true;

/**
* The url that the request will be made to, which defaults to the current
* url of the window
*/
req.url = window.location.href;

/**
* The method of the request, either GET (default), POST, or HEAD
*/
req.method = "GET";

/**
* Whether or not the request will be asynchronous. In general, synchronous
* requests should not be used so this should rarely be changed from true
*/
req.async = true;

/**
* The username used to access the URL
*/
req.username = null;

/**
* The password used to access the URL
*/
req.password = null;

/**
* The parameters is an object holding name/value pairs which will be
* added to the url for a GET request or the request content for a POST
request
*/
req.parameters = new Object();

/**
* The sequential index number of this request, updated internally
*/
req.requestIndex = AjaxRequest.numAjaxRequests++;

/**
* Indicates whether a response has been received yet from the server
*/
req.responseReceived = false;

/**
* The name of the group that this request belongs to, for activity
* monitoring purposes
*/
req.groupName = null;

/**
* The query string to be added to the end of a GET request, in proper
* URIEncoded format
*/
req.queryString = "";
/**
* After a response has been received, this will hold the text contents of
* the response - even in case of error
*/
req.responseText = null;

/**
* After a response has been received, this will hold the XML content
*/
req.responseXML = null;

/**
* After a response has been received, this will hold the status code of
* the response as returned by the server.
*/
req.status = null;

/**
* After a response has been received, this will hold the text description
* of the response code
*/
req.statusText = null;

/**
* An internal flag to indicate whether the request has been aborted
*/
req.aborted = false;

/**
* The XMLHttpRequest object used internally
*/
req.xmlHttpRequest = null;

/**
* By Harshad
*/
req.divObj = null ; //The div object whose InnerHtml is to be
replaced/appended.
req.previousState = null ; //Store the previous InnerHtml of the div tag
req.funToCall = null ; //stores the function reference in the case of
returning req object
// --------------
// Event handlers
// --------------

/**
* If a timeout period is set, and it is reached before a response is
* received, a function reference assigned to onTimeout will be called
*/
req.onTimeout = null;

/**
* A function reference assigned will be called when readyState=1
*/
req.onLoading = null;

/**
* A function reference assigned will be called when readyState=2
*/
req.onLoaded = null;

/**
* A function reference assigned will be called when readyState=3
*/
req.onInteractive = null;

/**
* A function reference assigned will be called when readyState=4
*/
req.onComplete = null;

/**
* A function reference assigned will be called after onComplete, if
* the statusCode=200
*/
req.onSuccess = null;

/**
* A function reference assigned will be called after onComplete, if
* the statusCode != 200
*/
req.onError = null;

/**
* If this request has a group name, this function reference will be called
* and passed the group name if this is the first request in the group to
* become active
*/
req.onGroupBegin = null;

/**
* If this request has a group name, and this request is the last request
* in the group to complete, this function reference will be called
*/
req.onGroupEnd = null;

// Get the XMLHttpRequest object itself


req.xmlHttpRequest = AjaxRequest.getXmlHttpRequest();
if (req.xmlHttpRequest==null) { return null; }

// -------------------------------------------------------
// Attach the event handlers for the XMLHttpRequest object
// -------------------------------------------------------
req.xmlHttpRequest.onreadystatechange =
function() {
if (req==null || req.xmlHttpRequest==null) { return; }
if (req.xmlHttpRequest.readyState==1) { req.onLoadingInternal(req); }
if (req.xmlHttpRequest.readyState==2) { req.onLoadedInternal(req); }
if (req.xmlHttpRequest.readyState==3) { req.onInteractiveInternal(req);
}
if (req.xmlHttpRequest.readyState==4) { req.onCompleteInternal(req); }
};

//
---------------------------------------------------------------------------
// Internal event handlers that fire, and in turn fire the user event
handlers
//
---------------------------------------------------------------------------
// Flags to keep track if each event has been handled, in case of
// multiple calls (some browsers may call the onreadystatechange
// multiple times for the same state)
req.onLoadingInternalHandled = false;
req.onLoadedInternalHandled = false;
req.onInteractiveInternalHandled = false;
req.onCompleteInternalHandled = false;
req.onLoadingInternal =
function() {
if (req.onLoadingInternalHandled) { return; }
AjaxRequest.numActiveAjaxRequests++;
if (AjaxRequest.numActiveAjaxRequests==1 &&
typeof(window['AjaxRequestBegin'])=="function") {
AjaxRequestBegin();
}
if (req.groupName!=null) {
if
(typeof(AjaxRequest.numActiveAjaxGroupRequests[req.groupName])=="undefined") {
AjaxRequest.numActiveAjaxGroupRequests[req.groupName]
= 0;
}
AjaxRequest.numActiveAjaxGroupRequests[req.groupName]++;
if
(AjaxRequest.numActiveAjaxGroupRequests[req.groupName]==1 &&
typeof(req.onGroupBegin)=="function") {
req.onGroupBegin(req.groupName);
}
}
if (typeof(req.onLoading)=="function") {
req.onLoading(req,req.divObj);
}
req.onLoadingInternalHandled = true;
};
req.onLoadedInternal =
function() {
if (req.onLoadedInternalHandled) { return; }
if (typeof(req.onLoaded)=="function") {
req.onLoaded(req);
}
req.onLoadedInternalHandled = true;
};
req.onInteractiveInternal =
function() {
if (req.onInteractiveInternalHandled) { return; }
if (typeof(req.onInteractive)=="function") {
req.onInteractive(req);
}
req.onInteractiveInternalHandled = true;
};
req.onCompleteInternal =
function() {
if (req.onCompleteInternalHandled || req.aborted) { return; }
req.onCompleteInternalHandled = true;
AjaxRequest.numActiveAjaxRequests--;
if (AjaxRequest.numActiveAjaxRequests==0 &&
typeof(window['AjaxRequestEnd'])=="function") {
AjaxRequestEnd(req.groupName);
}
if (req.groupName!=null) {
AjaxRequest.numActiveAjaxGroupRequests[req.groupName]--;
if
(AjaxRequest.numActiveAjaxGroupRequests[req.groupName]==0 &&
typeof(req.onGroupEnd)=="function") {
req.onGroupEnd(req.groupName);
}
}
req.responseReceived = true;
req.status = req.xmlHttpRequest.status;
req.statusText = req.xmlHttpRequest.statusText;
req.responseText = req.xmlHttpRequest.responseText;
req.responseXML = req.xmlHttpRequest.responseXML;
if (typeof(req.onComplete)=="function") {
req.onComplete(req,req.divObj);
}
if (req.xmlHttpRequest.status==200 &&
typeof(req.onSuccess)=="function") {
req.onSuccess(req,req.divObj);
}
else if (typeof(req.onError)=="function") {
req.onError(req,req.divObj);
}

// Clean up so IE doesn't leak memory


delete req.xmlHttpRequest['onreadystatechange'];
req.xmlHttpRequest = null;
};
req.onTimeoutInternal =
function() {
if (req!=null && req.xmlHttpRequest!=null && !
req.onCompleteInternalHandled) {
req.aborted = true;
req.xmlHttpRequest.abort();
AjaxRequest.numActiveAjaxRequests--;
if (AjaxRequest.numActiveAjaxRequests==0 &&
typeof(window['AjaxRequestEnd'])=="function") {
AjaxRequestEnd(req.groupName);
}
if (req.groupName!=null) {

AjaxRequest.numActiveAjaxGroupRequests[req.groupName]--;
if
(AjaxRequest.numActiveAjaxGroupRequests[req.groupName]==0 &&
typeof(req.onGroupEnd)=="function") {
req.onGroupEnd(req.groupName);
}
}
if (typeof(req.onTimeout)=="function") {
req.onTimeout(req,req.divObj);
}
// Opera won't fire onreadystatechange after abort, but other
browsers do.
// So we can't rely on the onreadystate function getting called.
Clean up here!
delete req.xmlHttpRequest['onreadystatechange'];
req.xmlHttpRequest = null;
}
};

// ----------------
// Instance methods
// ----------------
/**
* The process method is called to actually make the request. It builds the
* querystring for GET requests (the content for POST requests), sets the
* appropriate headers if necessary, and calls the
* XMLHttpRequest.send() method
*/
req.process =
function() {
if (req.xmlHttpRequest!=null) {
// Some logic to get the real request URL
if (req.generateUniqueUrl && req.method=="GET") {
req.parameters["AjaxRequestUniqueId"] = new
Date().getTime() + "" + req.requestIndex;
}
var content = null; // For POST requests, to hold query
string
for (var i in req.parameters) {
if (req.queryString.length>0) { req.queryString +=
"&"; }
req.queryString += encodeURIComponent(i) + "=" +
encodeURIComponent(req.parameters[i]);
}
if (req.method=="GET") {
if (req.queryString.length>0) {
req.url += ((req.url.indexOf("?")>-1)?"&":"?")
+ req.queryString;
}
}

req.xmlHttpRequest.open(req.method,req.url,req.async,req.username,req.password);
if (req.method=="POST") {
if
(typeof(req.xmlHttpRequest.setRequestHeader)!="undefined") {
req.xmlHttpRequest.setRequestHeader('Content-
type', 'application/x-www-form-urlencoded');
}
content = req.queryString;
}
if (req.timeout>0) {
setTimeout(req.onTimeoutInternal,req.timeout);
}
req.xmlHttpRequest.send(content);
}
};

/**
* An internal function to handle an Object argument, which may contain
* either AjaxRequest field values or parameter name/values
*/
req.handleArguments =
function(args) {
for (var i in args) {
// If the AjaxRequest object doesn't have a property which
was passed, treat it as a url parameter
if (typeof(req[i])=="undefined") {
req.parameters[i] = args[i];
}
else {
req[i] = args[i];
}
}
};

/**
* Returns the results of XMLHttpRequest.getAllResponseHeaders().
* Only available after a response has been returned
*/
req.getAllResponseHeaders =
function() {
if (req.xmlHttpRequest!=null) {
if (req.responseReceived) {
return req.xmlHttpRequest.getAllResponseHeaders();
}
alert("Cannot getAllResponseHeaders because a response has
not yet been received");
}
};

/**
* Returns the the value of a response header as returned by
* XMLHttpRequest,getResponseHeader().
* Only available after a response has been returned
*/
req.getResponseHeader =
function(headerName) {
if (req.xmlHttpRequest!=null) {
if (req.responseReceived) {
return
req.xmlHttpRequest.getResponseHeader(headerName);
}
alert("Cannot getResponseHeader because a response has not
yet been received");
}
};

return req;
}

// ---------------------------------------
// Static methods of the AjaxRequest class
// ---------------------------------------

/**
* Returns an XMLHttpRequest object, either as a core object or an ActiveX
* implementation. If an object cannot be instantiated, it will return null;
*/
AjaxRequest.getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {

// Based on http://jibbering.com/2002/4/httprequest.html
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
return null;
}
}
@end @*/
}
else {
return null;
}
};

/**
* See if any request is active in the background
*/
AjaxRequest.isActive = function() {
return (AjaxRequest.numActiveAjaxRequests>0);
};

/**
* Make a GET request. Pass an object containing parameters and arguments as
* the second argument.
* These areguments may be either AjaxRequest properties to set on the request
* object or name/values to set in the request querystring.
*/
AjaxRequest.get = function(args) {
AjaxRequest.doRequest("GET",args);
};

/**
* Make a POST request. Pass an object containing parameters and arguments as
* the second argument.
* These areguments may be either AjaxRequest properties to set on the request
* object or name/values to set in the request querystring.
*/
AjaxRequest.post = function(args) {
AjaxRequest.doRequest("POST",args);
};

/**
* The internal method used by the .get() and .post() methods
*/
AjaxRequest.doRequest = function(method,args) {
if (typeof(args)!="undefined" && args!=null) {
var myRequest = new AjaxRequest();
myRequest.method = method;
myRequest.handleArguments(args);
myRequest.process();
}
} ;

/**
* Submit a form. The requested URL will be the form's ACTION, and the request
* method will be the form's METHOD.
* Returns true if the submittal was handled successfully, else false so it
* can easily be used with an onSubmit event for a form, and fallback to
* submitting the form normally.
*/
AjaxRequest.submit = function(theform, args) {
var myRequest = new AjaxRequest();
if (myRequest==null) { return false; }
var serializedForm = AjaxRequest.serializeForm(theform);
myRequest.method = theform.method.toUpperCase();
myRequest.url = theform.action;
myRequest.handleArguments(args);
myRequest.queryString = serializedForm;
myRequest.process();
return true;
};

// url, divObj, data, replaceOrAppend)


//Written by Naren and Harshad
AjaxRequest.submitPostRequest = function(params, args) {
var myRequest = new AjaxRequest();
if (myRequest==null) { return false; }
myRequest.method = "POST"; //hard-coded to POST...For Cyclops
myRequest.handleArguments(args);

//Store the previous content of the div tag in a instance variable.


//Why??...Bcoz we show a "Loading..." message till the page is loaded.
if(myRequest.divObj != null)
{
myRequest.previousState = myRequest.divObj.innerHTML;
}

myRequest.queryString = params;
myRequest.process();
return true;
};

/**
* Serialize a form into a format which can be sent as a GET string or a POST
* content.It correctly ignores disabled fields, maintains order of the fields
* as in the elements[] array. The 'file' input type is not supported, as
* its content is not available to javascript. This method is used internally
* by the submit class method.
*/
AjaxRequest.serializeForm = function(theform) {
var els = theform.elements;
var len = els.length;
var queryString = "";
this.addField =
function(name,value) {
if (queryString.length>0) {
queryString += "&";
}
queryString += encodeURIComponent(name) + "=" +
encodeURIComponent(value);
};
for (var i=0; i<len; i++) {
var el = els[i];
if (!el.disabled) {
switch(el.type) {
case 'text': case 'password': case 'hidden': case
'textarea':
this.addField(el.name,el.value);
break;
case 'select-one':
if (el.selectedIndex>=0) {

this.addField(el.name,el.options[el.selectedIndex].value);
}
break;
case 'select-multiple':
for (var j=0; j<el.options.length; j++) {
if (el.options[j].selected) {

this.addField(el.name,el.options[j].value);
}
}
break;
case 'checkbox': case 'radio':
if (el.checked) {
this.addField(el.name,el.value);
}
break;
}
}
}
return queryString;
};

// -----------------------
// Static Class variables
// -----------------------

/**
* The number of total AjaxRequest objects currently active and running
*/
AjaxRequest.numActiveAjaxRequests = 0;

/**
* An object holding the number of active requests for each group
*/
AjaxRequest.numActiveAjaxGroupRequests = new Object();

/**
* The total number of AjaxRequest objects instantiated
*/
AjaxRequest.numAjaxRequests = 0;

/*
*
*/
//////////////////This function is used to trim the String///////////////////////
function trimAll(sString)
{
while (sString.substring(0,1) == ' ')
{
sString = sString.substring(1, sString.length);
}
while (sString.substring(sString.length-1, sString.length) == ' ')
{
sString = sString.substring(0,sString.length-1);
}
return sString;
}
/////////////////End of function ////////////////

Você também pode gostar