JS Callbacks, Less is Sometimes More

While working on an assignment related to jQuery and Ajax functions, I was required to implement a number of functions to be called depending on whether or not the Ajax call was successful or failed. I knew that the basic jQuery function looked something like this:

$.ajax({
  method: "POST",
  url: "http://api.somesite.com/",
  data: { name: "Michael", location: "Simon" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });

or, the “done” could be included in the body of the Ajax JSON (where “success” replaces done”) like:

$.ajax({
  method: "POST",
  url: "http://api.somesite.com/",
  data: { name: "Michael", location: "Simon" },
  success: ___________
  });

But in the above example, I struggled with the syntax as to what parameters/arguments to include as part of my callback function and within $.ajax() for success (if any).

I learned that when a jQuery Ajax call is performed, it is returned with 3 pieces of information (“arguments”). The “data” argument receives the entire response from the server (e.g. in JSON format), a “textStatus” argument receives a string indicating the status of the Ajax call, and the “jqXHR” argument (which is a jQuery wrapper on the XMLHttpRequest that is provided by the browser’s native JS, includes the response header and body). Consequently, I thought if I had created a function called handleSuccess with the three parameters:

var handleSuccess = function (data, textStatus, jqXHR) {
  console.log("Status: " + textStatus)
}

I would need to pass in the three arguments in my $.ajax() as well like so:

$.ajax({
...
  success: handleSuccess(data, textStatus, jqXHR),
...
  });

After a number of hours reviewing a number of references (see below) and trying adding/removing arguments and parameters, I came to understand that all I really needed in my $.ajax() request’s success parameter was the name name of the function to be called (handleSuccess) without including any parentheses or passing in the arguments. In doing so, if the Ajax call was a success, my indication to utilize the handleSuccess function would essentially substitute the actual function within the AJAX call, in essence looking like this:

$.ajax({
  method: "POST",
  url: "http://api.somesite.com/",
  data: { name: "Michael", location: "Simon" },
  success: function (data, textStatus, jqXHR) {
    console.log("Status: " + textStatus)
  }
...
  });

As a result, there was no need for me to include the list of arguments in the body of the $.ajax() call. It is essentially done for me. Similarly given a handleError function, calling it to respond to an error within the $.ajax() call would work the same way.

var handleError = function (data, textStatus, jqXHR) {
  console.log("Error: " + textStatus)
}
$.ajax({
  method: "POST",
  url: "http://api.somesite.com/",
  data: { name: "Michael", location: "Simon" },
  success: handleSuccess
  error: function (data, textStatus, jqXHR) {
    console.log("Error: " + textStatus)
  }
  });

By implementing using these success/error functions in this way, you would also be able to reuse as callbacks within other Javascript calls as needed, reducing potential for repetition. Now in some cases, your call to your callback may include arguments, but when you think about a callback, try thinking about the name of the function you are calling, being replaced by the actual function itself.

Resources: jQuery.ajax() , XMLHttpRequest , Getting Started With jQuery – Advanced Ajax jqXHR and Events, Understand JavaScript Callback Functions and Use Them, JavaScript Callbacks Explained Using Minions

About the author

Leave a Reply

Your email address will not be published. Required fields are marked *

About This Blog

This blog will serve as my outlet to share my thoughts and learnings as I dedicate myself to becoming a full-stack web developer...something too long in the making.

What I’ve Been Learning

+ Ruby
+ Ruby on Rails
+ HTML/CSS
+ JavaScript
+ jQuery
+ AngularJS

Archive