使用 ajax 将集合填充到 UI 上

Question

我正在使用带有 Smack API 的 JSP、Servlet 和 Ajax 构建一个聊天应用程序。一旦用户连接到 Gtalk，他的好友列表就会显示在 UI 上。我能够将好友列表放到控制台上，但在 JSP 上填充它会出现问题。

在我的 servlet 中，我使用以下方法获取好友列表：

  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 请求的成本。

让 servlet 的 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 攻击漏洞）

现在调用 servlet 的 URL 而不是 JSP 的 URL。 JSP 将“在页面加载时”填充它。

---

与具体问题无关，如果您使用的是 jQuery，那么您不应该自己创建 XMLHttpRequest 对象。这完全没有意义。只需使用$.ajax()、$.get() 等函数即可。例如，检查this question。

如果你真的想用 jQuery 解决这个问题，那么最好让 servlet 以 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）

将此 servlet 映射到 /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>