我正在尝试使用MVC设计模式创建一个Web应用程序。对于GUI部分,我想使用JavaScript。并用于控制器Java Servlet。
现在,我从未真正使用过JavaScript,因此很难弄清楚如何从JavaScript调用Java Servlet,以及如何从Servlet获取响应。
有人可以帮我吗?
因此,您想将Ajax调用激发到servlet吗?为此,您需要XMLHttpRequestJavaScript中的对象。这是Firefox兼容的示例:
XMLHttpRequest
<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请求和遍历HTMLDOM树的最佳跨浏览器兼容方式,我建议使用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都应映射到的url-pattern上/myservlet(您可以根据自己的喜好进行更改),并且至少已doGet()实现并将数据写入响应,如下所示:
url-pattern
/myservlet
doGet()
String data = "Hello World!"; response.setContentType("text/plain"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(data);
这应该显示Hello World!在JavaScript警报中。
Hello World!
您当然也可以使用doPost(),但是您应该在jQuery中使用'POST'inxhr.open()或use $.post()代替$.get()。
doPost()
'POST'
xhr.open()
$.post()
$.get()
然后,要在HTML页面中显示数据,您需要操纵HTMLDOM。例如,您有一个
<div id="data"></div>
在您想要显示响应数据的HTML中,则可以代替alert(data)第一个示例:
alert(data)
document.getElementById("data").firstChild.nodeValue = data;
在jQuery示例中,您可以以更简洁,更漂亮的方式执行此操作:
$('#data').text(data);