我正在尝试使用 MVC 设计模式创建 Web 应用程序。对于 GUI 部分，我想使用 JavaScript。而对于控制器 Java Servlets。
现在我从来没有真正使用过 JavaScript，所以我很难弄清楚如何从 JavaScript 调用 Java Servlet 以及如何从 Servlet 获得响应。
谁能帮帮我？
【问题讨论】：
标签： java javascript ajax web-applications servlets
所以你想触发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', '${pageContext.request.contextPath}/myservlet', true);
xhr.send(null);
</script>
然而，这非常冗长并且不是真正的跨浏览器兼容。对于触发 ajaxical 请求和遍历 HTML DOM 树的最佳跨浏览器兼容方式，我建议使用 jQuery。这是上面在 jQuery 中的重写：
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.get('${pageContext.request.contextPath}/myservlet', function(data) {
alert(data);
});
</script>
无论哪种方式，服务器上的 Servlet 都应该映射到 /myservlet 的 url-pattern 上（您可以根据自己的喜好更改此设置）并至少实现 doGet() 并将数据写入响应，如下所示：
String data = "Hello World!";
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(data);
这应该在 JavaScript 警报中显示 Hello World!。
当然你也可以使用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。有关它们的更详细示例，请前往How to use Servlets and Ajax?
【讨论】：
var button = document.getElementById("<<button-id>>");
button.addEventListener("click", function() {
window.location.href= "<<full-servlet-path>>" (eg. http://localhost:8086/xyz/servlet)
});
【讨论】：
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>
【讨论】：
此处的代码将使用 AJAX 将文本动态打印到 HTML5 文档 （Ajax代码类似于book Internet & WWW (Deitel)）：
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);
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)");
}
}
<div id = "text"></div>
当我刚接触网络编程时，我在上面写了答案。我让它保持不变，但是 javascript 部分肯定应该在 jQuery 中，它比原始 javascript 简单 10 倍。
【讨论】：
对不起，我读的是 jsp 而不是 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>
【讨论】：