Question

我正在尝试使用AJAX创建聊天框但由于某种原因我的xhttp.responseText为空。在firebug中，我可以看到正在发送GET请求，它甚至以正确的文本响应，但是由于某种原因，这个文本没有被放入responseText。

这是我的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>

这是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);
?>

和connect.php：

<?php 

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

?>

由于数据库中还没有任何内容，它只是回应“还没有消息，成为第一个发送消息！”。如果我打开firebug，我可以看到这个响应，但是这个文本不在responseText变量中。

Answer 1

您应该更改if的{{1}}条款，如下所示：

readyState

由于每次xhttp.onreadystatechange = function () { if(xhttp.readyState == 4) { cfunc(xhttp); } }更改时都会触发此回调，并且您正在测试readyState的{{1}}值，此时2中没有可用的响应

请参阅此处What do the different readystates in XMLHttpRequest mean, and how can I use them?

在这里稍微详细一点Why XmlHttpRequest readyState = 2 on 200 HTTP response code
sent和xhttp.responseText

之间的差异

Answer 2

我强烈建议使用jQuery for AJAX，因为它更加简单直观。以下是更多信息的链接：http://www.w3schools.com/jquery/jquery_ref_ajax.asp

ajax GET请求responseText为空

2 个答案: