Ajax callback function causes me to pass too many parameters that are not used

Go To StackoverFlow.com

1

This is sort of a code design problem.

Originally I used Ajax like this:

Original Ajax Call

Ajax.repeatUse( ajaxSerialize( this.form_element ) + '&ajax_type=ControlSignIn', ajaxTypeRespond, this.response_element );

where ajaxTypeRespond is the callback function on a successfull ajax call.

Problem is, is that I have to pass in the needed parameters to the callback function, in this case only this.response_element. This is awkward because it is not actually used in the ajax call but simply passed in to the call of the call back function.

Also, as functionality grows this parameter list keeps growing.

What I want to do is just return the responseText and then combine the needed parameters into a new function call like this.

Wanted Ajax Call

var server_response_text = AjaxNew.use( ajaxSerialize( this.form_element ) + '&ajax_type=ControlSignIn' );
ajaxType( server_response_text, this.response_element, 'respond' ); 

Problems is now, server_response_text is not defined as it is not a synchronous function ( Ajax ). Is there a way to wait until it is set before calling ajaxType

I have the loop in for IE 10230 errors..it does not pertain to this question..but I found it too difficult to remove for the example. Below are my Ajax functions with the loop.

Ajax Functions

var Ajax = function()
{
};

Ajax.create = function()
{
    var request;
    try
    {
        request = new XMLHttpRequest();
    }
    catch( error )
    {
        try 
        {
            request = new ActiveXObject( "Msxml2.XMLHTTP" );
        }
        catch( error )
        {
            try
            {
                request = new ActiveXObject( "Microsoft.XMLHTTP" );
            }
            catch( error )
            {
                request = false;
            }
        }
    }
    return request;
};

Ajax.use = function( param, ajax_func, element )
{
    var object = Ajax.create();
    object.open( "POST", CONSTANT.GATEWAY, true );
    object.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
    object.setRequestHeader( "Content-length", param.length );
    object.setRequestHeader( "Connection", "close" );
    object.onreadystatechange = function()
    {
        if( this.readyState === 4 )
        {
            if( this.status === 200 )
            {
                ajax_func( this.responseText, element );
                return true;
            }
            else
            {
                Ajax.repeatUse( ajax_func, element );
                return false;
            }
        }
    };
    object.send( param );
    return true;
};

Ajax.repeatUse = function( param, ajax_func, element )
{
    var state = false,
        count = 1;
    while( state === false && count <= 5 )
    {
        state = Ajax.use( param, ajax_func, element );
        if( count !== 1 )
        {
            alert( 'Ajax Object Use Failed ');
        }
        count++;
    }
    return state;
};
2012-04-03 20:24
by NoName


1

Could you combine the element parameter in a closure? So you don't pass both responseText and element to the callback, instead you close over the element to a function beforehand, and then pass that in.

So your functions without passing element:

Ajax.use = function( param, ajax_func ) {
    ...
            if( this.status === 200 )
            {
                ajax_func( this.responseText );
                return true;
            }
            else
            {
                Ajax.repeatUse( param, ajax_func );
                return false;
            }
        }
    };
    ...
};

Ajax.repeatUse = function( param, ajax_func ) {
    ...
        state = Ajax.use( param, ajax_func );
    ...
};

And to use:

function createCallback (element, callback) {
    return function (responseText) {
        // Here you can use both element and responseText
        // What we do is call the 'original' callback,
        // with both element and responseText
        callback(responseText, element);
    };
}

var data = ajaxSerialize( this.form_element ) + '&ajax_type=ControlSignIn';

Ajax.repeatUse( data, createCallback (this.response_element, ajaxTypeRespond) );

You can close over as many parameters to your callback as you want by simply passing more parameters to createCallback().

2012-04-03 21:22
by Paul Grime
Ads