Javascript代码：

Question

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

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

有人可以帮帮我吗？

Answer 1

所以你想要对servlet发出Ajax次调用？为此，您需要JavaScript中的XMLHttpRequest对象。这是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的{{1}}（您可以根据自己的喜好进行更改）并至少doGet()实现并写入数据响应如下：

/myservlet

这应该在JavaScript警告中显示String data = "Hello World!"; response.setContentType("text/plain"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(data);。

您当然也可以使用doPost()，但是您应该在Hello World!中使用'POST'或在jQuery中使用$.post()而不是$.get()。

然后，要在HTML页面中显示数据，您需要操纵HTML DOM。例如，你有一个

xhr.open()

在您要显示响应数据的HTML中，您可以这样做，而不是第一个示例的<div id="data"></div>：

alert(data)

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

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

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

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

在JavaScript中，您可以使用jQuery的$.getJSON()来“立即”获取它。我们将其显示在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);。

中

<table>

另见：

Answer 2

此处的代码将使用AJAX动态地将文本打印到HTML5文档（Ajax代码类似于书籍Internet＆amp; 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倍。

Answer 3

我真的建议您使用jquery进行javascript调用，并使用JSR311的一些实现，例如jersey作为服务层，它将委托给您的控制器。

这将帮助您处理HTTP调用和数据序列化的所有基础逻辑，这是一个很大的帮助。

Answer 4

抱歉，我读的是jsp而不是javascript。你需要做类似的事情（请注意，这是一个相对网址，可能会有所不同，具体取决于此javascript所在的文档的网址）：

document.location = 'path/to/servlet';

web.xml中的servlet映射看起来像这样：

<servlet-mapping>
    <servlet-name>someServlet</servlet-name>
    <url-pattern>/path/to/servlet*</url-pattern>
</servlet-mapping>

Answer 5

   function callServlet()


{
 document.getElementById("adminForm").action="./Administrator";
 document.getElementById("adminForm").method = "GET";
 document.getElementById("adminForm").submit();

}

<button type="submit"  onclick="callServlet()" align="center"> Register</button>

Answer 6

var button = document.getElementById("<<button-id>>");
button.addEventListener("click", function() {
  window.location.href= "<<full-servlet-path>>" (eg. http://localhost:8086/xyz/servlet)
});

从javascript调用java servlet

6 个答案:

Javascript代码：

Servlet java代码：

HTML文档

修改