Используйте ответ Ajax в JSP - PullRequest
       14

Используйте ответ Ajax в JSP

2 голосов
/ 29 сентября 2011

У меня есть страница JSP , в которой нет ничего, кроме обычной таблицы HTML с пятью строками и пятью столбцами.

Теперь я делаю Ajax-вызов и получаю ответ. Теперь, когда я получу ответ, мне нужно, чтобы данные были заполнены в соответствующих ячейках таблицы.

Итак, мой вопрос:

  1. Должен ли я использовать JSON для построения ответа?
  2. Как мне обработать данные обратно на уровне JSP. То есть, когда у меня есть ответ с сервера?

В качестве дополнительной информации я использую DWR , который является не чем иным, как вызовом метода Java (который создает ответ) из кода JavaScript.

Ответы [ 5 ]

6 голосов
/ 30 сентября 2011

Давайте рассмотрим этот класс Java.

    class Employee
    {
        int id;
        String eName;
        // Setters and getters
    }

В JavaScript объект JSON:

 var employee = {
     id   : null,
     name : null
 };

Это вызов метода Java из функции JavaScript:

   EmployeeUtil.getRow(employee,dwrData);

В getRow () класса EmployeeUtil тип возвращаемого метода будет Employee:

   Employee getRow();

Таким образом, используя установщики Employee, установите данные.dwrData - это функция обратного вызова.

function dwrData(data) {
    employee=data;
}

Возвращенные данные, являющиеся компонентом Employee, будут в функции обратного вызова.

Просто инициализируйте это в объекте JSON JavaScript.

Используйте соответствующий объект JSON для заполнения таблицы.

РЕДАКТИРОВАТЬ:

Вы можете использовать List getRow() вместо Employee getRow(), возвращая список строкв виде списка вместо компонента.

Теперь ответ содержит список в виде данных.

См. Заполнение строк с использованием DWR .

Проверьте эти примеры, чтобы заполнить данные в таблице:

Должен ли я использовать JSON для построения ответа?

  • Нет необходимости передавать JSON в ответ.Вместо этого верните Бин класса, как упомянуто выше.

  • Список может быть передан в качестве ответа, также как упомянуто выше.

Какобрабатывать данные обратно на уровне JSP.То есть после получения ответа от сервера.

Проверьте приведенное выше объяснение и примеры приведенных ссылок для обработки ответа в JSP и отображения данных ответа в таблице.

1 голос
/ 04 октября 2011

Что я делаю довольно часто, так это настраиваю два сервлета для этой ситуации:

MyServlet
MyAJAXServlet

MyServlet обрабатывает обычные HTTP-запросы и (обычно) в конечном итоге использует RequestDispatcher для пересылки запроса в JSP.

Пример:

public class MyServlet extends HttpServlet {
    private static final long serialVersionUID = -5630346476575695999L;
    public void doGet(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        doGetAndPost(req, res);
    }
    public void doPost(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        doGetAndPost(req, res);
    }
    private final void doGetAndPost(HttpServletRequest req,
            HttpServletResponse res) throws ServletException, IOException {
        /*
         * Handle the response here, manipulate the 'MODEL'
         */
        /*
         * Forward to the 'VIEW' (No Baba Wawa jokes please)
         */
        RequestDispatcher rdis = req.getRequestDispatcher("Path/To/My/JSP");
        rdis.forward(req, res);
    }
}

Где сервлет AJAX проверяет список параметров запроса на наличие «команды»:

public class MyAJAXServlet extends HttpServlet {
    private static final long serialVersionUID = -5630346476575695915L;

    public void doGet(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        doGetAndPost(req, res);
    }

    public void doPost(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        doGetAndPost(req, res);
    }

    private final void doGetAndPost(HttpServletRequest req,
            HttpServletResponse res) throws ServletException, IOException {

            String cmd = req.getParameter("cmd");
            if (cmd == null || cmd.length() < 1) {
                /* Custom fail mode here, perhaps toss back failure HTML */
                return;
            }

            /* Easily implement command pattern here, but for simplicity, we will use an if tree */

            if (cmd.equalsIgnoreCase("getSomeData")) {
                String out = "<tr><td>ExampleCell in ExampleRow</td></tr>";
                res.getWriter().append(out);
                return;
            } else if (cmd.equalsIgnoreCase("someOtherCommand")) {
                /* Do something else */
            }

    }
}

Если вы отформатируете свой JSP, чтобы разрешить массовую замену html-элементов следующим образом:

<table id="pleaseReplaceMyContentsTABLE">
    <tr><td>&nbsp;</td></tr>
</table>

Тогда становится очень легко динамически изменять содержимое веб-страниц (для этого примера я использую JQuery):

var url = "http://mydomain.whatever/myapp/MyAJAXServletMappedURL?cmd=getSomeData";
$.post(url, function(data) {
    //Message data a bit & display
    $("#pleaseReplaceMyContentsTABLE").html(data);
});

Некоторые ограничения при отправке обратно отформатированного HTML-кода из сервлета AJAX:

  1. Если вы отправляете от умеренного до большого объема данных, ваш веб-сервер легко перегружается, когда количество клиентов начинает расти. Ака, это не будет хорошо масштабироваться.
  2. Java-код, который форматирует HTML для отправки клиенту, может быть уродливым и трудным для чтения. Быстро.
1 голос
/ 29 сентября 2011

JSP-страницы - это динамически генерируемые сервлеты.Когда пользователь попадает на страницу JSP, он получает динамически сгенерированный HTML-код, который больше не общается со страницей JSP, сгенерировавшей его, если он не выполнит действие, такое как нажатие кнопки «обновить» или отправку формы.Посетите страницу JSP в Oracle для получения дополнительной информации и Википедию для объяснения технологии JSP на высоком уровне.

Для обработки AJAX вам необходимо определить новую конечную точку сети, способную обрабатывать запросы XML, поступающие из Javascript.См. этот пример , эту библиотеку или этот пример JSON .

0 голосов
/ 09 октября 2011

Ajax часть: мы возвращаем список объектов:

public List<IdTexto> getPaisesStartingBy(String texto,String locale){
        List<IdTexto> res = new ArrayList<IdTexto>();
// Fill the array
return res;
}

IdTexto - это простой bean-компонент с геттерами и сеттерами:

public class IdTexto {

    private int id;
    private String texto;
    private String texto2;
// getters and setters
}

И он определен в dwr.xml as bean:

<convert converter="bean" match="com.me.company.beans.IdTexto"/>

И класс, содержащий функцию java, определен как создатель:

<create creator="new" javascript="shopdb">
    <param name="class" value="com.me.company.ajax.ShopAjax"/>
</create>

В jsp мы определяем функцию javascript для получения списка запусканекоторый текстовый объект таким образом:

shopdb.getPaisesStartingBy(req.term,'<s:text name="locale.language"/>', writePaises);

И соответствующая функция для записи текстов:

function writePaides (data) {
var result="<table>";
for (i=0; i<data.length;i++) {
 id = data[i].id;
 texto=data[i].texto;
 texto2=data[i].txto2;
 // now we write inside some object in the dom
 result+="<tr><td>"+id+"</td><td>"+texto+"</td><td>"+texto2+"</td></tr>";
}
result+="</table>";
 $("tabla").innerHTML=result;
}

Если у вас вместо бина есть какой-то другой объект, к которому вы получите доступсвойства точно так же.

0 голосов
/ 08 октября 2011
  1. Если вы используете DWR, вам не нужно использовать JSON, он использует внутренне.
  2. Используйте javascript, код jsp находится вне области видимости. Страница была сгенерирована, поэтому вы можете изменять DOM только с помощью javascrip

Есть много примеров того, что вам нужно в обучающих программах DWR. Я полагаю, вам нужно просто сделать что-то как:

    dwrobject.funtionAjax(param,returnFunction);
...
    function returnFunction(data) {
// use javascript to change the dom
    }
...