jQuery:允许连续的Ajax请求？

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>"); 
        }               }       
      });
    }
  });
});

其他$ .ajax请求中的$ .ajax请求是否有效？

Answer 1

原则上可以工作,但你的语法是错误的.你要:

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

并改变:

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

至:

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

您上面所做的是将jquery对象分配给(匿名对象的)成功和错误属性.那不行.您需要分配一个进行jquery调用的函数.也改变:

data: "name=" + name,

至

data: {
  name: name
},

否则它是一个接一个的ajax请求.

您通常需要注意的是尝试同时执行太多的Ajax请求,因为浏览器对一个域的请求数量(通常相当低)限制(例如,IE,至少某些版本,限制为2).在您的情况下,请求是连续的,并且一个成功处理程序没有什么特别的,它阻止了另一个请求.

您可能希望将其中的一部分包装到命名函数中,以使代码更具可读性.

Answer 2

以可读的方式组织您的代码.这将有助于您在开发过程中大大提高.通过像下面这样拆分你可以更容易地测试,因为你可以从firebug中调用东西.随着事情变得越来越复杂,它也变得更加容易.

函数名称是对其实际行为的随机猜测.

$(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>"); 
        }
    }); 
}