여러 XMLHttpRequests를 보낼 때 마지막 요청 만 성공을 반환합니다.

Question

동적으로 (jQuery를 사용하여) 입력 상자를 만드는 페이지가 있습니다. 그런 다음 사용자는 그가 작성한 각 입력 상자에 값을 입력 할 수 있습니다. 저장 버튼을 클릭하면 사용자가 생성 한 모든 입력 상자를 반복하는 javascript 함수가 호출되고 XMLHttpRequest를 사용하여이 값을 process.php 파일에 보내 DB에이 값을 삽입합니다.

이 코드는 한 번에 하나의 요청 만 보내는 경우 제대로 작동합니다. 하지만 루프를 반복하여 각 반복마다 각 상자의 값을 전송하면 (즉, 루프를 사용하여 여러 요청을 보냅니다.) 마지막 요청 만 성공을 찾습니다. 마지막 호출을 제외한 다른 모든 호출은 중단됩니다 (파이어 버그를 사용하여 호출 됨).

왜 이런 생각입니까?

내 코드 :

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의 인스턴스를 사용할 수 없습니다

<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()"/> 

는 다음이 방화범 보여줍니다 무엇

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

process.php의 코드 하나 이상의 요청. 각 요청에 대해 새 인스턴스를 만듭니다.

이미 jQuery를 사용하고 있으므로 $.ajax (또는 $.get)을 사용하여 요청을 가져 오는 것이 좋습니다. 당신은 모든 요청에 ​​대해 동일한 XMLHttpRequest 객체를 사용하는

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 개체를 새로 만들거나 jQuery's ajax을 사용하면됩니다. jQuery를 사용하지 않는 것이 좋지 않습니다.