Java, AJAX и JSON. Часть 3: обработка ошибок и как попасть в success

Egor Zimowski

Я уже написал пару статей, как могут взаимодействовать сервер и клиент с помощью запросов ajax. Страница не перезагружается, всё происходит быстро – сплошное наслаждение. Я описывал, как обрабатывать запрос и возвращать строки, объекты или списки объектов. Но недавно я столкнулся с необходимостью ещё и ошибку обработать, поэтому эта статья будет о такой ситуации.

Ошибки я вскользь упоминал в первой статье, но тогда они мне были не нужны, и в реальной жизни я их не использовал. В жизни я использовал только часть complete – функция оттуда выполняется в любом случае: будет ли ошибка или успешное выполнение. Если сравнивать с try-catch-finally, то это похоже на finally.

Ошибки я вскользь упоминал в первой статье, но тогда они мне были не нужны, и в реальной жизни я их не использовал. В жизни я использовал только часть complete – функция оттуда выполняется в любом случае: будет ли ошибка или успешное выполнение. Если сравнивать с try-catch-finally, то это похоже на finally. 

         $.ajax
            ({
                type: "GET",
                data: params,
                url: "/servlet",
	        complete: function(data) 
                {
                    alert('all finished') 
                },            
                success:function(data)
                {
                    alert(data)
                }, 
                error: function () {
                   alert('error');
               }
            });

Но complete нам нужна не всегда, поэтому в данных примерах я эту часть вообще использовать не буду, и нас интересуют два других части ajax-запроса.

Обработка ошибок, связанных с AJAX запросом

Чтобы всё было по-честному, в бэке я назначаю код ошибки. В данном случае выбрал 400. Также можно добавить сообщение об ошибке, если вы хотите, чтобы бэк определял, что выведется на экран у пользователя. Можно добавить такой код, например, в обработку исключения.

          catch (Exception ex) {
               response.setStatus(400);
               response.setCharacterEncoding("UTF-8");
               response.getWriter().write( "Error Message " + ex.getMessage);
               response.getWriter().flush();
               response.flushBuffer();
               return;
          }

Тем временем обработка ошибки во фронте будет выглядеть следующим образом:

          error : function(xhr, status, error) {
               console.log("Error occured. Status: " + status);
               $("#errorDiv").text(xhr.responseText);
          }

В блок с id errorDiv, который у меня уже был заранее описан в коде html, мы добавляем текст ошибки. А статус выводим в консоль.

Если блок у вас заранее не создан, можно его куда-нибудь приписать:

        $("#someDiv").append("<div><b>Error!</b></div>");

success: Успешные запросы AJAX

С ошибкой всё более-менее понятно, а вот в success я никак не мог попасть. Пока не узнал, что, оказывается, надо отправить слово success с сервлета. Да, статус никакой роли не играет. Хоть там 200, хоть что – без волшебного слова все ваши ответы считаются ошибкой. Мне это показалось нелогичным, поэтому я и решил написать эту статью. ‘

Итак, допустим, мы хотим получить из базы некий объект и передать его на нашу jsp-страницу. Для этого мы из него делаем Json объект:

     @Override
     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     
               Gson gson = new Gson(); 
               JsonObject responseJson = new JsonObject();
 
               Object someObject = getObject(String someParameter);
               JsonElement jsonObject = gson.toJsonTree(someObject);
               responseJson.addProperty("success", true);
               responseJson.add("info", jsonObject);
               response.getWriter().println(responseJson .toString());

               response.flushBuffer();
               return;

       }

В этом небольшом сервлете мы получаем некоторый объект someObject (например, из базы данных) и потом преобразуем его в элемент Json. И добавляем в главный объект responseJson, куда так же добавляем свойство success.

Обработка этого ответа в клиенте будет выглядеть следующим образом:

	 success: function(data) {
               $("#someDiv").append("<b>ID:</b> " + data.someObject.id );
         },

Я вывел на экран только идентификатор объекта, но вы можете по очереди доставать любое поле и обрабатывать их, как хотите.

Можно ещё не преобразовывать целый объект в Json, а понемногу наполнять ответ с сервера самостоятельно:

       @Override
       protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     
              Gson gson = new Gson(); 
              JsonObject responseJson = new JsonObject();
 
              Object someObject = getObject(String someParameter);
              JsonElement jsonObject = gson.toJsonTree(someObject);
              responseJson.addProperty("success", true);
              responseJson.addProperty("propertyFirst", 1000);
              responseJson.addProperty("propertySecond", “Some Text”);
              response.getWriter().println(responseJson .toString());

              response.flushBuffer();
              return;
        }

В Json можно помещать всё, что угодно: числа, строки, списки… Главное, потом правильно их достать из ответа клиенту.

        success: function(data) {
              $("#someDiv").append("<p>First: " + data.propertyFirst + “</p>");
              $("#someDiv").append("<p>Second: " + data.propertySecond + “</p>");
        },

На этом всё. Надеюсь, кому-то это было полезно и спасёт от часа копания на stackoverflow 🙂

Оставьте комментарий