从javascript调用java servlet

Question

我正在尝试使用MVC设计模式创建Web应用程序.对于GUI部分,我想使用JavaScript.并为控制器Java Servlets.

现在我从未真正使用过JavaScript,因此我很难弄清楚如何从JavaScript调用Java Servlet以及如何从Servlet获取响应.

有人可以帮帮我吗？

Answer 1

所以你想要激活对servlet的Ajax调用？为此,您需要XMLHttpRequestJavaScript中的对象.这是Firefox兼容的示例:

<script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            var data = xhr.responseText;
            alert(data);
        }
    }
    xhr.open('GET', 'myservlet', true);
    xhr.send(null);
</script>

然而,这是非常冗长的,并不是真正的交叉浏览器兼容.为了获得最佳的crossbrowser兼容方式来解决ajaxical请求和遍历HTML DOM树,我建议抓住jQuery.这是在jQuery中重写上面的内容:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $.get('myservlet', function(data) {
        alert(data);
    });
</script>

无论哪种方式,在服务器上的Servlet应该在一个被映射url-pattern的/myservlet(你可以将其更改为自己的口味),并至少doGet()实现,如下数据写入响应:

String data = "Hello World!";
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(data);

这应该显示Hello World!在JavaScript警报中.

你当然也可以使用doPost(),但是你应该使用'POST'in xhr.open()或use $.post()而不是$.get()jQuery.

然后,要在HTML页面中显示数据,您需要操作HTML DOM.例如,你有一个

<div id="data"></div>

在您要显示响应数据的HTML中,您可以这样做而不是alert(data)第一个示例:

document.getElementById("data").firstChild.nodeValue = data;

在jQuery示例中,您可以以更简洁和更好的方式执行此操作:

$('#data').text(data);

为了更进一步,您希望有一种易于访问的数据格式来传输更复杂的数据.常见格式是XML和JSON.最后一个是最优选的,因为它更简洁,并且可以非常简单的方式在Java和JavaScript中使用.在Java中,您可以使用Google Gson将完整的Java对象转换为JSON,反之亦然.

List<Product> products = productDAO.list(); // Product is just a Javabean with properties `id`, `name` and `description`.
String json = new Gson().toJson(products);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);

在JavaScript中,您可以使用jQuery $.getJSON()来"立即"获取它.让我们把它展示在一个<table>.

$.getJSON('myservlet', function(data) {
    var table = $('<table>').appendTo($('#data'));
    $.each(data, function(i, product) {
        var row = $('<tr>').appendTo(table);
        $('<td>').text(product.id).appendTo(row);
        $('<td>').text(product.name).appendTo(row);
        $('<td>').text(product.description).appendTo(row);
    });
});

另见:

• Java/JSP/JSF和JavaScript
• JavaScript教程
• JSON教程
• jQuery教程

Answer 2

这里的代码将使用 AJAX 将文本动态打印到 HTML5 文档中（Ajax 代码类似于 book Internet & WWW (Deitel)）：

Javascript代码：

var asyncRequest;    
function start(){
    try
    {
        asyncRequest = new XMLHttpRequest();
        asyncRequest.addEventListener("readystatechange", stateChange, false);
        asyncRequest.open('GET', '/Test', true);    //   /Test is url to Servlet!
        asyncRequest.send(null);
    }
    catch(exception)
   {
    alert("Request failed");
   }
}

function stateChange(){
if(asyncRequest.readyState == 4 && asyncRequest.status == 200)
    {
    var text = document.getElementById("text");         //  text is an id of a 
    text.innerHTML = asyncRequest.responseText;         //  div in HTML document
    }
}

window.addEventListener("load", start(), false);

Servlet Java 代码：

public class Test extends HttpServlet{
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp)
    throws IOException{
        resp.setContentType("text/plain");
        resp.getWriter().println("Servlet wrote this! (Test.java)");
    }
}

HTML 文档

 <div id = "text"></div>

编辑

当我刚接触网络编程时，我在上面写了答案。我让它站着，但 javascript 部分绝对应该在 jQuery 中，它比原始 javascript 容易 10 倍。