PHP header wont redirect with AJAX

Question

For a project we have to create a basic log in system. Im trying to use REST to manage my entire page. Now I believe Im missing or misunderstanding some key concept here but I've been trying to figure out how to do this for ages. Were not allowed to use libraries for this exercise so I cant use JQuery.

So heres my problem: I have a .js file that checks for username length and password length and etc.... in this .js file I also have an ajax function that sends the username and email to PHP to verify that there is not already an existing user with that email or username using SQL.

function checkUser()
        {
            var ajax = new Ajax(); // instantiates my external ajax class
            var email = document.getElementById("newEmail").value;
            var username = document.getElementById("newUserName").value
            ajax.post("index.php?method=register&check=check", "newEmail=" + email + "&newUserName=" + username, callbackCatch)

        }
    function callbackCatch(param)   
        {
            var responseMessages = JSON.parse(param.responseText);

            emailMessage = responseMessages.emailMessage;
            userNameMessage = responseMessages.userNameMessage;
            userEmailIsOk = responseMessages.userEmailIsOk;
            userNameIsOk = responseMessages.userNameIsOk;
            release = true;
            if((userEmailIsOk + userNameIsOk) != 2)
                {
                    console.log(userEmailIsOk + userNameIsOk);
                    release = false;
                }

            updateMessageFields();
        }

I get a JSON string back which I parse and then compare against my form values. When everything is find and dandy i click the register button on my form page which posts all the fields back to my php file. However it seems that when i do this my external ajax class is accessed somehow every time and I get an error : NS_NOINTERFACE: Component does not have requested interface.

Im assuming that because AJAX is running in the backgroud whenever I make a post, even from my form it tries to send back my param which in this case are not compatible.

I dont know how to fix this. My PHP file that is suppose to handle the transfer looks like this:

require_once("../database/table.php");

class test {

private $SQLtable;

private $newEmail;
private $newPswrd;
private $newUserName;
private $newFullName;


public function test()
    {
        $this->SQLtable = new table();
        $this->initClassVars();
        $this->generateUserName();
        $this->regUser();


    }
function initClassVars()
    {
        if(isset($_POST["newPassword"]))
            {
                $this->newPswrd = $_POST["newPassword"];
            }
        if(isset($_POST['newUserName']))
            {
                $this->newUserName = $_POST['newUserName'];
            }
        if(isset($_POST["newEmail"]))
            {
                $this->newEmail = $_POST["newEmail"];
            }
        if(isset($_POST["newFullName"]))
            {
                $this->newFullName = $_POST["newFullName"];
            }
    }
function generateUserName()
    {
        if(isset($_POST["newFullName"]))
        {
            $suggestedUserName = str_replace(" ", "", $this->newFullName);
            $this->newUserName = $suggestedUserName;
        }
    }

function regUser()
    {       

                $this->SQLtable->registerUser($this->newEmail, $this->newPswrd, $this->newFullName, $this->newUserName);
                $sessionKey = $this->genKey();
                $this->SQLtable->authUser($this->newEmail, $this->newPswrd, $sessionKey);
                header("location:Location:index.php?method=feed&key=$sessionKey&user=$this->newEmail");
                exit;
    }

function genKey($length = 16)
    {
        $options = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; //Range
        $key = ""; //Empty holder for key
        for($i = 0; $i < $length; $i++)
            {
                $code = rand(0, strlen($options) - 1); 
                $key .= $options[$code];  // Loops through as long as the $length is set and adds a random string char from $options to build a new key.
            }
        return $key;
    }

}

As you can see Im toying around with using an API key to control authentication. I havent gotten the cookies working with it yet, but ill do that after I figure out how to get this registration thing sorted.

Sorry if ive been unclear. This is my first question on stackoverflow and basically I never wrote a line of code in my life until about 8 months ago so bear with my newbish code :D. Thanks..

Ok so heres the HTML and where the functions are being called: This is my form html file. The doctype and header are added separately as I use them over and over a few times.

<body>

<h1> Thanks! <!-- $user -->, you're almost there.  We just need a few more details      </h1>

<form id="registerUser" name="registerUser" action="index.php?method=test" method="post">
<p>
<label for="newFullName">Full Name: </label>
<input type="text" id="newFullName" name="newFullName" value="$newFullName" />
<span id="nameMessage"></span>
</p>
<p>
<label for="newUserName">User Name: </label>
<input type = "text" id="newUserName" name="NewUserName" value="$newUserName" />
<span id="nicknameMessage"><!-- $newUserNameMessage --></span>
</p>
<p>
<label for="newEmail">Email: </label>
<input type="text" id="newEmail" name="newEmail" value="$newEmail" />
<span id = "newEmailMessage"><!-- $newEmailMessage --></span>
</p>
<p>
<label for ="newPassword">Password: </label>
<input type="password" id="newPassword" name="newPassword" value="$newPswrd" />
<span id = "newPasswordMessage"></span>
</p>
<input type="submit" id="register" disabled="disabled" value="Register" onclick=""/>
</form>


<p><a href="../../../Index.html"> Click here to go back to the login site and login.   </a></p>

<script type="text/javascript" language="javascript" src="../../js/net/ajaxHandler.js">    </script>
<script type="text/javascript" language="javascript">var bootstrap = new ajaxHandler();     bootstrap.init(); </script>
</body>
</html>

The entire JS file is this.. its a bit messy but its because Ive been toying with it so much:

var ajaxHandler = function()
{
    var self = this;
    var release = true;
    var nameField;
    var userField;
    var emailField;
    var passWordField
    var emailMessage;
    var userNameMessage;

    self.init = function()
        {
            addEventListeners();
            checkFormForErrors();
        }

    self.redirect = function ()
        {
        }
    function addEventListeners()
        {
            nameField       = document.getElementById("newFullName");
            userField       = document.getElementById("newUserName");
            emailField      = document.getElementById("newEmail");
            passWordField   = document.getElementById("newPassword");

            Event.addEventListener(nameField, 'click', checkFormForErrors);
            Event.addEventListener(userField, 'click', checkUser);
            Event.addEventListener(emailField, 'click', checkUser);
            Event.addEventListener(passWordField, 'click', checkFormForErrors);

            Event.addEventListener(nameField, 'keyup', checkFormForErrors);
            Event.addEventListener(userField, 'keyup', checkUser);
            Event.addEventListener(emailField, 'keyup', checkUser);
            Event.addEventListener(passWordField, 'keyup', checkFormForErrors);
        }

    function checkPassword()
        {
        var passWordIsOk;
        var patt        = /\s/;
        var whiteSpace  = patt.test(passWordField);
        var passwordLength = passWordField.value.length;
        if (passwordLength < 8 )
            {
                document.getElementById("newPasswordMessage").innerHTML = "Your passowrd must be at least 8 charachters long. ";
                passWordIsOk = false
                if (whiteSpace)
                    {
                        document.getElementById("newPasswordMessage").innerHTML += "Your Password cannot contain any spaces.";
                        passWordIsOk = false
                    }
            } 
        else
            {
                document.getElementById("newPasswordMessage").innerHTML = "Password looks good";
                passWordIsOk = true
            }
        return passWordIsOk;
        }

    function checkName()    
        {
            var userNameIsOk;
            var nameMessage = document.getElementById("nameMessage");
            if (!nameField.value)
                {
                    nameMessage.innerHTML = "You need to enter a name."
                    userNameIsOk = false;

                }
            else
                {
                    nameMessage.innerHTML = "Name looks great."
                    userNameIsOk = true;
                }
            return userNameIsOk;
        }

    function checkEmailSyntax()
        {
            var EmailIsOk = true
            var patt    = /^([\w!.%+\-])+@([\w\-])+(?:\.[\w\-]+)+$/ ;
            var format  = patt.test(emailField.value);
            if (!format)
                {
                    document.getElementById("newEmailMessage").innerHTML = "Your email does not appear to be in the right format."
                    EmailIsOk = false;
                }
            return EmailIsOk        
        }

    function checkFullNameSyntax()
        {
            var nameIsOk = true
            if (document.getElementById("newUserName").value == "")
                {
                    document.getElementById("nicknameMessage").innerHTML = "You must enter a username.  You can always change it later."
                    nameIsOk = false
                }
            return nameIsOk;
        }

    function checkUser()
        {
            var ajax = new Ajax();
            var email = document.getElementById("newEmail").value;
            var username = document.getElementById("newUserName").value
            ajax.post("index.php?method=register&check=check", "newEmail=" + email + "&newUserName=" + username, callbackCatch)

        }
    function callbackCatch(param)   
        {
            var responseMessages = JSON.parse(param.responseText);

            emailMessage = responseMessages.emailMessage;
            userNameMessage = responseMessages.userNameMessage;
            userEmailIsOk = responseMessages.userEmailIsOk;
            userNameIsOk = responseMessages.userNameIsOk;
            release = true;
            if((userEmailIsOk + userNameIsOk) != 2)
                {
                    console.log(userEmailIsOk + userNameIsOk);
                    release = false;
                }

            updateMessageFields();
            var ajax = "";
        }
    function updateMessageFields()
        {
            document.getElementById("nicknameMessage").innerHTML = userNameMessage;
            document.getElementById("newEmailMessage").innerHTML = emailMessage;
            checkFormForErrors();

        }
    function checkFormForErrors()
        {
            console.log('hi');
            var nameOk = checkFullNameSyntax()
            console.log(nameOk);
            var passOk = checkPassword()
            console.log(passOk);
            var userOk = checkName()
            console.log(userOk);    
            var emailOk = checkEmailSyntax()
            console.log(emailOk);
            console.log(release);
            document.getElementById("register").disabled = true;
            if(release && nameOk && passOk && userOk && emailOk)
                {
                    console.log('hey');
                    console.log(release && nameOk && passOk && userOk && emailOk)
                    document.getElementById("register").disabled = false;
                }
        }
}

Answer 1

You cannot redirect from php in an ajax call.

You need to send the right information back from your php script to your javascript and do the redirect from there, using the parameters you got back from php.

You also have one Location: too many in your php, but that is not the problem here.

Answer 2

I don't know if this will be hard to understand, but by the time your AJAX receives the response, the page has already been redirected...and to your AJAX, it looks normal - it's getting a response back (in this case, a full page, not JSON). This is the order of events:

AJAX Request

--> Browser sends request to PHP file

----> Your PHP file receives the request, processes it, and "redirects"

<---- HTTP 302 status code sent to browser

<-- Browser receives 302 status code, redirects response, and returns result as AJAX response

At least I'm pretty sure that's what happens - I swear I've ran into this "problem" before, and I found out this is what was happening.

To "fix" this, you have a few options. Instead of using PHP to "redirect", you could send this information in your JSON. Then, in your callback, you could check for its existence...like a "redirect" key, and use its value to redirect to (setting its value in PHP as the URL to redirect to). Or, you could keep it as a string, and before you parse it, check for it starting with "redirect:". If it starts with that, get the rest of the string and redirect to that value (settings its value in PHP as the URL to redirect to). Otherwise, parse it like JSON and process it normally.