How to extend jQuery's AJAX function

Question

I've played around with creating my own jquery functions, this done via the

$.fn.extend({
    myFunc: function () {

    }
});

However, after scouring the web and SO for an answer, I would like to ask:

How can I extend $.ajax()

The new implementation of $.ajax can be used by running

$.ajax({

}).done(function (e) {

}).fail(function (e) {

});

What I would like to do is to add a .progress() so that I don't always have to write

$.ajax({
    url: path,
    xhrFields: {
        onprogress: function (e) {
            if (e.lengthComputable) {
                console.log(e.loaded /e.total * 100 + '%');
            }
        }
    }
});

each time I want to monitor the progress. e.g.

$.ajax({
    url: '/somewhereorother',
    type: 'post',
    dataType: 'json'
}).progress(function (e) {
    updateProgressBar(e.percentage + '%');
}).done(function (e) {

}).fail(function (e) {

});

jQuery already has [deferred.progress()](http://api.jquery.com/deferred.progress/) ? — adeneo, Mar 27 '14 at 17:34
Okay, will it work in the context that I described above. What about for future reference for other purposes — Luke Madhanga, Mar 27 '14 at 17:36
Have a look at this http://stackoverflow.com/questions/8798878/jquery-extend-existing-function — Jay Blanchard, Mar 27 '14 at 17:38

eithed · Answer 1 · 2014-03-27T18:05:48.153

$.ajax is a function attached to $ object.

As such, to extend it you would have to store the reference to it somewhere, and call it when needed, something like:

var ajax = $.ajax;
$.ajax = function()
{
     if (!arguments[0].success)
     arguments[0].success = function()
     {
          window.alert('done!');
     }

     ajax.apply(ajax, arguments);
}

This is a concept (I'm not sure of this scope in apply - would have to actually run it) ;) Also, I'd say it's ugly as hell way of doing things.

If you want your $.ajax function to differ from official function, I'd still separate it. Either via $.my_ajax or by separate namespace (take a look at http://api.jquery.com/jquery.sub/)

How to extend jQuery's AJAX function

1 Answers1