Отправка AJAX — запросов к сервлету Java

Для взаимодействия пользователя серверной частью очень часто нужно использовать запросы, которые позволяют отправлять и принимать данные без обновления текущей страницы иначе говоря асинхронные 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-forms-of-post-servlet-ajax-login

Ниже представлен код клиентской страницы 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";
    }// 

}

После ввода логина и пароля сервер проверяет на наличие и соответствие и, в соответствии со статусом авторизации, выдает сообщение либо о  правильности ввода или об ошибочности

auth-forms-of-post-servlet-ajax-login-ok-info

 

auth-forms-of-post-servlet-ajax-login-no-ok-info