Extra Data in jQuery AJAX Requests

Sometimes it’s necessary to bind some additional data to an AJAX request, data that is not sent over the wire but has to pop up in the callback.
For instance:

var dataStreams = [];
dataStreams.push( { 'id': 'A04AC', 'data': 'Hello World' } );
dataStreams.push( { 'id': 'AVM32', 'data': 'Easy does it!' } );
dataStreams.push( { 'id': 'VXI34', 'data': 'Requesting backup...' } );

jQuery.each( dataStreams, function( i, e ) {
    jQuery.post( 'https://out.local/process.rpc', e.data,
        function( data ) {
            /* data from server */
            /* but how do I access the original request object? */
        }
    );
} );

The original object can be passed via the XHR object which is an argument to the AJAX callback. The jQuery.post call returns the XHR object which can then be accessed in the callback.
This works for all jQuery AJAX functions.

jQuery.each( dataStreams, function( i, e ) {
    jQuery.post( 'https://out.local/process.rpc', e.data,
        function( data, success, xhr ) {
            /* data from server */
            /* xhr._extra = [ i, e ] the original request object can be accessed here (e.data, e.id) */
        }
    )._extra = [ i, e ]; /* it's an object, yay JavaScript! */
} );

There you go, just make sure the _extra object property name does not collide with any of the existing XHR properties (and prototypes).

Published 13 years ago by soulseekah with no comments tagged ajax, jquery, xhr in JavaScript

ajax jquery xhr JavaScript