发送多个XMLHttpRequests时,只有最后一个请求返回成功

Question

我有一个动态创建(使用jQuery)用户输入框的页面.然后,用户可以在他创建的每个输入框中输入值.单击保存按钮时,将调用javascript函数,该函数遍历用户创建的所有输入框,并使用XMLHttpRequest将这些值发送到process.php文件,该文件将这些值插入到DB中.

如果我一次只发送一个请求,此代码可以正常工作.但是如果我循环它并在每次迭代时从每个框发送值(意味着,使用循环发送多个请求),只有最后一个请求找到成功.除最后一个呼叫之外的所有其他呼叫都被中止(使用firebug发现它).

知道为什么会这样吗？

我的代码:

<script>
function saveTimeSlots(){
    var ajaxRequest;
    try{
        ajaxRequest = new XMLHttpRequest();
    }
    catch(e){
        alert('Issue with browser.')
    }
    ajaxRequest.onreadystatechange = function(){
        if( ajaxRequest.readyState==4 ){
            alert(ajaxRequest.responseText); //This returns empty except for last call
        }
    }
    var timeSlots = document.getElementById('formSlots').childNodes;
    var date = $.datepicker.formatDate('dd-mm-yy', new  Date($('#datepicker').datepicker("getDate")));
    for(j=0; j<timeSlots.length; ++j){
        var time = timeSlots[j].getElementsByTagName("input")[0].value;
        var status = 1;
        var queryString = "?date=" + date + "&time=" + time + "&status=" + status;
        ajaxRequest.open("GET", "process.php" + queryString, true);
        ajaxRequest.send(null);
    }
}
</script>
<input type="button" value="Save time slots" class="custom-button" onclick="saveTimeSlots()"/>

以下是process.php的代码

<?php
mysql_connect( $dbhost,$user,$pwd );
mysql_select_db( $dbase ) or die( mysql_error() );

$date = mysql_real_escape_string( $_GET['date'] );
$time = mysql_real_escape_string( $_GET['time'] );
$status = mysql_real_escape_string( $_GET['status'] );

$query = "INSERT INTO time_slots (`date`,`time`,`status`) VALUES ('" . $date . "','" . $time . "'," . $status . ")";
echo $query;
if( mysql_query( $query ) ){
    echo "Success";
}else{
    echo mysql_error();
}
mysql_close();
}
?>

这就是Firebug所展示的:

GET http://localhost/process.php?date=24-06-2012&time=1&status=1 Aborted
GET http://localhost/process.php?date=24-06-2012&time=2&status=1 Aborted            
GET http://localhost/process.php?date=24-06-2012&time=3&status=1 200 OK 31ms

Answer 1

您不能将实例XMLHttpRequest用于多个请求.为每个请求创建一个新实例.

由于您已经在使用jQuery,我建议使用$.ajax(或$.get)来获取请求.

function saveTimeSlots(){
    $('#formSlots').children().each(function() {
        var time = $(this).find('input:first').val();
        var status = 1;
        var queryString = "?date=" + date + "&time=" + time + "&status=" + status;
        $.get("process.php" + querystring, function(responseText) {
            alert(responseText);
        });
    });
}

Answer 2

您正在XMLHttpRequest为所有请求使用相同的对象,因此一旦您启动请求,下一个请求就会启动另一个请求,该请求将中止上一个请求.

XMLHttpRequest为每个请求创建一个新对象,或者只使用jQuery的ajax.拥有jQuery并不使用它并不好.