Для взаимодействия пользователя серверной частью очень часто нужно использовать запросы, которые позволяют отправлять и принимать данные без обновления текущей страницы иначе говоря асинхронные 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"; }// }
После ввода логина и пароля сервер проверяет на наличие и соответствие и, в соответствии со статусом авторизации, выдает сообщение либо о правильности ввода или об ошибочности