I am using Ajax to rescore typos in a flashcard program. The problem comes when the user rescores a typo and that causes them to complete side 1 of the cards. I already have side one of the card displayed and so I want to force the entire page to reload. So I sent back the string "step1" from the Ajax program if I want the page to reload. It does not reload. I have simplified the programs to this to try to debug:
html:
HTML Code:
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Bootstrap core CSS -->
        <link href="http://localhost:10088/NewFolder/japanese/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom styles for this template -->
        <link href="http://localhost:10088/NewFolder/japanese/bootstrap-3.1.1-dist/css/bootstrap-theme.min.css" rel="stylesheet">
        <link href="http://localhost:10088/NewFolder/japanese/bootstrap-3.1.1-dist/css/custom.css" rel="stylesheet">
        <script>
            function ajaxRequest() {
                //declare the variable at the top, even though it will be null at first
                var req = null;
                //modern browsers
                req = new XMLHttpRequest();

                //setup the readystatechange listener
                req.onreadystatechange = function() {
                    //right now we only care about a successful and complete response
                    if (req.readyState === 4 && req.status === 200) {
                        //inject the returned HTML into the DOM
                        //document.getElementById('wrongMessage').innerHTML = 'Answer\'s Score Changed to Correct';
                        //document.getElementById('progress').innerHTML = req.responseText;
                        if (req.responseText=='step1'){
                            window.location.href = "vocab_quiz.php?deck_id=6&step_1_complete=1"
                            }
                    }
                }
                //open the XMLHttpRequest connection
                //req.open("GET","correct_typo.php?dictionary_id=5038&box=2&deck=6&side1=0",true);
                req.open("GET", "test1.php", true);

                //send the XMLHttpRequest request (nothing has actually been sent until this very line)
                req.send();
            }
        </script>
    </head>
    <body>
        <div id="progress">TODO write content</div>
        <button type="button" class="btn btn-lg btn-success" onclick="ajaxRequest()" >Count As Correct / Typo</button>
    </body>
</html>
Ajax script:
Code:
<?php
echo 'step1';
?>
If I uncomment the line: //document.getElementById('progress').innerHTML = req.responseText;
I get step1 in progress div when I press the button. Firebug shows that I get the correct response too but even though when I Google it the consensus seems to be that window.location.href will cause the page to reload it does not.

What am I doing wrong?