Populating collection onto UI using ajax

I am building a chat application using JSP, Servlets and Ajax with Smack API开发者_Go百科. Once the user connects to Gtalk his buddies list should be displayed onto the UI. I am able to get the buddies list onto console but populating it on the JSP is giving problems.

In my servlet I get the buddy list using:

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

In my jsp page I want the buddy list to be populated on page load:

$(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>

I am not able to populate the multi selector box. How can I solve this?

---

If you want to do server-side stuff during page load, you don't necessarily need JS/Ajax for this. You can just let JSP do the job. This saves the cost of one more HTTP request.

Let the servlet's doGet() method store it in request scope and forward to JSP.

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

Let the JSP utilize JSTL <c:forEach> to iterate over it and print the <option> elements.

<%@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>

(the fn:escapeXml() is not mandatory, but it just prevents you from potential XSS attack holes)

Now call the URL of servlet instead of the JSP one. JSP will populate it "on page load".

---

Unrelated to the concrete problem, if you're using jQuery, then you should not create XMLHttpRequest objects yourself. This makes no utter sense. Just use $.ajax(), $.get(), etc functions. For examples, check this question.

If you really want to solve this with jQuery, then best is to let the servlet return the data as JSON and use $.getJSON() to retrieve it. Do the following in the doGet() method instead:

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

(Gson is here Google GSON, just download and drop JAR in /WEB-INF/lib)

Map this servlet on /buddies and do the following in 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>