ajax를 사용하여 UI에 컬렉션 채우기

Question

JSP, 서블릿 및 Ajax with Smack API를 사용하여 채팅 응용 프로그램을 작성합니다. 사용자가 Gtalk에 연결하면 대화 상대 목록이 UI에 표시됩니다. 콘솔에 대화 상대 목록을 가져올 수 있지만 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> 

내가 채울 수 없습니다입니다 : 나는 친구 목록은 페이지로드에 채워야 할 내 JSP 페이지에서

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

: 내 서블릿에서

나는 버디 사용하여 목록을 멀티 선택기 상자 이 문제를 어떻게 해결할 수 있습니까?

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가 반복하고 <option> 요소를 인쇄 할 수 JSTL <c:forEach>을 활용하자.

<%@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 공격 구멍에서 당신을 방지)

는 이제 JSP 하나 대신 서블릿의 URL을 호출합니다. JSP는 "페이지로드시"그것을 채울 것입니다. 당신이 jQuery를 사용하는 경우

---

관련없는 구체적인 문제로, 당신은 XMLHttpRequest가 직접 객체를 생성해서는 안된다. 이것은 완전한 의미가 아닙니다. $.ajax(), $.get() 등의 기능 만 사용하면됩니다. 예를 들어, this question을 확인하십시오.

이 실제로 인 경우 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, 그냥 다운로드 /WEB-INF/lib에 JAR 드롭) /buddies에

지도이 서블릿과 JSP/jQuery를에서 다음을 수행합니다 : 유형 변수는 클래스 declarat에 존재하지 않을 수있는 방법 :

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