jQuery script supposed to run async but works only sync? why?

Question

I have this small jquery script that does not work if I remove the 'async:false' part... And I don't understand why (the alert() part is there just to check if it works or not). My guess was it would work asynchronously but it just doesn't. Can somebody explain to me why? And what should I change to make it async?

$(document).ready(function(){
    var artistName = new Array();
    var artistPlaycount = new Array();

    $('#inputForm').submit(function(){
        var userName = $('#username').attr('value'); 
        var amount = $('#amount').attr('value');

        userName = "someUsername"; 

        $.ajax({  
            type: "POST",  
            url:  "prepXML.php",  
            data: "method=getartists&user="+userName+"&amount="+amount,  
            dataType: "xml",
            async:false,
            success: function(xml){ 
                var i = 0;  
                $("artist",xml).each(function(){
                    artistName[i] = $(this).find("name").text();
                    artistPlaycount[i] = $(this).find("playcount").text();
                    i++;
                });
            }
        });         
    }); 

    alert(artistName[2]); //or any other iteration number
});

thank you

Answer 1

To do this asynchronously you need to move the alert into the callback and remove the async option, like this:

    $.ajax({  
        type: "POST",  
        url:  "prepXML.php",  
        data: "method=getartists&user="+userName+"&amount="+amount,  
        dataType: "xml",
        success: function(xml){ 
            $("artist",xml).each(function(i){
                artistName[i] = $(this).find("name").text();
                artistPlaycount[i] = $(this).find("playcount").text();
            });
            alert(artistName[2]);
        }
    }); 

Otherwise that success function populating the array happens after the alert does...so what you want isn't quite there yet. Not until the request comes back from the server does the success handler execute.

Also, the first parameter to the .each() callback is the index, you can use it, no need to keep your own incrementing variable :)

Answer 2

It doesn't work because the callback is fired after the alert. Put the alert in the callback.

Answer 3

you need to move the alert into your success handler.

alert(artistName[2]); //or any other iteration number

should go right after you loop through the xml.

so you should have:

success: function(xml){ 
            var i = 0;  
            $("artist",xml).each(function(){
                artistName[i] = $(this).find("name").text();
                artistPlaycount[i] = $(this).find("playcount").text();
                i++;
            });
            alert(artistName[2]); //or any other iteration number
        }