问题描述
我想创建使用MVC设计模式的Web应用程序。对于GUI部分我想使用JavaScript。而对于控制器的Java小。
I am trying to create a web application using the MVC design pattern. For the GUI part I would like to use JavaScript. And for the controller Java Servlets.
现在我从来没有真正曾与JavaScript的，所以我有一个很难搞清楚如何从JavaScript以及如何调用Java Servlet来得到了Servlet的响应。
Now I have never really worked with JavaScript, so I'm having a hard time figuring out how to call a Java Servlet from JavaScript and how to get the response from the Servlet.
任何人可以帮助我吗？
推荐答案
所以，你想火阿贾克斯调用这个servlet ？对于您所需要的 XMLHtt prequest 在JavaScript对象。这里有一个Firefox兼容的例子：
So you want to fire Ajax calls to the servlet? For that you need the XMLHttpRequest object in JavaScript. Here's a Firefox compatible example:
<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树的最佳crossbrowser兼容的方式，我建议抓住 jQuery的。下面是上面的jQuery中重写：
This is however very verbose and not really crossbrowser compatible. For the best crossbrowser compatible way of firing ajaxical requests and traversing the HTML DOM tree, I recommend to grab jQuery. Here's a rewrite of the above in jQuery:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.get('myservlet', function(data) {
alert(data);
});
</script>
无论哪种方式，在服务器上的Servlet应映射到 / myservlet 的 URL模式（你可以更改为自己的口味），并至少有<$c$c>doGet()实现，并且将数据写入的响应如下所示：
Either way, the Servlet on the server should be mapped on an url-pattern of /myservlet (you can change this to your taste) and have at least doGet() implemented and write the data to the response as follows:
String data = "Hello World!";
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(data);
本应显示的Hello World！中的JavaScript警告。
This should show Hello World! in the JavaScript alert.
您也可以使用<$c$c>doPost(),但你应该使用POST在 xhr.open（）或使用的>而不是的 jQuery的。
You can of course also use doPost(), but then you should use 'POST' in xhr.open() or use $.post() instead of $.get() in jQuery.
然后，显示在HTML页面中的数据，你需要操作 HTML DOM 。例如，你有一个
Then, to show the data in the HTML page, you need to manipulate the HTML DOM. For example, you have a
<div id="data"></div>
在你想要显示的响应数据的HTML，那么你可以这样反而做警报（数据）第1例子：
document.getElementById("data").firstChild.nodeValue = data;
在jQuery的例子，你可以在一个更简洁和漂亮的方式做到这一点：
In the jQuery example you could do this in a more concise and nice way:
$('#data').text(data);
要走得更远一些步骤，你想有一个容易访问的数据格式，传输更复杂的数据。常见的格式是XML和JSON。最后一个是最preferred因为它更简洁，可用于Java和JavaScript的一个非常容易的方式。在Java中，你可以使用谷歌GSON 的转换fullworthy Java对象到JSON，反之亦然。
To go some steps further, you'd like to have an easy accessible data format to transfer more complex data. Common formats are XML and JSON. The last one is most preferred since it's more concise and can be used in both Java and JavaScript on a very easy manner. In Java, you can use Google Gson to convert fullworthy Java objects to JSON and vice versa.
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（） 得到它瞬间。让我们来显示它在＆LT;表＆gt;
$.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 and JavaScript
- JavaScript tutorial
- JSON tutorial
- jQuery tutorials
这篇关于从JavaScript调用一个Java servlet的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！