Ajax-Anforderungen in einer Schleife - Div nach jeder Anforderung aktualisieren funktioniert nicht im IE8

Question

Ich habe eine Schleife, in der ich Ajax Xmlhttp-Anforderungen mache. Dies geschieht innerhalb einer Funktion, die durch ein window.onload-Ereignis ausgelöst wird.

Die Ajax-Aufrufe werden mit async=false durchgeführt, weil sie in einer bestimmten Reihenfolge erfolgen müssen, die darauf beruht, dass jeder Schritt abgeschlossen ist, bevor der nächste erfolgen kann.

Mit jeder weiteren Anfrage in der Schleife aktualisiere ich ein Div mit dem xmlhttp.responseText.

Firefox wird zwischen den Aufrufen wie gewünscht aktualisiert.

Der IE ist es nicht. Wenn die Schleife beginnt, wird das Div mit dem Inhalt vor der Schleife gefüllt. Wenn die Schleife endet, wird das Div mit der ersten Aktualisierung außerhalb der Schleife gefüllt.

Kann mir bitte jemand helfen?

Zwei Lösungsversuche: 1. Hinzufügen einer zufälligen Zeichenfolge am Ende des GET-Abfrage-Strings, um eine eindeutige URL zu gewährleisten 2. Übermittlung mit der POST-Methode

Kein Glück mit beiden.

Danke.

Code...

<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 wird nicht empfohlen [dritter Parameter in xmlhttp.open("GET",url,false);], und wir sollten die Funktion onreadystatechange nicht schreiben, wenn wir async=false verwenden [Außerdem tun Sie nichts in dieser Funktion]. Bitte lesen Sie http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

Hier ist der gute Weg, die Sammlung / Vorbereitung alle HTML einmal und aktualisieren Sie Ihre "barber_pole" div wie folgt.

<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>

in der Datei 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;