I'm having some trouble managing the answers to a simple XMLHttpRequest made on JS to my own server. I have some troubling answers, here's my code:

JavaScript:

function callPHP () {
    var xml = new XMLHttpRequest();
    xml.open("POST", "http://localhost/ajaxTest", false);
    xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xml.send("format=json");
    var resp = xml.responseText;
    console.log(resp);
}

And PHP:

<?php
    if (isset($_POST["format"])){
        if($_POST["format"] == "json"){
            echo '
                {
                    "name": "Name",
                    "lastName": "LastName", 
                    "dob" : "dd/mm/yyyy",
                }
                ';
        }
    }else{
        print_r($_POST);
        echo "Error";
        http_response_code(400);
    }


?>

And whenever I execute my JS I get the error part of the PHP code, even having sent the "format=json" data on request. But if I change asynchronous to true, I get a GET error (in chrome's console) of 400 Bad Request, but no echo of the PHP is executed.

I know I have to check the xmlhttprequest status and response code to do asynchronous, I was testing it directly on the console.

I don't know what I'm doing wrong here, the POST data should be sent, and independently of asynchronous or not, right?

Thank you all!

I'm having some trouble managing the answers to a simple XMLHttpRequest made on JS to my own server. I have some troubling answers, here's my code:

JavaScript:

function callPHP () {
    var xml = new XMLHttpRequest();
    xml.open("POST", "http://localhost/ajaxTest", false);
    xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xml.send("format=json");
    var resp = xml.responseText;
    console.log(resp);
}

And PHP:

<?php
    if (isset($_POST["format"])){
        if($_POST["format"] == "json"){
            echo '
                {
                    "name": "Name",
                    "lastName": "LastName", 
                    "dob" : "dd/mm/yyyy",
                }
                ';
        }
    }else{
        print_r($_POST);
        echo "Error";
        http_response_code(400);
    }


?>

And whenever I execute my JS I get the error part of the PHP code, even having sent the "format=json" data on request. But if I change asynchronous to true, I get a GET error (in chrome's console) of 400 Bad Request, but no echo of the PHP is executed.

I know I have to check the xmlhttprequest status and response code to do asynchronous, I was testing it directly on the console.

I don't know what I'm doing wrong here, the POST data should be sent, and independently of asynchronous or not, right?

Thank you all!

• javascript
• php
• html
• xmlhttprequest
• request

• 1 @developerwjk He's passing false as the third param to the open function, which means that it is synchronous. – Atli Commented Feb 19, 2015 at 23:14
• I see what you say, however my concern is more on the server side, why is it that I get a GET error when i set asynchronous to true? and why isn't the echo "Error" executed... I did try to execute a separate JS on the console directly, but I got the same answers – Jo Colina Commented Feb 19, 2015 at 23:15
• 1 Do you have some rewrite rule to make http://localhost/ajaxTest work? If not. maybe you're just missing the .php extension there. – developerwjk Commented Feb 19, 2015 at 23:22
• @developerwjk yes, you were right, I just had to add index.html to my URL, thanks! – Jo Colina Commented Feb 20, 2015 at 13:32
• @developerwjk Do you happen to know how to add a rewrite rule to avoid inserting the index.php to the url? – Jo Colina Commented Feb 22, 2015 at 1:11

1 Answer 1

looks like the structure of your javascript function is incorrect. You should setup a listener before you send the request. In your code perhaps something like:-

var xml = new XMLHttpRequest();
xml.onreadystatechange = function() {
    if( xml.readyState==4 && xml.status==200 ){
        console.log( xml.responseText );
    }
};

xml.open("POST", "http://localhost/ajaxTest", false);
xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xml.send("format=json");