JQuery ajax callback function definition

Question

I want to use jQuery ajax to retrieve data from a server.

I want to put the success callback function definition outside the .ajax() block, as shown below. So, do I need to declare the variable dataFromServer as follows so that I can use the returned data from the success callback?

I saw how most people define success callbacks inside the .ajax() block. Is the following code correct if I want to define a success callback outside?

 var dataFromServer; //declare the variable first function getData() { $.ajax({ url : 'example.com', type: 'GET', success : handleData(dataFromServer) }) } function handleData(data) { alert(data); //do some stuff } 

Answer 1

Just use:

 function getData() { $.ajax({ url : 'example.com', type: 'GET', success : handleData }) } 

The success property requires only a reference to a function and passes data as a parameter to this function.

You can access your handleData function like this because of the way the handleData path is handleData . JavaScript will parse your code to declare functions before running it, so you can use the function in the code that comes before the actual declaration. This is called hoisting .

This does not count for functions declared this way:

 var myfunction = function(){} 

Those are available only when the interpreter passed them.

See this question for more information on two ways to declare functions.

Answer 2

The "new" way to do this is because jQuery 1.5 (January 2011) is to use deferred objects instead of passing the success callback. You must return the result of $.ajax , and then use the methods .done , .fail , etc. to add callbacks outside the call to $.ajax .

 function getData() { return $.ajax({ url : 'example.com', type: 'GET' }); } function handleData(data /* , textStatus, jqXHR */ ) { alert(data); //do some stuff } getData().done(handleData); 

This separates callback processing from AJAX processing, allows you to add multiple callbacks, fail-safe callbacks, etc., without having to change the original getData() function. Separating AJAX functionality from a set of actions that need to be completed afterwards is good!

Deferrals can also greatly simplify the synchronization of several asynchronous events, which is not easy to do with success:

For example, I could add a few callbacks, an error handler, and wait for the timer to finish before continuing:

 // a trivial timer, just for demo purposes - // it resolves itself after 5 seconds var timer = $.Deferred(); setTimeout(timer.resolve, 5000); // add a done handler _and_ an `error:` handler, even though `getData` // didn't directly expose that functionality var ajax = getData().done(handleData).fail(error); $.when(timer, ajax).done(function() { // this won't be called until *both* the AJAX and the 5s timer have finished }); ajax.done(function(data) { // you can add additional callbacks too, even if the AJAX call // already finished }); 

Other parts of jQuery also use deferred objects — you can very easily synchronize jQuery animations with other async operations with them.

Answer 3

I do not know why you are defining a parameter outside the script. That is unnecessary. The callback function will be called with the return data as a parameter automatically. It is very possible to define your callback outside of sucess: ie

 function getData() { $.ajax({ url : 'example.com', type: 'GET', success : handleData }) } function handleData(data) { alert(data); //do some stuff } 

the handleData function is called and the ajax parameter is passed to it.

Answer 4

Try rewriting your success handler to:

 success : handleData 

The success property of the ajax method requires only a function reference.

In your handleData function, you can select up to 3 parameters:

 object data string textStatus jqXHR jqXHR 

Answer 5

I would write:

 var dataFromServer; //declare the variable first var handleData = function (data) { alert(data); //do some stuff } function getData() { $.ajax({ url : 'example.com', type: 'GET', success : handleData }) } 

Answer 6

after hours playing with him and almost getting boring. a miracle came to me, it works.

viewing the source of the page in the link below may help.

http://mintnet.net/cas242/final_project/ajax-global-variable-test.html

 <pre> var listname = []; $.ajax({ url : wedding, // change to your local url, this not work with absolute url success: function (data) { callback(data); } }); function callback(data) { $(data).find("a").attr("href", function (i, val) { if( val.match(/\.(jpe?g|png|gif)$/) ) { // $('#displayImage1').append( "<img src='" + wedding + val +"'>" ); listname.push(val); } }); } function myfunction() { alert (listname); } </pre> 

Answer 7

You do not need to declare a variable. Ajax success function automatically takes up to 3 parameters: Function( Object data, String textStatus, jqXHR jqXHR )