为什么我的代码无法使用XMLHttpRequest将参数从JavaScript传递到JSP？

Question

我正在尝试编写JavaScript代码,它在鼠标单击事件中将一些参数(id)发送到服务器端JSP代码.然后,JSP代码将字符串返回给JavaScript.

...并且响应文本将是从指定的JSP返回的字符串out.println(substring);.

此代码无效.对不起,如果我做的事情很傻; 我是网络编码的新手.

Answer 1

XMLHttpRequest默认情况下是一个异步请求,这意味着在您调用之后send,下一行代码将在请求完成之前执行.请求完成后执行的代码进入"状态更改"处理程序.您已在此处分配状态更改处理程序:

xmlHttp.onreadystatechange = handleRequestStateChange

但你永远不会定义handleRequestStateChange实际是什么.您应该阅读有关就绪状态和onreadystatechange事件的信息.

请尝试以下代码:

<button type="button" onClick="handleButtonClick();">Click Me!</button>
<script type="text/javascript">
function handleButtonClick()
{
    // Declare the variables we'll be using
    var xmlHttp, handleRequestStateChange;

    // Define the function to be called when our AJAX request's state changes:
    handleRequestStateChange = function()
    {
        // Check to see if this state change was "request complete", and
        // there was no server error (404 Not Found, 500 Server Error, etc)
        if (xmlhttp.readyState==4 && xmlhttp.status==200) 
        {
            var substring=xmlHttp.responseText;
            // Do something with the text here
            alert(substring);
        }
    }

    xmlhttp = new XMLHttpRequest();
    xmlHttp.open("GET", "http://csce:8080/test/index.jsp?id=c6c684d9cc99476a7e7e853d77540ceb", true);
    xmlHttp.onreadystatechange = handleRequestStateChange;
    xmlHttp.send(null);
}
</script>

此代码分配给handleRequestStateChange一个函数,该函数将在XMLHttpRequest更改的就绪状态时被调用.该函数检查就绪状态是否为4(请求已完成且响应已准备好),如果是,则您将能够访问将包含JSP页面响应的请求的responseText属性.

作为对未来的建议,当你了解了AJAX请求是如何工作的时候,你可能会发现像jQuery这样的帮助库让这样的任务变得更加容易!