Лучше ли вводить HTML через сервер или через JavaScript? - PullRequest
5 голосов
/ 16 ноября 2011

В моем текущем проекте я довольно часто обращаюсь к базе данных. Для этого я выполняю вызовы в свой Java-сервлет через вызовы jQuery Get и Post. Мне было интересно, лучше ли было бы создавать какой-либо HTML-код, используя данные, которые я собираю из базы данных в сервлете, прежде чем я отправлю его обратно в jQuery, или мне нужно сделать HTML-инъекцию только с помощью JavaScript? Например, допустим, у меня есть таблица базы данных с идентификатором пользователя и именем пользователя. Если бы я хотел создать поле выбора из этой таблицы, что было бы лучше? Или есть даже лучший способ? Не лучше ли просто отправить исходную форму данных, полученных из базы данных, из сервлета в JavaScript, что позволит ему обрабатывать все форматирование HTML?

Метод 1 (Java)

С учетом следующего HTML / JavaScript

<html>
    <head>
        <script type="text/javascript" src="scripts/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.get("servlet?cmd=getUsers", function(data) {
                    $("#select").html(data);
                }, "html");
            });
        </script>
    </head>
    <body>
        <div id="select"></div>
    </body>
</html>

Использование следующего сервлета

PrintWriter writer = response.getWriter();
response.setContentType("text/html");

writer.println("<select id='userSelect' name='user'>");
while(resultSet.next()) {
    String userId = resultSet.getString("ixUser");
    String userName = resultSet.getString("sName");

    writer.println("<option value='" + userId + "'>" + userName + "</option>");
}
writer.println("</select>");

Метод 2 (JavaScript)

С учетом следующего HTML / JavaScript

<html>
    <head>
        <script type="text/javascript" src="scripts/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.get("servlet?cmd=getUsers", function(data) {
                    $("#select").html("<select id='userSelect' name='user'>");
                    $(data).find("user").each(function() {
                        var id = $(this).find("id").text();
                        var name = $(this).find("name").text();

                        $("#userSelect").append("<option value='" + id + "'>" + name + "</option>");
                    });
                    $("#select").append("</select>");
                }, "xml");
            });
        </script>
    </head>
    <body>
        <div id="select"></div>
    </body>
</html>

Использование следующего сервлета

PrintWriter writer = response.getWriter();
response.setContentType("text/xml");

writer.println("<xml>");
while(resultSet.next()) {
    String userId = resultSet.getString("ixUser");
    String userName = resultSet.getString("sName");

    writer.println("<user>");
    writer.println("<id>" + userid + "</id>");
    writer.println("<name>" + userName + "</name>");
    writer.println("</user>");
}
writer.println("</xml>");

Ответы [ 5 ]

3 голосов
/ 16 ноября 2011

Я бы выбрал отправку необработанных (ну, в частности, JSON) данных клиенту, а Javascript позаботится о шаблонах.Почему?

Разделение задач : код вашего сервера не должен знать логику представления.

Меньшая пропускная способность : если вы можете сохранитьнесколько к / запрос (по крайней мере), почему бы и нет?

0 голосов
/ 16 ноября 2011

метод 1, так как вы не достаточно удобны с методом 2.

несколько слов о методе 2. выберите между конкатенацией строк или созданием объектов.

var html = '<select...
...
html .= '</select>';
$("#select").append(html);

или

var $sel = $('<select>').attr('id', 'userSelect').attr('name', 'user').

как видите, синтаксис $('<tag>') создает новый элемент dom.

Более того, если возможно, верните объект json вместо xml. С ними проще работать в javascript. Так что вы можете сделать

for (i in data) {
   $('<option>').text(data[i].name).val(data[i].id).appendTo($sel);
}
$("#select").append($sel);

И затем, есть метод3: шаблонирование ...

0 голосов
/ 16 ноября 2011

В наши дни классные ребята делают MVC в браузере. - Ваш метод 2, но более сложный стек на стороне клиента.

Другими словами, ваш сервер экспортирует API, который предоставляет данные, а не HTML.

Затем в браузере ваше приложение JS имеет отдельный код модели, вида и контроллера. См. Проект Backbone для слоя Модель и контроллер, Усы для слоя Вид / Шаблон. статья. Другой пост.

0 голосов
/ 16 ноября 2011

Я бы рекомендовал возвращать только данные в упрощенном виде, например, JSON.

Мои причины:

  • Пропускная способность
  • Меньшие данные для кэширования при возникновении проблем с производительностью
  • Гибкость. Если вы хотите предоставить эти данные другой части вашего приложения или мобильному устройству?

Есть несколько других методов, но, на мой взгляд, это гораздо более организованный подход. Пусть клиент разберется с обработкой разметки.

Я бы предложил jQote2 как отличный инструмент для создания шаблонов на стороне клиента. (Это просто потрясающе!)

0 голосов
/ 16 ноября 2011

Кажется, что мир движется к вашему второму подходу.Для этого есть несколько причин:

  1. Ваши пользователи поймут, что ваше приложение более отзывчиво, чем оно есть на самом деле, потому что страница будет загружаться по частям, поэтому всегда есть прогресс (или, по крайней мере,индикатор прогресса, если есть что-то, что требует много времени для загрузки).
  2. Вы можете повторно использовать службы данных для дополнительных клиентов, помимо вашего веб-сайта (например, родные мобильные приложения).
  3. Формат данных почти всегда более сжат, чем сгенерированный HTML, поэтому вы отправляете меньше данных по сети.По этой причине я бы порекомендовал json вместо xml.
  4. Механизмы javascript в большинстве браузеров намного эффективнее, чем несколько лет назад.Это позволяет вам разгрузить некоторую более сложную логику макета страницы с вашего сервера, делая ваше приложение более масштабируемым.
  5. Будет проще проверить правильность возвращаемых данных без необходимости разбираться с форматированием html дополучить доступ к нему.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...