onreadystatechange results in php code executing twice

Question

In my onreadystatechange inline function in my Ajax code, I call window.location and pass a GET parameter to the new web page.

For some reason the php code on that new page executes twice in quick succession. I don't think that is correct behavior.

Here's the Ajax code, in javascript:

// this is called from the 'onclick()' handler of a normal (non-'submit') button
function findUserData()
{

 var user = document.getElementById('zer').value;
 var pwd = document.getElementById('pwd').value;

 var xmlhttp;

 if(window.XMLHttpRequest)
 {
    xmlhttp = new XMLHttpRequest();
 }
 else
 {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }

 var theResponseText = "rText";

 xmlhttp.onreadystatechange = function()
 {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        theResponseText = xmlhttp.responseText;
        alert("responseText is >>>" + theResponseText + "<<< that.");

        if( theResponseText == 'notfound')
        {
            alert("No data found with that user name/password.")
            //return;
        }
        else if( theResponseText == 'found')
        {
            alert("Data was found with that user name/password.")
            window.location = "postData.php?datapull=1";
            //return;
        }
    }
    else  // EDIT -- ADDED THIS TO CHECK FOR OTHER (readyState, status) PAIRS
    {
        alert("the readyState is: " + xmlhttp.readyState
              + " and the status is: " + xmlhttp.status);
    }
  }

  var ajaxText = "checkForData.php?zer=" + user + "&pwd=" + pwd;
  xmlhttp.open("GET", ajaxText, true);
  xmlhttp.send();
}

(The php file "checkForData.php" just looks up the username/password combo ('zer' and 'pwd') in the database to see if that user/password has any records in the database and returns "found" if they have records. In my test of this code, I enter a valid user user/pwd combination, and the checkForData.php code successfully returns 'found' as the responseText.)

Here is postData.php:

<?php
if(isset($_GET['datapull']))
{

    echo '<script type="text/javascript">'
         . 'alert("We just got a redirect form the Ajax code")</script>';
    $datapull = $_GET['datapull'];

    if($datapull == 1)
    {
        echo '<script type="text/javascript">'
         . 'alert("about to pull data")</script>'; 
    }
}

?>

I know that the onreadystatechange inline function is not executing twice because I have an alert() box when the inline function executes (see above), and that alert box only appears one time and reports "Data was found with that user name/password."

The output I see is:

0) I get an alert() box that says "responseText is >>>found<<< that." then I get an alert() box that says "Data was found with that user name/password."

1) I get an alert() box that says "We just got a redirect from the Ajax code"

2) then I see an alert() box that says "about to pull data"

3) and I then get a second alert box that says "We just got a redirect from the Ajax code"

4) next, another alert box that says "about to pull data"

Is there something I can change to make the window.location() cause my postData.php code to execute only once? Why does the postData.php page load twice?

Answer 1

I did not find the cause for the double-triggering, it was more expedient to revert to the day-before's code snapshot and very incrementally recode the work, and I'm no longer getting the double-loading symptom. I took a different approach to the features I had added and somehow bypassed whatever was causing the double post. I don't have time at present to figure out what was causing the double-post, but will diff the files a bit later.

Answer 2

Try an else for the if(xmlhttp.readyState == 4 && xmlhttp.status == 200) statement to see if there's another state that the ajax call goes into before readystate 4. Maybe just put alert(xmlhttp.readyState); in the else and see what happens.

Answer 3

While working with one of my Apache Cordova project I also face the same issue. Unfortunately, I still don't understand why exactly the code execute twice, but clearing your div just after 200 status helped for my case.

Here is the example:

if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
     $('#divId').empty();   //Clear the div
     // Now start your code
}

Can't say about the other ripple effects, but it worked for me.