PHP, javascript AJAX

Question

I have the following code for a login-page:

function LoginToSite() {
    if (getElementById('username').value != "" && getElementById('password').value != "") {
        request.addEventListener('readystatechange', Login, false);

        var username = encodeURIComponent(document.getElementById("username").value);
        var password = encodeURIComponent(document.getElementById("password").value);


        request.open('GET', 'login.php?username='+username+"&password="+password, true);
        request.send(null);
    }
}

function Login() {
    if (request.readyState === 4 && request.status === 200) {
        alert("READY");
        var myResponse = JSON.parse(this.responseText);
        getElementById("count").innerHTML = myResponse;
        getElementById('login').style.display = "none";
        if(request.responseText == 1){
            alert("Login is successfull");
        }
        else if(request.responseText == 0){
            alert("Invalid Username or Password");
        }
    }
    else{
        alert("Error :Something went wrong");
    }
    request.send();
}

php-code

session_start();

$logins = array("username1" => "password1", "username2" => "password2" );

$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
if($username != '' and $password != ''){

    foreach($logins as $key=>$value){
        if(($key == $username) && ($value == $password)){
            echo "1";
        }else{
            echo "0";
        }
    }

}else{
    echo "0";
}

When im trying to login, the site first alert that something went wrong, then the same thing happens again and after that, it alerts "ready". What do I have to change to get this right?

Answer 1

readystatechange event is called multiple times ... while the ready state changes from 0 -> 1 -> 2 -> 3 -> 4 ... all requests go through these changes ... your logic would alert an error when readystate becomes 1, then 2, then 3 ... only when readystate becomes 4 AND state is 200 will the "if" condition run

you're alsoe calling request.send every time you go in to "Login"

so a simple change

function Login() {
    if (request.readyState === 4) {
        if (request.status === 200) {
            alert("READY");
            var myResponse = JSON.parse(this.responseText);
            getElementById("count").innerHTML = myResponse;
            getElementById('login').style.display = "none";
            if(request.responseText == "1"){
                alert("Login is successfull");
            }
            else if(request.responseText == "0"){
                alert("Invalid Username or Password");
            }
        }
        else{
            alert("Error :Something went wrong");
        }
    }
}

Note: checking request.responseText == "1" because the response will be a string not a number

a better (in my opinion) solution is to NOT listen on readystate change, but listen for load event

request.addEventListener('load', Login, false);

then your Login code is

function Login() {
    if (request.status === 200) {
        alert("READY");
        var myResponse = JSON.parse(this.responseText);
        getElementById("count").innerHTML = myResponse;
        getElementById('login').style.display = "none";
        if(request.responseText == "1"){
            alert("Login is successfull");
        }
        else if(request.responseText == "0"){
            alert("Invalid Username or Password");
        }
    }
    else{
        alert("Error :Something went wrong");
    }
}

Answer 2

You're comparing readyState to 4 and status to 200. In all other cases when Login() is called, which happens multiple times while the request is running, your code alerts "Error :Something went wrong". Not sure if the messy indentation is the problem here.
There's also a stray request.send() at the end.

Use this:

function Login() {
  if (request.readyState < 4) return; // do nothing
  if (request.status === 200) {
    alert("READY");
    var myResponse = request.responseText;
    getElementById("count").innerHTML = myResponse;
    if (myResponse == 1) {
      alert("Login is successfull");
      getElementById('login').style.display = "none";
    } else if (myResponse == 0) {
      alert("Invalid Username or Password");
    }
  } else {
    alert("Error: Something went wrong");
  }
}