Javascript函数只适用于某些"alert()"在里面 - Javascript functions only work with some "alert()" in it

我试图使用Ajax (Javascript + php)来检查当用户将焦点更改为表单的另一个字段时，用户名是否可用。我的函数只有在我有一些alert()时才能工作，如果我删除它们，函数就会停止工作。

另一个奇怪的事情是alert(requestObject.readyState);只显示状态1。据我所知，它应该显示所有状态，或者至少显示状态4。

这是我的javascript代码，它在HTML页面的头部。

    var requestObject = false;
    function funcReceiveData()
    {
        alert(requestObject.readyState);
        if(requestObject.readyState == 4)
        {
            if(requestObject.status == 200)
            {
                var status = requestObject.responseText;
                if(status == "ok")
                {
                    document.getElementById('userValid').innerHTML = 'Valid user';
                }
                else
                {
                    document.getElementById('userValid').innerHTML = 'Choose another username';
                }
            }
        }
    }
if (window.XMLHttpRequest)
{
    requestObject = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
    requestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function checkUser()
{
    if(requestObject){
        requestObject.open("POST", "addUser.php", true);
        requestObject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        var user = document.getElementById('username').value;
        var tobesent = "username=" + user;
        requestObject.send(tobesent);
        requestObject.onreadystatechange = funcReceiveData();
        alert(tobesent);
    }
}

这是我的HTML代码的主体部分:

<BODY>
<form method="POST" action="addUser.php">
    <table>
        <tr>
            <td><strong>Username:</strong></td>
            <td><input type="text" name="username" size="25" onblur="checkUser();" id="username"></td>
            <td><i id='userValid'>bla</i>
        </tr>
        <tr valign="top">
            <td><strong>Password:</strong></td>
            <td><input type="password" name="password" size="25"></td>
        </tr>
        <tr valign="top">
            <td><strong>Frist name:</strong></td>
            <td><input type="text" name="Fname" size="25"></td>
        </tr>
        <tr valign="top">
            <td><strong>Last name:</strong></td>
            <td><input type="text" name="Lname" size="25"></td>
        </tr>
        <tr valign="top">
            <td><strong>Address line 1:</strong></td>
            <td><input type="text" name="address1" size="50"></td>
        </tr>
        <tr valign="top">
            <td><strong>Address line 2:</strong></td>
            <td><input type="text" name="address2" size="50"></td>
        </tr>
        <tr valign="top">
            <td><strong>City:</strong></td>
            <td><input type="text" name="city" size="25"></td>
        </tr>
        <tr valign="top">
            <td><strong>Postcode:</strong></td>
            <td><input type="text" name="postcode" size="25"></td>
        </tr>
        <tr valign="top">
            <td><strong>Phone:</strong></td>
            <td><input type="text" name="phone" size="25"></td>
        </tr>
        <tr valign="top">
            <td><strong>Mobile:</strong></td>
            <td><input type="text" name="mobile" size="25"></td>
        </tr>
        <tr valign="top">
            <td><strong>Email:</strong></td>
            <td><input type="text" name="email" size="25"></td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit" /></td>
            <td><input type="reset" value="Clear" /></td>
        </tr>
    </table>
</form>

我的PHP代码如下，这是一个非常愚蠢的代码只是为了测试。之后我将在数据库中检查用户名。

<?php 
$user = $_POST['username'];
if($user == "Tiago")
    echo("ok");
else
    echo("Error");
?>

我的页面托管在这个地址:https://devweb2012.cis.strath.ac.uk/~ntb13105/WAD/tests/Twig/FINAL/addUser.html

有人知道发生了什么事吗?

您正在调用 funcReceiveData而不是使用它作为readyStateChange事件处理程序。

它不起作用，因为此时HTTP请求还没有响应。在其中插入一个警报会延迟读取requestObject.readyState值的尝试，直到您单击OK，这段时间足以让响应到达。

删除()并在发送请求之前分配事件处理程序。

requestObject.onreadystatechange = funcReceiveData;
requestObject.send(tobesent);