使用ajax在UI上填充集合

Question

我正在使用JSP，Servlets和Ajax與Smack API構建聊天應用程序。一旦用戶連接到Gtalk，他的好友列表應顯示在用戶界面上。我能夠將好友列表放到控制檯上，但將它填充到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的網址，而不是JSP之一。 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，只需下載並在/WEB-INF/lib下降JAR）上/buddies

地圖這個servlet並做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>