AJAX請求 - 添加額外的GET請求內部循環

Question

我在頂部有一個按鈕，顯示一個模式窗口來啓動一個VOIP呼叫 - 最終的目的是讓它呼叫列表中的第一個數字，然後是第二個號碼等。我有它的工作原理，它顯示模式窗口，並允許我發起呼叫列表中的第一個號碼。

我現在需要更新腳本，以便如果調用成功，它會在循環中發出另一個AJAX請求，每5秒檢查一次調用的狀態。如果第一次調用成功，將返回的我存儲在httpResponseText變量如下：

Authentication accepted<br/>ActionID = Jo9oACY52cp1 

我需要解析出ActionID值 - 在上面的例子中，這將是Jo9oACY52cp1 - 然後有另一GET請求通過傳遞ActionID來得到當前呼叫的狀態如下：

https://www.acme.com/GetStatus.php?ActionID=$action_id 

該請求將返回3個值 - ActionID，UID，狀態 - 就像這樣：

xshsJ6Y2eLDC,1500806656.160,ANSWER 

我只對第三個值 - STATUS感興趣 - 我需要不斷檢查此請求的結果，直到狀態不等於IN_PROGRESS。此時我可以啓用Next Call按鈕並重新開始。

這是我當前的表和腳本：

$("#startBulkContactCall").click(function() { 
 
    $(this).attr('selectedRow', '1'); 
 
    contactMobile = $($($('table > tbody > tr:nth-child(1) > td:nth-child(2)').children())[0]).attr('contactMobile'); 
 
    contactName = $($($('table > tbody > tr:nth-child(1) > td:nth-child(2)').children())[0]).attr('contactName'); 
 
    $('#callNextBulkContact').prop('disabled', true); 
 
    firstURL = "<?php echo $callBackURL ;?>" + defaultCallBackNumber + "<?php echo $contactCallBack ;?>" + contactMobile; 
 
    console.log('firstURL: ' + firstURL); 
 
    $.ajax({ 
 
     url: "<?php echo $callBackURL ;?>" + defaultCallBackNumber + "<?php echo $contactCallBack ;?>" + contactMobile, 
 
     data: {}, 
 
     type: "GET" 
 
    }) 
 
    .then(function(data, status, xhr) { 
 
     var httpStatus = status; 
 
     var httpResponseCode = (xhr.status); 
 
     var httpResponseText = (xhr.responseText); 
 
     $('#ajaxSuccessBulk').html('Call in Progress').show(); 
 
     $("#startBulkContactCall").prop("disabled", true); 
 
     $("#callNextBulkContact").prop("disabled", true); 
 
    }) 
 
    .fail(function(xhr) { 
 
     var httpStatus = (xhr.status); 
 
     var httpResponseCode = (xhr.getAllResponseHeaders); 
 
     var httpResponseText = (xhr.responseText); 
 
     var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText; 
 
     //make alert visible 
 
     $('#ajaxError').html(ajaxError).show(); 
 
    }) 
 
}); 
 

 
$('#callNextBulkContact').click(function() { 
 
    $('#callBulkContact').attr('selectedRow', parseInt($('#callBulkContact').attr('selectedRow')) + 1); 
 
    var rowNum = parseInt($('#callBulkContact').attr('selectedRow')); 
 
    var row = 'table > tbody > tr:nth-child(' + rowNum + ') > td:nth-child(2)'; 
 
    contactMobile = $($($(row).children())[0]).attr('contactMobile'); 
 
    contactName = $($($(row).children())[0]).attr('contactName'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<button type="button" id="bulkCallButton" class="btn btn-default"><span class="glyphicon glyphicon-phone"></span> Bulk Call</button> 
 

 

 
<table class="table table2 table-striped table-bordered" width="100%"> 
 
    <thead> 
 
    <th scope="col">Name</th> 
 
    <th scope="col">Mobile</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="D8F49748-212A-42D8-A188-4C23556027FA"> 
 
     <td><a href="details.php?action=contactLink&contactID=D8F49748-212A-42D8-A188-4C23556027FA">John Citizen</a></td> 
 
     <td><a href="#" contactName="John Citizen" contactMobile="0412345678" data-toggle="modal" data-rec-id="1537" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0412 345 678</a></td> 
 
    </tr> 
 
    <tr id="EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7"> 
 
     <td><a href="details.php?action=contactLink&contactID=EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7">Jonah McMahon</a></td> 
 
     <td><a href="#" contactName="Jonah McMahon" contactMobile="0490876543" data-toggle="modal" data-rec-id="1538" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0490 876 543</a></td> 
 
    </tr> 
 
    <tr id="D9AA7744-E138-4A0E-86A2-B8D0CD2007D6"> 
 
     <td><a href="details.php?action=contactLink&contactID=D9AA7744-E138-4A0E-86A2-B8D0CD2007D6">Jake Simpson</a></td> 
 
     <td><a href="#" contactName="Jake Simpson" contactMobile="0405999666" data-toggle="modal" data-rec-id="1577" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0405 999 666</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 
<div class="modal" id="contactBulkCallModal"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
 
     <h4 class="modal-title">Call Contact</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Calling </p> 
 
     </div> 
 
     <div id="ajaxError" class="alert alert-danger text-center" role="alert" style="display:none"> 
 
     Error Response 
 
     </div> 
 
     <div id="ajaxSuccess" class="alert alert-success text-center" role="alert" style="display:none"> 
 
     Call in Progress 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" id="startBulkContactCall" class="btn btn-success">Start Call</button> 
 
     <button type="button" id="callNextBulkContact" class="btn btn-success">Next</button> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

從來沒有做這樣一個複雜的Ajax請求（至少對我來說），而不是知道從哪裏開始添加額外的要求循環？

Answer 1

下面是我要做的事情：首先在函數中分開代碼，它會使事情更容易遵循。

startCall應該發起你的調用，它接收到ajax應該使用的callURL。它返回一個一旦完成就會解決的承諾。

monitorCall需要一個callID和一個回調函數（第三個參數「failed_tries」在內部使用）。它會使用ajax觸發狀態檢查，每5秒調用一次，直到連續5次失敗發生，或者直到我們獲得正確的狀態。回調是一個通常的JS回調，其錯誤和結果作爲參數。

getMonitoredCall將把前兩個函數結合在一起給出一個承諾，一旦通話結束就會解析。

getNewCallUrl用於提供另一個呼叫。該功能將在每次通話前被調用，以檢索要呼叫的人。你在那裏有工作！它應該返回一個承諾，將URL作爲結果。

最後，loopCalls啓動所有事情，一旦呼叫完成，將自動再次調用自己，以便在下一次呼叫時進行跟蹤，直到出現故障。

function startCall(callURL){ 
    return $.ajax({ 
     url: callURL, 
     data: {}, 
     type: "GET" 
    }).then(function(data, status, xhr) { 
     var httpStatus = status; 
     var httpResponseCode = (xhr.status); 
     var httpResponseText = (xhr.responseText); 
     $('#ajaxSuccessBulk').html('Call in Progress').show(); 
     $("#startBulkContactCall").prop("disabled", true); 
     $("#callNextBulkContact").prop("disabled", true); 

     return Promise.resolve(xhr.responseText.match(/ActionID = (.+)/)[1]); 
    }) 
    .fail(function(xhr) { 
     var httpStatus = (xhr.status); 
     var httpResponseCode = (xhr.getAllResponseHeaders); 
     var httpResponseText = (xhr.responseText); 
     var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText; 
     //make alert visible 
     $('#ajaxError').html(ajaxError).show(); 
    }); 
} 
function monitorCall(callID,callback,failed_tries){ 
    failed_tries = failed_tries || 0; 
    $.ajax({ 
     url: 'https://www.acme.com/GetStatus.php', 
     data: {ActionID:callID}, 
     type: "GET" 
    }).then(function(data){ 
     if(data && data.split(',')[2] != "IN_PROGRESS"){ 
      callback(null,data); 
     }else{ 
      setTimeout(monitorCall.bind(null,callID,callback,0),5000); 
     } 
    }).fail(function(xhr){ 
     failed_tries++; 
     if(failed_tries>5){ 
      callback("Error trying to get the status, stopping after 5 consecutive tries."); 
     }else{ 
      setTimeout(monitorCall.bind(null,callID,callback,failed_tries),5000); 
     } 
    }); 
} 

function getMonitoredCall(callUrl){ 
    return new Promise(function(resolve,reject){ 
     startCall(callUrl).then(function(callID){ 
      monitorCall(callID,function(err,res){ 
       if(err){ 
        reject(err); 
       }else{ 
        resolve(res); 
       } 
      }); 
     }); 
    }); 
} 

function getNewCallUrl(){ 
    return $.ajax({ 
     url: "http://getNewCallUrl/", 
     data: {}, 
     type: "GET" 
    }).then(function(data, status, xhr) { 
     //Let's presume the request simply returns a call URL. 
     return Promise.resolve(data); 
    }) 
    .fail(function(xhr) { 
     var httpStatus = (xhr.status); 
     var httpResponseCode = (xhr.getAllResponseHeaders); 
     var httpResponseText = (xhr.responseText); 
     var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText; 
     //make alert visible 
     $('#ajaxError').html(ajaxError).show(); 
    }); 
} 

function loopCalls(){ 
    getNewCallUrl().then(function(callUrl){ 
     return getMonitoredCall(callUrl); 
    }).then(function(){setTimeout(loopCalls,5000)}); 
} 
loopCalls();