循环中的 Ajax 请求 - 每个请求在 IE8 中不起作用后刷新 div

Question

我有一个循环，我在其中发出 Ajax xmlhttp 请求。这发生在由 window.onload 事件触发的函数中。

Ajax 调用使用 async=false 进行，因为它们需要以特定顺序发生，该顺序依赖于每个步骤完成后才能发生下一个步骤。

对于循环中的每个连续请求，我将使用 xmlhttp.responseText 更新一个 div。

Firefox 会根据需要在两次调用之间进行刷新。

IE 不是。当循环开始时，div 会填充循环前的内容。当循环结束时，div 将填充循环外发生的第一次刷新。

有人可以帮忙吗？

两种尝试的解决方案： 1.在GET查询字符串末尾添加随机字符串，保证url唯一 2. POST方式提交

两者都没有运气。

谢谢。

代码...

<script type="text/javascript">
function order_process() {
    var err;
    var queue_id = "<?= implode(':',$plans[$_REQUEST['order_queue_id']]); ?>".split(':');               // Queue ID
    var queue_ax = "<?= implode(':',array_keys($plans[$_REQUEST['order_queue_id']])); ?>".split(':');   // Queue Action
    i = 0;
    for (step in queue_id) {

        // The DIV contents that display during each loop iteration
        document.getElementById("barber_pole").innerHTML='\
            <center>\
            <table style="align:left" border="0" cellpacing="1" cellpadding="1">\
                <tr><td><B>Processing Order</B><span style="float:right;">Step ' + (i + 1) + '/' + queue_id.length + '</span></td></tr>\
                <tr><td style="background-color:#FFFFFF;height:1.5px"></td></tr>\
                <tr><td height="20" style="text-align:center">' + queue_ax[i] + '...</td></tr>\
                <tr><td height="20"><IMG SRC="../../_include/images/barber_pole.gif" style="vertical-align: middle;"></td></tr>\
            </table>\
            </center>';

        xmlhttp = ajax_request(); // Create request object
        xmlhttp.onreadystatechange=function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                1;
            }
        }

        var url = '../../../api/order_process.php?api_login=' + "<?=$api_login?>" + '&api_pass=' + "<?=$api_pass?>" + "&order_id=<?= $_REQUEST['order_id']?>" + '&order_action_id=' + queue_id[step] + '&timeid=' + Math.random();
        xmlhttp.open("GET",url,false);
        xmlhttp.send();

        // If the response includes the string 'failed' exit the loop and render error error message
        if (xmlhttp.responseText.split(',')[0] == 'failed') {
            err = queue_ax[i] == 'Registering Domain'
                ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[domain_register][title]?>"      + "</h1><DIV class='landing-body'><?=$feedback[domain_register][body]?></DIV>"
                : queue_ax[i] == 'Provisioning cPanel Account'
                ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[cpanel_provision][title]?>"     + "</h1><DIV class='landing-body'><?=$feedback[cpanel_provision][body]?></DIV>"
                : queue_ax[i] == 'Credit Card Fraud Protection'
                ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[maxmind_minfraud][title]?>"     + "</h1><DIV class='landing-body'><?=$feedback[maxmind_minfraud][body]?>\"" + xmlhttp.responseText + '"</DIV>'
                : queue_ax[i] == 'Verifying Payment'
                ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[verify_payment][title]?>"       + "</h1><DIV class='landing-body'><?=$feedback[verify_payment][body]?>\""   + xmlhttp.responseText + '"</DIV>'
                : xmlhttp.responseText == 'failed,'
                ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[gen_err][title]?>"              + "</h1><DIV class='landing-body'><?=$feedback[gen_err][body]?></DIV>"
                : "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[gen_err][title]?>"              + "</h1><DIV class='landing-body'><?=$feedback[gen_err][body]?>\""          + xmlhttp.responseText + '"</DIV>';
            break;
        }
        i++;
    }

    if (err) {
        document.getElementById("landing-pres").innerHTML = err;
        Cufon.replace('.landing-title');
    } else {
        document.getElementById("barber_pole").innerHTML = "<?= $thank[$_REQUEST['order_queue_id']][1] ?>";
    }
}
window.onload=order_process;
</script>

Answer 1

不推荐使用async=false [xmlhttp.open("GET",url,false); 中的第三个参数]，如果我们使用async=false，我们不应该编写onreadystatechange函数[另外，你什么都不做那个功能]。请参考http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

这是一次收集/准备所有 HTML 并像这样更新您的“barber_pole”div 的好方法..

<script type="text/javascript">
function order_process()
{
  var err;
  var queue_ids  = "<?php echo implode(':',$plans[$_REQUEST['order_queue_id']]); ?>";                // Queue IDs separated by ':'
  var queue_axns = "<?php echo implode(':',array_keys($plans[$_REQUEST['order_queue_id']])); ?>";    // Queue Actions separated by ':'

  var xmlhttp = ajax_request(); // Create request object
  var url = '../../../api/order_process.php?api_login=' + "<?=$api_login?>" + '&api_pass=' + "<?=$api_pass?>" + "&order_id=<?= $_REQUEST['order_id']?>" + '&order_action_ids=' + encodeURIComponent(queue_ids)  + '&order_actions=' + encodeURIComponent(queue_axns) + '&timeid=' + Math.random();

  xmlhttp.onreadystatechange = function ()
  {
    if (xmlhttp.readyState == 4)
    {
      document.getElementById("barber_pole").innerHTML = xmlhttp.responseText;;
    }
    else
    {
      document.getElementById("barber_pole").innerHTML = "Processing..";
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}
window.onload=order_process;
</script>

在 order_process.php 文件中...

<?php

//Checking whether logged in or not blah blah..


$action_ids = $_REQUEST['order_action_ids'];
$order_actions = $_REQUEST['order_actions'];

$actions_ids_array = explode(":", $action_ids);
$order_actions_array = explode(":", $order_actions);

$strHTML = '';
for($cnt=0; $cnt < count($actions_ids_array); $cnt++ )
{
  $each_action_id = $actions_ids_array[$cnt];
  $each_action    = $order_actions[$cnt];

  //Process each action collect $fname and $status value and generate HTML

  //blah blah..

  $strHTML .= "<h1 class=\"landing-title\">" . $fname . $status .  "</h1>";
}

echo $strHTML;
exit;