obtaining jQuery $.load() ajax object

Question

As was demonstrated in the following link, jQuery's $.ajax call returns an ajax object that can later be used to abort the call if needed.

Abort Ajax requests using jQuery

My project is using $.load(), which returns the object pattern, rather than the ajax object ( $("").load() ).

Is there a way I can obtain the ajax object from $.load?

why can't you change to use $.ajax instead so you could use the same method? — momo, Sep 05 '11 at 05:27
I have a project that uses $.load() everywhere, changing $.load() to $.ajax() is not a great idea. It will be great if $.load() can somehow return jqXHR object to cancel the request. — Mumzee, Apr 06 '16 at 13:19

score 0 · Answer 1 · answered Sep 05 '11 at 04:41

I don't think you can do that with the current API. But, thanks to open source, take a look at the load function's source (from jquery-1.6.2.js):

jQuery.fn.extend({
load: function( url, params, callback ) {
    if ( typeof url !== "string" && _load ) {
        return _load.apply( this, arguments );

    // Don't do a request if no elements are being requested
    } else if ( !this.length ) {
        return this;
    }

    var off = url.indexOf( " " );
    if ( off >= 0 ) {
        var selector = url.slice( off, url.length );
        url = url.slice( 0, off );
    }

    // Default to a GET request
    var type = "GET";

    // If the second parameter was provided
    if ( params ) {
        // If it's a function
        if ( jQuery.isFunction( params ) ) {
            // We assume that it's the callback
            callback = params;
            params = undefined;

        // Otherwise, build a param string
        } else if ( typeof params === "object" ) {
            params = jQuery.param( params, jQuery.ajaxSettings.traditional );
            type = "POST";
        }
    }

    var self = this;

    // Request the remote document
    jQuery.ajax({
        url: url,
        type: type,
        dataType: "html",
        data: params,
        // Complete callback (responseText is used internally)
        complete: function( jqXHR, status, responseText ) {
            // Store the response as specified by the jqXHR object
            responseText = jqXHR.responseText;
            // If successful, inject the HTML into all the matched elements
            if ( jqXHR.isResolved() ) {
                // #4825: Get the actual response in case
                // a dataFilter is present in ajaxSettings
                jqXHR.done(function( r ) {
                    responseText = r;
                });
                // See if a selector was specified
                self.html( selector ?
                    // Create a dummy div to hold the results
                    jQuery("<div>")
                        // inject the contents of the document in, removing the scripts
                        // to avoid any 'Permission Denied' errors in IE
                        .append(responseText.replace(rscript, ""))

                        // Locate the specified elements
                        .find(selector) :

                    // If not, just inject the full result
                    responseText );
            }

            if ( callback ) {
                self.each( callback, [ responseText, status, jqXHR ] );
            }
        }
    });

    return this;
}
}

A slightly dangerous but workable solution would be to copy that source and change it so that it returns what the ajax call returns, instead of return this. It's dangerous because it may rely on internal jquery behavior, which could change without notice in a future version.

I would probably extend jQuery.fn with a new function with a different name, perhaps loadAjax

If you're using a different version of jquery, take it from there.

obtaining jQuery $.load() ajax object

1 Answers1