Refactoring many jQuery Ajax calls - best practice?

Question

I have many blocks of JavaScript / jQuery code to handle asynchronous data processing on my page. Each code block has three functions (the code is incomplete and for illustrative purposes only):

• encapsulates a call to $.ajax :

   function doSomething(data){ // do some preprocessing $.ajax({}); // some JQuery Ajax operation that accepts data // do some postprocessing return false; } 

• processes the answer:

   function handleResponse(result){ // process the result return false; } 

• handles any error:

   function handleError(XMLHttpRequest, textStatus, errorThrown){ // gracefully handle the Error and present relevant information to user return false; } 

On a page that requires a lot of data processing, I get a lot of these blocks that seem to duplicate, so I decided to do some refactoring.

I believe that there will be different ways.

• You can use one error handler, which can be reused through Ajax calls (obviously).
• Some response handlers could be reused, but this would be inconvenient, since the responses vary greatly depending on the call.
• Perhaps some prototype object is being created that provides basic functions and has a static error handling method (can this be done in JavaScript?).

I am just wondering if anyone has met this and / or if there is a solution for best practice for this?

Answer 1

You can use the $ .ajaxSetup ({}) method in jQuery to configure some general ajax settings.

For example, if you are going to post on the same URL over and over on any page, you can simply set this to ajaxSetup. This would mean that you would have to pass less parameters to the function, for example, as Richard did. Any property of the first parameter of the ajax method can be set as the default value in $ .ajaxSetup ().

 $.ajaxSetup({ url: 'my/ajax/url' success: function() { // Do some default stuff on success }, error: function() { // Do some default stuff on a failure } // etc... }); 

They can be overridden by any ajax call. So now you can just do:

 $.ajax({data:{foo:'bar',bar:'foo'}}); 

And you can redefine the url like:

 $.ajax({url:'different/ajax/url',data:{foo:'bar',bar:'foo'}}); 

Answer 2

We often used the wrapper function to call Ajax to make it easier to use so you can do this:

 function NewAjax(url, data, success) { $.ajax({ url: url, data: data, success: success, fail: function () { // Do generic failure handling here } } 

But I often prefer to bind to every ajax event using jQuery ajax events:

http://docs.jquery.com/Ajax

so that you can attach to every failure or success of every ajax call, for example:

ajaxError (callback) ajaxSuccess (callback)

Answer 3

As Richard shows, look at what is different between the code snippets and pass them as parameters to the function. Javascript can pass functions around as parameters that can get rid of a lot of redundancy.

If the URL has not changed yet, then why pass it as a parameter, you can have a global variable that will contain the main part of the URL, and just pass the part of the changing URL.