Question

我正在尝试学习AJAX，现在我正在阅读servlet和回调。我觉得我的书没有详细介绍servlet或回调，所以我查看了一些在线资源只是为了让人更加困惑。我觉得我会用实际的例子来理解它，所以我指望你们帮助我:)我将不胜感激！我想要做的是创建一个接受数字的索引页面，异步将它传递给servlet以获得平方，并在索引页面上显示结果。这是我到目前为止所得到的。

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function setup() {
                if (window.XMLHttpRequest) {
                    r = new XMLHttpRequest();
                } else {
                    r = new ActiveXObject("Microsoft.XMLHTTP");
                }
                r.open("get","convert",true);
                r.onreadystatechange=???????????
                r.send(null);
            }
        </script>
    </head>
<body onload="setup()">
    <h3>Enter a number to be squared <input type="text" name="number" size="2" 
        maxlength="4"/></h3>
    <p id="result"></p>
</body>

Convert.java

package squared;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.sql.*;

public class convert extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        response.setContentType("text/xml"); 
        response.setHeader("Cache-Control", "no-cache");
        PrintWriter out=response.getWriter();

    }
}

感谢您抽出宝贵时间帮助我！

Answer 1

如果我们使用Jquery，它真的很容易使用Ajax，但我们应该学习创建XMLHttpRequest对象。我提供了一个简单的ajax工作示例，我希望它有所帮助。在您提出的问题中，我找不到您的servlet从请求对象中读取任何内容并将结果发送回任何响应。 HTML文件：（index.html）

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Servlet Test</title>
</head>
<body>
<h3>Please enter a number to Square : </h3>
<input type="text" id="numberToSquare">
<input type="button" onclick="callServlet();" value="Click To Square">
<div id="result"></div>
</body>
<script>
function callServlet()
{
    var xmlhttp;
    var input = document.getElementById('numberToSquare').value;
    if (window.XMLHttpRequest)
    {
    // This part is mainly for the latest browsers which have XMLHttpRequest object
        // like Chrome,Firefox,Safari and IE7+
    xmlhttp=new XMLHttpRequest();
    }
    else
    {
    // This should take care of the older browsers
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
xmlhttp.onreadystatechange=function()
{
/*
readyState has four different states : 
    0: request not initialized 
    1: server connection established
    2: request received 
    3: processing request 
    4: request finished and response is ready
status is ranging between 200 - Ok and 404 - Page Not Found     
*/
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
    document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ServletTest?val="+input,true);
xmlhttp.send();
}
</script>
</html>

使用的servlet :(我只提供doGet方法，因为servlet的其余部分非常好）

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
    // TODO Auto-generated method stub
    String val = request.getParameter("val");
    int valFromString = Integer.parseInt(val);
    Double d =  Math.pow(valFromString, 2);
    PrintWriter writer = response.getWriter();
    writer.println(d);
    System.out.println(d);
}

Answer 2

我认为使用jQuery.ajax方法而不是手动创建XMLHttpRequest对象更容易且更不容易出错。 http://api.jquery.com/jQuery.ajax/

但是，如果要使XMLHttpRequest正常工作，则应执行以下步骤：

通过XMLHttpRequest运算符创建新的new对象;
在XMLHttpRequest上调用方法open;
定义onload回调功能;
调用XMLHttpRequest的methid send向服务器发送请求。

代码应该如下：

var XHR = new XMLHttpRequest();
XHR.open('GET', 'some-url', true);
XHR.onload = function() {
   // here is function body
};
XHR.send();

在服务器端，您应该将servlet映射到您将在AJAX调用中使用的'some-URL'。您可以在项目的web.xml文件中执行此操作。

带回调的简单AJAX Servlet

2 个答案: