jQuery: consecutive Ajax requests allowed?

Question

$(document).ready(function() {
  $("#firstTimeSubmit").click(function(event) {
    event.preventDefault();
    var name = $("#firstTimeText").val();
    if (name == "" || name.length > 12) {
      $("#updates").html("<b>Dummy! Invalid name!</b>");
    } else {
      $.ajax({
        type: "GET",
        url: "http://hiscore.runescape.com/index_lite.ws?player=" + name,
        success: function() {     
          $.ajax({
            type: "POST",
            url: "includes/handlers/firsttime.php",
            data: { name: name },
            success: function() {
              $("#updates").html("<b>Now tracking: " + name + "</b>");
            },
            error: function() {
              $("#updates").html("<b>Already being tracked.</b>");
            }
          }); 
        },
        error: function() {
          $("#updates").html("<b>Name doesn't exist.</b>"); 
        }      }  
      });
    }
  });
});

Should the $.ajax request inside the other $.ajax request work?

Answer 1

In principle that can work but your syntax is wrong. You want:

success: function() {
  $.ajax({...});
}

and change:

error: $("#updates").html("<b>Name doesn't exist.</b>");

to:

error: function() {
  $("#updates").html("<b>Name doesn't exist.</b>");
}

What you've done above is assign a jquery object to the success and error attributes (of the anonymous object). That won't work. You need to assign a function that makes those jquery calls. Also change:

data: "name=" + name,

to

data: {
  name: name
},

Otherwise it's one ajax request after another.

What you normally have to watch out for is trying to do too many simultaneous Ajax requests as browsers have (typically fairly low) limits on the number of requests to one domain (eg IE, at least certain versions, has a limit of 2). In your case the requests are consecutive and the success handler for one has nothing special about it preventing another request.

You might want to wrap some of that into a named function just to make the code more readable however.

Answer 2

Organize your code in a read able way. This will help you out greatly while developing. By splitting things up like below you will be able to test things out much easier because you can call things from firebug. It also makes it much easier as thing get more complex as they always do.

Function names are random guesses on what its really doing.

$(document).ready(function() {
    $("#firstTimeSubmit").click(function(event) {
        event.preventDefault();
        var name = $("#firstTimeText").val();
        if(name == "" || name.length > 12) {
         $("#updates").html("<b>Dummy! Invalid name!</b>");
        } else {
            getHighScore(name);
        }
    });     
});

function getHighScore(name){
    $.ajax({
     type: "GET",
     url: "http://hiscore.runescape.com/index_lite.ws?player=" + name,
     success: function() {
      setUpFirsttime(name);
     },
     error: function() {
      $("#updates").html("<b>Name doesn't exist.</b>"); 
     }
    });
}
function setUpFirsttime(name){
    $.ajax({
     type: "POST",
     url: "includes/handlers/firsttime.php",
     data: { name: name },
     success: function(){
      $("#updates").html("<b>Now tracking: " + name + "</b>");
     },
     error: function(){
      $("#updates").html("<b>Already being tracked.</b>"); 
     }
    }); 
}