Ответ 1
Итак, вы хотите запустить Ajax вызов сервлета? Для этого вам нужен объект XMLHttpRequest
в JavaScript. Вот пример, совместимый с 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 способа запуска адиаксических запросов и прохождения дерева HTML DOM я рекомендую захватить jQuery. Здесь переписывается выше в jQuery:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.get('myservlet', function(data) {
alert(data);
});
</script>
В любом случае, сервлет на сервере должен отображаться на url-pattern
из /myservlet
(вы можете изменить это на свой вкус) и иметь как минимум doGet()
реализованы и записывают данные в ответ следующим образом:
String data = "Hello World!";
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(data);
Это должно показать Hello World!
в предупреждении JavaScript.
Вы также можете использовать doPost()
, но тогда вы должны использовать 'POST'
в xhr.open()
или использовать $.post()
вместо $.get()
в jQuery.
Затем, чтобы отобразить данные на странице 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);
});
});
См. также: