Для взаимодействия пользователя серверной частью очень часто нужно использовать запросы, которые позволяют отправлять и принимать данные без обновления текущей страницы иначе говоря асинхронные AJAX — запросы. В сегодняшнем примере покажем, как сделать запрос со страницы пользователя на сервер, где у нас стоит сервер Tomcat 8, а серевер будет асинхронно отвечать пользователю.
Для того, чтобы отправить ассинхронные запросы можно воспользоваться еще и апплетами, которые будут грузиться в HTML — код на стороне клиента, но минусом такого подхода является необходимость дополнительно устанавливать клиенту плагины для браузера, а иногда, этот плагин, из-за несовметимости или блокировки будет не работать и нам эта возня, как и клиенту вообще не нужно…
Что потребуется? Потребуется:
- Пользовательская HTML — страница, на котором работает AJAX — код через jQuery;
- Сервер, на котором установлен Tomcat … 7 — 8 … или любой другой, поддерживающий сервлеты;
- Любимая Java — IDE(NetBeans, Eclipse, IntelliJ IDEA, …).
Постановка задачи
Допустим есть страница index.html, на котором есть формы ввода пароля и логина. Наша задача:
- асинхронно отправить со стороны клиента index.html данные вводимого пользователя на сторону сервера через AJAX;
- обработать эти данные(проверить наличие в БД, проверить на допустимость символов, на количество символов и т.д.) через сервлет AuthServlet.java;
- асинхронно отправить данные о статусе входа со стороны сервера на сторону клиента через тот же AJAX.
Практика
HTML — страница, которая показывается клиенту состоит из пару полей логина и пароля и одной кнопки
Ниже представлен код клиентской страницы auth.html
<!DOCTYPE html>
<html>
<head>
<title>Авторизация через через AJAX-JAVA</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<style>
body{
background-color: azure;
text-align: center;
font-family: "Lucida Sans Unicode"
}
.auth-forms{
width: 30%;
margin: auto;
background-color: background;
text-align: center;
margin-top: 200px;
}
.auth-forms input, button{
margin: 10px;
height: 30px;
padding: 3px;
border: none;
border-radius: 2px;
}
#auth-info{
margin: 5px;
height: 50px;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div>
<form class="auth-forms">
<div id="auth-info"></div>
<input type="text" placeholder="Логин" id="login"/>
<br/>
<input type="password" placeholder="Пароль" id="password"/>
<br/>
</form>
<br/>
<button id="button">Вход</button>
</div>
</body>
</html>
Код для обработки событий на стороне клиента в виде файла JavaScript — script.js
$(document).ready(function(){
$("#button").click(function(){
var data = {};
data = {"login":$("#login").val(), "password":$("#password").val()};
//
$.ajax
({
type: "POST",//Метод передачи
data: data,//Передаваемые данные в JSON - формате
url: 'AuthServlet',//Название сервлета
success:function(serverData)//Если запрос удачен
{
$("#auth-info").css({"background-color":serverData.backgroundColor, "height": "50px", "color":"white"});
$("#auth-info").html(serverData.serverInfo);
},
error: function(e)//Если запрос не удачен
{
$("#auth-info").css({"background-color":"#CC6666", "height": "50px", "color":"white"});
$("#auth-info").html("Запрос не удался!");
}
});
});
});
Код для проверки и переотправки информационных сообщений о статусе авторизации представлен сервлетом AuthServlet.java
package ru.websofter.smilerado;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONException;
import org.json.JSONObject;
/**
*
* @author WebSofter
*/
@WebServlet(name = "AuthServlet", urlPatterns = {"/AuthServlet"})
public class AuthServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException, JSONException {
response.setContentType("application/json");//Отправляем от сервера данные в JSON -формате
response.setCharacterEncoding("utf-8");//Кодировка отправляемых данных
try (PrintWriter out = response.getWriter()) {
JSONObject jsonEnt = new JSONObject();
if(request.getParameter("login").equals("myLogin")&&request.getParameter("password").equals("myPassword"))
{
jsonEnt.put("backgroundColor","#99CC66");
jsonEnt.put("serverInfo", "Вы вошли!");
}else
{
jsonEnt.put("backgroundColor","#CC6666");
jsonEnt.put("serverInfo", "Введен неправильный логин или пароль!");
}
out.print(jsonEnt.toString());
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
processRequest(request, response);
} catch (JSONException ex) {
Logger.getLogger(AuthenticationServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
processRequest(request, response);
} catch (JSONException ex) {
Logger.getLogger(AuthenticationServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
@Override
public String getServletInfo() {
return "Short description";
}//
}
После ввода логина и пароля сервер проверяет на наличие и соответствие и, в соответствии со статусом авторизации, выдает сообщение либо о правильности ввода или об ошибочности
