Действительно, ключевое слово «ajax»: Асинхронный JavaScript и XML . Однако в последние годы это более чем часто асинхронный JavaScript и JSON . По сути, вы позволяете JS выполнять асинхронный HTTP-запрос и обновлять дерево DOM HTML на основе данных ответа.
Поскольку это довольно утомительная работа, чтобы заставить его работать во всех браузерах (особенно Internet Explorer и других), существует множество библиотек JavaScript, которые упрощают это в отдельных функциях и охватывают как можно больше специфичные для браузера ошибки / причуды под капотами, такие как jQuery , Prototype , Mootools . Поскольку jQuery наиболее популярен в наши дни, я буду использовать его в следующих примерах.
Пример Kickoff, возвращающий String в виде простого текста
Создайте /some.jsp, как показано ниже (примечание: код не ожидает, что файл JSP будет помещен в подпапку, если вы это сделаете, измените URL сервлета соответствующим образом):
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 4112686</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseText) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
$("#somediv").text(responseText); // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
});
});
</script>
</head>
<body>
<button id="somebutton">press here</button>
<div id="somediv"></div>
</body>
</html>
Создайте сервлет с doGet() методом, который выглядит следующим образом:
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String text = "some text";
response.setContentType("text/plain"); // Set content type of the response so that jQuery knows what it can expect.
response.setCharacterEncoding("UTF-8"); // You want world domination, huh?
response.getWriter().write(text); // Write response body.
}
Сопоставьте этот сервлет с шаблоном URL-адреса /someservlet или /someservlet/*, как показано ниже (очевидно, шаблон URL-адреса свободен по вашему выбору, но вам потребуется изменить URL-адрес someservlet в примерах кода JS для всех место соответственно):
@WebServlet("/someservlet/*")
public class SomeServlet extends HttpServlet {
// ...
}
Или, если вы еще не находитесь в контейнере, совместимом с Servlet 3.0 (Tomcat 7, Glassfish 3, JBoss AS 6 и т. Д. Или более поздней версии), затем сопоставьте его web.xml по старинке (см. Также вики-страница нашего сервлета ):
<servlet>
<servlet-name>someservlet</servlet-name>
<servlet-class>com.example.SomeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>someservlet</servlet-name>
<url-pattern>/someservlet/*</url-pattern>
</servlet-mapping>
Теперь откройте http://localhost:8080/context/test.jsp в браузере и нажмите кнопку. Вы увидите, что содержимое div обновляется ответом сервлета.
Возвращая List<String> как JSON
Используя JSON вместо открытого текста в качестве формата ответа, вы даже можете продвинуться дальше. Это учитывает больше динамики. Во-первых, вы хотели бы иметь инструмент для преобразования между объектами Java и строками JSON. Их также много (см. Обзор в нижней части этой страницы ). Мой личный фаворит - Google Gson . Загрузите и поместите его JAR-файл в папку /WEB-INF/lib вашего веб-приложения.
Вот пример, который отображает List<String> как <ul><li>. Сервлет:
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<String> list = new ArrayList<>();
list.add("item1");
list.add("item2");
list.add("item3");
String json = new Gson().toJson(list);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
Код JS:
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseJson) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
var $ul = $("<ul>").appendTo($("#somediv")); // Create HTML <ul> element and append it to HTML DOM element with ID "somediv".
$.each(responseJson, function(index, item) { // Iterate over the JSON array.
$("<li>").text(item).appendTo($ul); // Create HTML <li> element, set its text content with currently iterated item and append it to the <ul>.
});
});
});
Обратите внимание, что jQuery автоматически анализирует ответ как JSON и дает вам непосредственно объект JSON (responseJson) в качестве аргумента функции, когда вы устанавливаете тип содержимого ответа на application/json. Если вы забудете установить его или использовать значение по умолчанию text/plain или text/html, то аргумент responseJson не даст вам объект JSON, а будет простой ванильной строкой, и вам придется вручную возиться с JSON.parse() впоследствии, что совершенно не нужно, если вы правильно установили тип контента.
Возвращая Map<String, String> как JSON
Вот еще один пример, который отображает Map<String, String> как <option>:
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Map<String, String> options = new LinkedHashMap<>();
options.put("value1", "label1");
options.put("value2", "label2");
options.put("value3", "label3");
String json = new Gson().toJson(options);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
И JSP:
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseJson) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
var $select = $("#someselect"); // Locate HTML DOM element with ID "someselect".
$select.find("option").remove(); // Find all child elements with tag name "option" and remove them (just to prevent duplicate options when button is pressed again).
$.each(responseJson, function(key, value) { // Iterate over the JSON object.
$("<option>").val(key).text(value).appendTo($select); // Create HTML <option> element, set its value with currently iterated key and its text content with currently iterated item and finally append it to the <select>.
});
});
});
с
<select id="someselect"></select>
Возвращая List<Entity> как JSON
Вот пример, который отображает List<Product> в <table>, где класс Product имеет свойства Long id, String name и BigDecimal price. Сервлет:
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Product> products = someProductService.list();
String json = new Gson().toJson(products);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
код JS:
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseJson) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
var $table = $("<table>").appendTo($("#somediv")); // Create HTML <table> element and append it to HTML DOM element with ID "somediv".
$.each(responseJson, function(index, product) { // Iterate over the JSON array.
$("<tr>").appendTo($table) // Create HTML <tr> element, set its text content with currently iterated item and append it to the <table>.
.append($("<td>").text(product.id)) // Create HTML <td> element, set its text content with id of currently iterated product and append it to the <tr>.
.append($("<td>").text(product.name)) // Create HTML <td> element, set its text content with name of currently iterated product and append it to the <tr>.
.append($("<td>").text(product.price)); // Create HTML <td> element, set its text content with price of currently iterated product and append it to the <tr>.
});
});
});
Возвращая List<Entity> как XML
Вот пример, который делает то же самое, что и предыдущий пример, но затем с XML вместо JSON. Используя JSP в качестве генератора вывода XML, вы увидите, что кодировать таблицу и все менее утомительно. JSTL гораздо более полезен, поскольку вы можете использовать его для перебора результатов и выполнения форматирования данных на стороне сервера. Сервлет:
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Product> products = someProductService.list();
request.setAttribute("products", products);
request.getRequestDispatcher("/WEB-INF/xml/products.jsp").forward(request, response);
}
Код JSP (примечание: если вы поместите <table> в <jsp:include>, он может быть повторно использован в другом месте в ответе не-ajax):
<?xml version="1.0" encoding="UTF-8"?>
<%@page contentType="application/xml" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<data>
<table>
<c:forEach items="${products}" var="product">
<tr>
<td>${product.id}</td>
<td><c:out value="${product.name}" /></td>
<td><fmt:formatNumber value="${product.price}" type="currency" currencyCode="USD" /></td>
</tr>
</c:forEach>
</table>
</data>
код JS:
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseXml) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response XML...
$("#somediv").html($(responseXml).find("data").html()); // Parse XML, find <data> element and append its HTML to HTML DOM element with ID "somediv".
});
});
Теперь вы, вероятно, поймете, почему XML настолько мощнее, чем JSON, для конкретной цели обновления HTML-документа с использованием Ajax. JSON забавен, но в целом полезен только для так называемых «публичных веб-сервисов». Фреймворки MVC, такие как JSF , используют XML под прикрытием для своей магии ajax.
Аясификация существующей формы
Вы можете использовать jQuery $.serialize(), чтобы легко адаптировать существующие формы POST без необходимости собирать и передавать отдельные входные параметры формы. Предполагая, что существующая форма прекрасно работает без JavaScript / jQuery (и, следовательно, изящно ухудшается, когда в enduser отключен JavaScript):
<form id="someform" action="someservlet" method="post">
<input type="text" name="foo" />
<input type="text" name="bar" />
<input type="text" name="baz" />
<input type="submit" name="submit" value="Submit" />
</form>
Вы можете постепенно улучшать его с помощью ajax, как показано ниже:
$(document).on("submit", "#someform", function(event) {
var $form = $(this);
$.post($form.attr("action"), $form.serialize(), function(response) {
// ...
});
event.preventDefault(); // Important! Prevents submitting the form.
});
В сервлете вы можете различать обычные запросы и запросы ajax, как показано ниже:
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String foo = request.getParameter("foo");
String bar = request.getParameter("bar");
String baz = request.getParameter("baz");
boolean ajax = "XMLHttpRequest".equals(request.getHeader("X-Requested-With"));
// ...
if (ajax) {
// Handle ajax (JSON or XML) response.
} else {
// Handle regular (JSP) response.
}
}
Плагин jQuery Form делает меньше или больше того же, что и в примере jQuery, но он имеет дополнительную прозрачную поддержку форм multipart/form-data, как требуется для загрузки файлов.
Ручная отправка параметров запроса сервлету
Если у вас вообще нет формы, но вы просто хотите взаимодействовать с сервлетом «в фоновом режиме», с помощью которого вы хотите разместить некоторые данные, тогда вы можете использовать jQuery $.param() для простого преобразования объекта JSON в строку запроса в кодировке URL.
var params = {
foo: "fooValue",
bar: "barValue",
baz: "bazValue"
};
$.post("someservlet", $.param(params), function(response) {
// ...
});
Тот же метод doPost(), как показано здесь выше, можно использовать повторно. Обратите внимание, что приведенный выше синтаксис также работает с $.get() в jQuery и doGet() в сервлете.
Отправка объекта JSON вручную сервлету
Однако если вы по какой-то причине намереваетесь отправить объект JSON целиком, а не как отдельные параметры запроса, вам нужно будет сериализовать его в строку, используя JSON.stringify() (не является частью jQuery) и дать команду jQuery установить тип содержимого запроса application/json вместо (по умолчанию) application/x-www-form-urlencoded. Это не может быть сделано с помощью $.post() удобной функции, но должно быть сделано с помощью $.ajax(), как показано ниже.
var data = {
foo: "fooValue",
bar: "barValue",
baz: "bazValue"
};
$.ajax({
type: "POST",
url: "someservlet",
contentType: "application/json", // NOT dataType!
data: JSON.stringify(data),
success: function(response) {
// ...
}
});
Обратите внимание, что многие стартеры смешивают contentType с dataType. contentType представляет тип тела запроса . dataType представляет (ожидаемый) тип тела ответа , что обычно не требуется, поскольку jQuery уже автоматически определяет его на основе заголовка Content-Type ответа.
Затем, чтобы обработать объект JSON в сервлете, который отправляется не как отдельные параметры запроса, а как целая строка JSON описанным выше способом, вам нужно только вручную проанализировать тело запроса, используя инструмент JSON вместо используя getParameter() обычным способом. А именно, сервлеты не поддерживают отформатированные запросы application/json, а только отформатированные запросы application/x-www-form-urlencoded или multipart/form-data. Gson также поддерживает анализ строки JSON в объект JSON.
JsonObject data = new Gson().fromJson(request.getReader(), JsonObject.class);
String foo = data.get("foo").getAsString();
String bar = data.get("bar").getAsString();
String baz = data.get("baz").getAsString();
// ...
Обратите внимание, что все это более неуклюже, чем просто использование $.param(). Обычно вы хотите использовать JSON.stringify(), только если целевой службой является, например, служба JAX-RS (RESTful), которая по какой-то причине может использовать только строки JSON, а не обычные параметры запроса.
Отправка перенаправления из сервлета
Важно понимать и понимать, что любой вызов sendRedirect() и forward() сервлетом по запросу ajax будет только перенаправлять или перенаправлять сам запрос ajax , а не основной документ / окно, где запрос AJAX возник. В этом случае JavaScript / jQuery будет получать только перенаправленный / перенаправленный ответ как переменную responseText в функции обратного вызова. Если он представляет целую страницу HTML, а не специфический для ajax ответ XML или JSON, все, что вы можете сделать, это заменить текущий документ на него.
document.open();
document.write(responseText);
document.close();
Обратите внимание, что это не меняет URL, как видит конечный пользователь в адресной строке браузера. Так что есть проблемы с закладкой. Поэтому гораздо лучше просто вернуть «инструкцию» для JavaScript / jQuery, чтобы выполнить перенаправление, а не возвращать весь контент перенаправленной страницы. Например. возвращая логическое значение или URL.
String redirectURL = "http://example.com";
Map<String, String> data = new HashMap<>();
data.put("redirect", redirectURL);
String json = new Gson().toJson(data);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
function(responseJson) {
if (responseJson.redirect) {
window.location = responseJson.redirect;
return;
}
// ...
}
Смотри также: