ajax GET request responseText empty

Question

I'm trying to create a chatbox using AJAX but for some reason my xhttp.responseText is empty. In firebug I can see that a GET request is being sent and it even responds with the correct text, but this text just doesn't get put in the responseText for some reason.

Here is my index.html:

<!doctype html>

<html>

<head>
    <meta charset="utf-8"/>
    <title>Chatroom</title>
    <script>

    function setup() {
        ajaxRequest( 'GET', 'loadmessages.php', updateChat);
        setInterval(function () {
            ajaxRequest( 'GET', 'loadmessages.php', updateChat);
        }, 1000);
    }

    function updateChat(xhttp) {
        document.getElementById( 'chat' ).innerHTML = xhttp.responseText;
    }

    function ajaxRequest( method, file, cfunc ) {
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if(xhttp.readyState == 2 && xhttp.status == 200) {
                cfunc(xhttp);
            }
        }
        xhttp.open( method, file, true);
        xhttp.send();
    }

    </script>
</head>

<body onload="setup();">
    <div id="chat">

    </div>
</body>

</html>

Here is loadmessages.php:

<?php 

include( 'connect.php' );


$query = "SELECT * FROM messages ORDER BY id DESC";
$result = mysqli_query($conn, $query);

if( mysqli_num_rows($result) > 0 ) {
    $output = "";
    while( $row = mysqli_fetch_assoc($result) ) {
        $id = $row['id'];
        $name = $row['name'];
        $content = $row['content'];
        $time = $row['time'];

        $output .= "[sent by $name on $time] $content <hr/>";
    }
    echo $output;
} else {
    echo "No messages yet, be the first to send one!";
}

mysqli_close($conn);
?>

And the connect.php:

<?php 

$conn = mysqli_connect( 'localhost', 'root', '', 'chatroom' ) or die( 'Couldn\'t connect to database!' );

?>

Since there's nothing in the database yet, it just echoes "No messages yet, be the first to send one!". I can see this response if I open firebug, but this text is not in the responseText variable.

Do you get anything when you open loadmessages.php directly at your browser — Svetoslav, Oct 19 '15 at 14:18
Yes it shows "No messages yet, be the first to send one!" on the page, as it should, since there's nothing in the database — David C, Oct 19 '15 at 14:19
You said that firebug shows the GET request has the correct text. Did you inspect the xhttp variable in the debugger? — Lee Jenkins, Oct 19 '15 at 14:31
Nope, all firebug is giving me is the GET request with the correct response. — David C, Oct 19 '15 at 14:35
No I did not, let me see @LeeJenkins EDIT: Now this is very interesting, inspecting the xhttp variable, it does say that responseText should be "No messages yet, be the first to send one!" even though it doesn't return anything if I reference xhttp.responseText in JavaScript. — David C, Oct 19 '15 at 14:36

score 2 · Accepted Answer · edited May 23 '17 at 11:52

You should change the if clause for readyState like below:

xhttp.onreadystatechange = function () {
    if(xhttp.readyState == 4) {
        cfunc(xhttp);
    }
}

since this callback is triggered everytime the readyState changes and you are testing for the value 2 which is sent, at this point there is no response available in xhttp.responseText

See here What do the different readystates in XMLHttpRequest mean, and how can I use them?

In slightly more detail here Why XmlHttpRequest readyState = 2 on 200 HTTP response code
the difference between readyState==2 and readyState==4

score 0 · Answer 2 · edited Oct 27 '15 at 18:22

0

I highly recommend using jQuery for AJAX, because it is far more simple and intuitive. Here is link for more info: http://www.w3schools.com/jquery/jquery_ref_ajax.asp

edited Oct 27 '15 at 18:22

Mogsdad

44,709
21
151
275

answered Oct 19 '15 at 14:30

fico7489

7,931
7
55
89

I'm trying to step away from jQuery with this project. I know the power of jQuery and how much easier it is but the whole point of me creating this project is to not use jQuery for once. Thanks anyway! – David C Oct 19 '15 at 14:33
ok, I just recommended in case that you don't know about jquery. – fico7489 Oct 19 '15 at 14:40
1

@fico7489 I think everyone has heard of jQuery :) – Ruan Mendes Oct 19 '15 at 15:11
When I am looking at new questions I don't think so ;) – fico7489 Oct 19 '15 at 16:04

ajax GET request responseText empty

2 Answers2