Ajax call is aborting previous call

jbrown1028 · 11-28-2011, 08:52 PM

I am having a small issues that I cannot figure out. I am basically trying to call the same page using a query string through the URL. Basically what I am trying to do is start on step 1, once that is done, move on to step 2, step 3, so on. What is happening is the step 1 - 6 will give this

GET http://securelivetest.com/custom/tes...p?action=step1 Aborted
GET http://securelivetest.com/custom/tes...p?action=step2 Aborted
GET http://securelivetest.com/custom/tes...p?action=step3 Aborted
GET http://securelivetest.com/custom/tes...p?action=step4 Aborted
GET http://securelivetest.com/custom/tes...p?action=step5 Aborted
GET http://securelivetest.com/custom/tes...p?action=step6 Aborted
GET http://securelivetest.com/custom/tes...p?action=step7 200 OK

The code is attached, any assistance would be greatly appreciated.

Thank you,
Jeff Brown

Code:

<?php
    $loadsystem = isset($_GET['action']) ? $_GET['action'] : "step1";
    if ($loadsystem == "step4"){echo "step 4";}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title> New Document </title>
        <script language="javascript" type="text/javascript">
            var ajaxObj = createXMLHttp();
            var Params = new Array('step1', 'step2', 'step3', 'step4', 'step5', 'step6', 'step7');
            for(var steps=0, len=Params.length; value=Params[steps], steps<len; steps++) {
                var url = 'ajax.php?action='+value;
                ajaxObj.open("GET", url, true);
                ajaxObj.onreadystatechange = handleAjaxResponse;
                ajaxObj.send(null);
            }

            function createXMLHttp() {
                if (typeof XMLHttpRequest != 'undefined')
                    return new XMLHttpRequest();
                else if (window.ActiveXObject) {
                    var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp","MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.5.0"];
                    for (var i = avers.length -1; i >= 0; i--) {
                        try {
                            httpObj = new ActiveXObject(avers[i]);
                            return httpObj;
                        } catch(e) {}
                    }
                }
                throw new Error('XMLHttp (AJAX) not supported');
            }

            function handleAjaxResponse(){
                if(ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                    alert("handleAjaxResponse() called with ready state of " + ajaxObj.readyState);
                    var getVal = ajaxObj.responseText;
                    document.getElementById("mydiv").innerHTML=getVal;
                } else {
                    return false;
                }
            }

        </script>
    </head>
    <body>

    <div id="mydiv">
<?php
    if ($loadsystem) {
        echo "action: ".$loadsystem;
    }
?>
    </div>
    </body>
</html>

devnull69 · 11-28-2011, 10:09 PM

Yes, this is because you are starting requests with the same XMLHttpRequest object 7 times in a row ... without waiting for any of the single requests to finish before you create the next one.

The problem is the for loop. If you want to wait for step1 before you go to step2 etc you may only start a new request from inside the callback "handleAjaxResponse" with readyState==4 because this is "the place in your code" where the previous request has finished.