Detective merry Detective merry - 4 months ago 39
Javascript Question

xmlhttp.status returns 0 in localhost XAMPP

i am a beginner that is doing an app for my school work.
Currently, i am using XAMPP to host my app and phpmyadmin for my database.
The problem i am facing is that the xmlhttp.status is returning 0 instead of 200. I do not have this problem with my previous project where i am using microsoft azure instead of XAMPP.

Here is the code of my script in index.html

var userid;
var password;
function serverURL(){
return "http://localhost/webP/FYP/workshop/platforms/android/assets/www/";
}
function login(){
userid = $("#userid").val();
password = $("#password").val();
if (validate()){
alert("validate pass");
var xmlhttp = new XMLHttpRequest();
var url = serverURL() + "/login.php";
url += "?userid=" + userid + "&password=" + password;
alert(url);
xmlhttp.onreadystatechange=function() {
alert("xmlhttponready running");
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.status);
alert(xmlhttp.readyState);

}
getLoginResult(xmlhttp.responseText);
}


xmlhttp.open("GET", url, true);
xmlhttp.send();
}
}


Here is my login.php

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
error_reporting(E_ERROR);
try{
$conn = new mysqli("127.0.0.1", "root", "root", "bencoolen");
$userid = $_GET["userid"];
$password = $_GET['password'];
$query = "SELECT count(*) as found from profiles where userid ='" .
$userid . "' and password = '" . $password . "'";
$result = $conn->query($query);
$count = $result->fetch_array(MYSQLI_NUM);
$json_out = "[" . json_encode(array("result"=>$count[0])) . "]";
echo $json_out;
$conn->close();
}
catch(Exception $e) {
$json_out = "[".json_encode(array("result"=>0))."]";
echo $json_out;

}


The PHP returns result='0'
I personally feel that the problem could lies in

function serverURL(){
return "http://localhost/webP/FYP/workshop/platforms/android/assets/www/";
}


Please advise :(

Answer

Some liitle mistakes:

Your saveUrl function returns "http://localhost/webP/FYP/workshop/platforms/android/assets/www/"

Now when you are trying to concat

var url = serverURL() + "/login.php";

The url becomes "http://localhost/webP/FYP/workshop/platforms/android/assets/www//login.php"

I excpect you want json response. Then why you are adding? "[".json_encode()."]"

json_encode(array("result"=>0))

Outputs:

{"result":0}

and

getLoginResult(xmlhttp.responseText);

You are keeping out of the if block. This is the main reason you are getting 0 response. For this let me explain little bit about xmlhttp

When a ajax request is triggered, it is completed with 4 states

state value = 0 :=> (state = UNSET): the xmlhttp instance is initiated 
state value = 1 :=> (state = OPENED): The browser sends the data to the server
state value = 2 :=> (state  = HEADERS_RECEIVED): request reached at server
state value = 3 :=> (state  = LOADING): server processing the request
state value = 4 :=> (state  = DONE): response reached from server to browser

Now comming to the coding part:

    // When ever there is a state chgange in
    // the xmlhttp object
    xmlhttp.onreadystatechange=function() {
        alert(xmlhttp.readyState);

        // when the response from server is reached (state = 4)
        // and the response header http code is 200 (xmlhttp.status == 200)
        // do the following
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.status);
            alert(xmlhttp.readyState);
            getLoginResult(xmlhttp.responseText);
        }

    }

But as you have kept getLoginResult(xmlhttp.responseText); out of if block, so it get executed when state is zero (means when the request was not sent to server)

Try this js code:

var userid;
var password;
function serverURL() { 
    return "http://localhost/webP/FYP/workshop/platforms/android/assets/www/";
}

function login(){
    userid = $("#userid").val();
    password = $("#password").val();
    if (validate()){
        alert("validate pass");
        var xmlhttp = new XMLHttpRequest();
        var url = serverURL() + "login.php";
        url += "?userid=" + userid + "&password=" + password;
        alert(url);
        xmlhttp.onreadystatechange=function() {
            alert("xmlhttponready running");
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                alert(xmlhttp.status);
                alert(xmlhttp.readyState);
                getLoginResult(xmlhttp.responseText);
            }

        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    }
}

And your php code:

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
error_reporting(E_ERROR);
try{
    $conn = new mysqli("127.0.0.1", "root", "root", "bencoolen");
    $userid = $_GET["userid"];
    $password = $_GET['password'];
    $query = "SELECT count(*) as found from profiles where userid ='" .
            $userid . "' and password = '" . $password . "'";
    $result = $conn->query($query);
    $count = $result->fetch_array(MYSQLI_NUM);
    $json_out = json_encode(array("result"=>$count[0]));
    echo $json_out;
    $conn->close();
}
catch(Exception $e) {
    $json_out = json_encode(array("result"=>0));
    echo $json_out;

}
?>

Suggestions

As you are using jquery, try to use, jquery.ajax() instaed of XMLHttpRequest (if you are doing it for learning purpose, then its fine). This will fix your browser compatibility issue.

To avoid sql injection, try to use mysqli::prepare. http://php.net/manual/en/mysqli.prepare.php

For more about the XMLHTTPRequest: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState