Заполнение коллекции на пользовательский интерфейс с помощью ajax

Question

Я создаю приложение чата с использованием JSP, сервлетов и Ajax с помощью Smack API. Как только пользователь подключается к Gtalk, его список друзей должен отображаться в интерфейсе пользователя. Я могу вывести список друзей на консоль, но заполнение его на JSP вызывает проблемы.

В моем сервлете я получаю список друзей, используя:

  Roster roster = connection.getRoster();
    Collection<RosterEntry> entries = roster.getEntries();
    for(RosterEntry r:entries)
    {
        String user = r.getUser();
        pw.println(user);
    }

На моей странице jsp я хочу, чтобы список друзей заполнялся при загрузке страницы:

$(document).ready(function() {
    var xmlhttp;
    if(window.XMLHttpRequest)
    {
    xmlhttp=new XMLHttpRequest();
    }
    else
    {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if(xmlhttp.readyState==4)
    {
        if(xmlhttp.status == 200) 
            {

               document.getElementById(buddies).innerHTML=xmlhttp.responseText;
            }

    }
    }
    xmlhttp.open("POST","LoginIMServlet",true);
    xmlhttp.send(null);
        }
)
<table>
</tr>
  <tr>
    <td>
    <form name=ListForm>
    <select id="buddies" name="buddies" size=40 multiple onclick="window.open("ChatWindow.jsp",width=500,height=350,resizable=yes")>
    </select>
     </form> 
    </td>
  </tr>
</table>

Я не могу заполнить поле мультиселектора. Как я могу решить это?

Answer 1

Если вы хотите делать что-то на стороне сервера во время загрузки страницы, вам не обязательно нужен JS / Ajax для этого.Вы можете просто позволить JSP сделать работу.Это экономит стоимость еще одного HTTP-запроса.

Пусть метод сервлета doGet() сохранит его в области запроса и перенаправит в JSP.

Roster roster = connection.getRoster();
request.setAttribute("rosterEntries", roster.getEntries());
request.getRequestDispatcher("/WEB-INF/page.jsp").forward(request, response);

Пусть JSP использует JSTL <c:forEach>перебрать его и напечатать элементы <option>.

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
...
<select multiple>
    <c:forEach items="${rosterEntries}" var="rosterEntry">
        <option>${fn:escapeXml(rosterEntry.user)}</option>
    </c:forEach>
</select>

(fn:escapeXml() не является обязательным, но он просто предотвращает потенциальные дыры в атаке XSS)

Теперь вызовите URL сервлета вместо JSP.JSP заполняет его «при загрузке страницы».

---

Не имеет отношения к конкретной проблеме . Если вы используете jQuery, то вам не следует создавать XMLHttpRequest объекты самостоятельно.Это не имеет никакого смысла.Просто используйте функции $.ajax(), $.get() и т. Д.Например, проверьте этот вопрос .

Если вы действительно хотите решить эту проблему с помощью jQuery, тогда лучше всего позволить сервлету возвращать данные в виде JSON и использовать $.getJSON() чтобы получить его.Вместо этого сделайте следующее в методе doGet():

Roster roster = connection.getRoster();
String rosterEntriesJson = new Gson().toJson(roster.getEntries());
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(rosterEntriesJson);

(Gson здесь Google GSON , просто скачайте JAR в /WEB-INF/lib)

Сопоставьте этот сервлет с /buddies и выполните следующие действия в JSP / jQuery:

<script>
    $(document).ready(function() {
        $.getJSON('buddies', function(rosterEntriesJson) {
            var $buddies = $('#buddies');
            $.each(rosterEntriesJson, function(index, rosterEntry) {
                $('<option>').text(rosterEntry.user).appendTo($buddies);
            });
        });
    });
</script>
...
<select id="buddies" multiple></select>