Как оформить ответ на Объект XMLHttpRequest?

Question

[Viktoria Smirnova]

Везде очень подробно расписано как Объект XMLHttpRequest отправляет запрос на сервер и как он получает ответ, но нигде толком не освещено как серверу эту «посылку» так сказать завернуть и отправить обратно?

Вопрос как Servlet возвращает ответ. Мне нужно, что бы сервлет вернул отработанный моим бизнесом запрос к БД, а именно таблицу из БД. Вот как это делаеться? Вопрос наверно больше к джавистам.


Запрос XMLHttpRequest

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = "Hello";
    }
};
xhttp.open("POST", 'Servlet', true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("val="+ val);
<p id="demo"></p>

Comments

[Сергей Горностаев]

Сервер зачастую даже не различает пришёл ли к нему запрос из XMLHttpRequest или нет. Просто верните в ответе те данные, которые ожидает ваш javascript-код.

[Viktoria Smirnova]

Сергей Горностаев, да, но метод getRequestDispatcher перезагрузит страницу, а у меня модель AJAX. Мне таблица без перезагрузки браузера нужна.

[Сергей Горностаев]

Viktoria Smirnova, а зачем вы вызываете getRequestDispatcher? Не надо перенаправлять запрос, просто возвращайте ответ прямо из сервлета.

[Viktoria Smirnova]

Сергей Горностаев, Плиз, покажите это куском кода

out.println(...)

имеете ввиду?

[Сергей Горностаев]

Viktoria Smirnova, да.

Answer 1

[Сергей Горностаев]

private ResultSet fetchRows() {
    ...
}

private JSONObject toJson(ResultSet rows) {
    ...
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    try (PrintWriter out = response.getWriter()) {
        out.append(toJson(fetchRows()));
    }
}

<div id="output"></div>
<button id="button">Нажми меня</button>

var output = document.getElementById('output');
var button = document.getElementById('button');

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) return;

    if (xhr.status == 200) {
        data = JSON.parse(xhr.responseText);
        response = ['<table>', '<tr><th>Имя</th><th>Фамилия</th></tr>'];
        for (var x = 0; x < data.persons.length; x++) {
            response.push('<tr>');
            response.push('<td>' + data.persons[x].firstName + '</td>');
            response.push('<td>' + data.persons[x].lastName + '</td>');
            response.push('</tr>');
        }
        response.push('</table>');
        output.innerHTML = response.join('');
    }
    else {
        alert('Ошибка! ' + xhr.statusText);
    }
    
    button.innerHTML = 'Нажми меня';
    button.disabled = false;
};

button.addEventListener('click', function(event) {
    this.innerHTML = 'Загружаю...';
    this.disabled = true;
    
    xhr.open('POST', '/some/servlet/url', true);
    xhr.send();
});

Comments

[Viktoria Smirnova]

Сергей Горностаев Сергей, большое спасибо, за пример, есть некоторые вопросы к коду правильно ли я понимаю?

private ResultSet fetchRows() {
...
}

- это мой SQL запрос, который я прописываю в отдельном классе.

private JSONObject toJson(ResultSet rows) {
...
}

- это преобразование строки ResultSet в строку JSON, который также в отдельном классе прописываеться.

в коде JavaScript data и response это переменные и видимо нужно их указать как var data и var response.

[Сергей Горностаев]

Viktoria Smirnova, метод fetchRows - это код извлечения данных из БД. Метод toJson - это код преобразовывающий извлечённые данные в строку формата JSON.

[Alek200977]

Добрый день!
Попробовал данный код.
Сервлет:

import org.jose4j.json.internal.json_simple.JSONObject;
import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/check")
public class FirstServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println(request.getReader().readLine());
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("key", "value");
        try (PrintWriter writer = response.getWriter()) {
            writer.append(String.valueOf(jsonObject));
        }
    }
}

Сервлет читает запрос (в консоль выводится тело POST-запроса), но в браузере ответа нет (статус ответа 0).
Может надо какие-то настройки сделать в web-xml или подключить какую-то библиотеку?