CODEWITHSUNDEEP
javascriptjqueryajax
patrykf
patrykf

Reputation: 449

What is AJAX best practice?

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?

Upvotes: 2

Views: 3820

Answers (1)

Guffa
Guffa

Reputation: 700342

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);
    }
  });
}

Upvotes: 3

Related Questions