What is AJAX best practice?

Question

I am trying to learn javascript best practices and I am a bit confused. I have red that best ajax practice is:

function doSomething(arg1, arg2) {  
    jQuery.ajax({
        var urlink = resourceURL
        url: urlink,
        cache: false,
        data : "testData"+arg1,
        type: "POST"
    }).done(function(data) {
        var obj = jQuery.parseJSON(data);

        updateHtml1(obj);
        updateHtml2(obj);
    });
}

and not this way:

function getSomething(arg1, arg2) { 
    jQuery.ajax({
        var urlink = resourceURL
        url: urlink,
        cache: false,
        data : "testData"+arg1,
        type: "POST",
        success: function(data) {
            var obj = jQuery.parseJSON(data);

            updateHtml1(obj);
            updateHtml2(obj);
        }
    });
}

I am asking which practice is best and why?

http://stackoverflow.com/questions/8840257/jquery-ajax-handling-continue-responses-success-vs-done — R3tep, Feb 10 '15 at 12:08
The self-invoking function in the first example (and the question itself) doesn't make a lot of sense. — Ram, Feb 10 '15 at 12:10
The first one is preferred. `$.ajax` returns a promise object. You can store the returned the value in a variable and call all the promise methods on it. It also makes your code more readable/maintainable. — Ram, Feb 10 '15 at 12:20
You may also be interested in reading: https://code.tutsplus.com/tutorials/24-best-practices-for-ajax-implementations--net-9180 — carloswm85, Sep 27 '22 at 16:48

Guffa · Accepted Answer · 2015-02-10T12:24:41.970

Either way is fine, it's just a difference in using the success callback or a promise, and in this case there is no difference. If you would want to return the result from the function doSomething then you would use the first method so that you can return the promise, as the done method then can be bound outside the function.

Both examples are overly complicated, and the var urlink = resourceURL is placed inside an object literal, so neither would actually work. You should also specify the dataType in the call, then the data will be parsed automatically.

In the first example you don't need an extra function wrapper.

function doSomething(arg1, arg2) {  
  jQuery.ajax({
    url: resourceURL,
    cache: false,
    data : "testData"+arg1,
    type: "POST",
    dataType: "json"
  }).done(function(data) {
    updateHtml1(data);
    updateHtml2(data);
  });
}

And the second should be:

function getSomething(arg1, arg2) { 
  jQuery.ajax({
    url: resourceURL,
    cache: false,
    data : "testData"+arg1,
    type: "POST",
    dataType: "json",
    success: function(data) {
      updateHtml1(data);
      updateHtml2(data);
    }
  });
}

Although both are supported, the `jqXHR.success()` method has been deprecated — checking for the `.done()` promise would be the better way. — Terry, Feb 10 '15 at 12:40
@Terry: There `jqXHR.success` method isn't used in either of the examples. — Guffa, Feb 10 '15 at 13:04

What is AJAX best practice?

1 Answers1