使用 ajax 将集合填充到 UI 上

Question

我正在使用 JSP、Servlet 和 Ajax 以及 Smack API 构建一个聊天应用程序。一旦用户连接到 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 对其进行迭代并打印 元素。

<%@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() 等函数即可。例如，请查看此问题。

如果您确实想用 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>