从JavaScript调用一个Java servlet

我正在尝试使用MVCdevise模式创build一个Web应用程序。 对于GUI部分，我想使用JavaScript。 并为控制器Java Servlets。

现在我从来没有真正使用JavaScript，所以我很难搞清楚如何从JavaScript调用Java Servlet以及如何获得Servlet的响应。

有人可以帮我吗？

Answer 1

所以你想发起Ajax调用servlet？ 为此，您需要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兼容。 为了发布Ajax请求和遍历HTML DOM树的最佳交叉浏览器兼容的方式，我build议抓住jQuery 。 这是在jQuery上面的重写：

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

无论哪种方式，服务器上的Servlet应映射到/myservlet的url-pattern （可以根据自己的喜好进行更改），并至less执行doGet() ，并将数据写入响应，如下所示：

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

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

你当然也可以使用doPost() ，但是你应该在xhr.open()使用'POST' ，或者在jQuery中使用$.post()而不是$.get() 。

然后，要显示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

这里的代码将使用AJAXdynamic地将文本打印到HTML5文档（Ajax代码类似于书籍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> 

编辑

我刚刚在networking编程的时候就写了上面的答案。 我让它站立，但JavaScript部分应该肯定是在jQuery，而不是原始的JavaScript的10倍。

Answer 3

我真的build议你使用jQuery的JavaScript调用和JSR311的一些实现，如泽西岛的服务层，这将委派给你的控制器。

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

Answer 4

对不起，我读的不是JavaScript。 你需要做一些像（注意，这是一个相对的url，可能会有所不同，这取决于这个JavaScript所在的文件的url）：

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

web.xml中的servlet映射如下所示：

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