(Portal開発読書ノート)AjaxPortlet

9589 ワード
非同期 AjaxPortlet
AjaxPortletを開発するには、次の手順に従います.
手順1:AjaxPortletのベースとして通常のPortletを作成します.

  
  
  
  
    
   
   
   
   
  1. public class DateTimePortlet extends GenericPortlet { 
    2. 
   
   
   
   
  2. @RenderMode(name = "view") 
    3. 
   
   
   
   
  3. public void showHomePage(RenderRequest request, 
    4. 
   
   
   
   
  4. RenderResponse response)throws ...{ 
    5. 
   
   
   
   
  5. ... 
    6. 
   
   
   
   
  6. getPortletContext().getRequestDispatcher( 
    7. 
   
   
   
   
  7. response.encodeURL("/WEB-INF/jsp/home.jsp")) 
    8. 
   
   
   
   
  8. .include(request, response); 
    9. 
   
   
   
   
  9. } 
    10. 
   
   
   
   
  10. } 
    11.

 
ステップ2:jspページでは、ブラウザのXMLHttpRequestオブジェクトを使用してリクエストを送信し、応答を受信します.

  
  
  
  
    
   
   
   
   
  1. <%@include file="include.jsp"%> 
    2. 
   
   
   
   
  2. <script type='text/javascript'> 
    3. 
   
   
   
   
  3. function <portlet:namespace/>setCurrentDateTime() { 
    4. 
   
   
   
   
  4. var xhr = new XMLHttpRequest(); 
    5. 
   
   
   
   
  5. ... 
    6. 
   
   
   
   
  6. var url = 
    7. 
   
   
   
   
  7. "<%=request.getContextPath()%>/DateTimeServlet" 
    8. 
   
   
   
   
  8. xhr.open("GET", url, true); 
    9. 
   
   
   
   
  9. xhr.send(); 
    10. 
   
   
   
   
  10. } 
    11. 
   
   
   
   
  11. </script> 
    12. 
   
   
   
   
  12. <table> 
    13. 
   
   
   
   
  13. <tr> 
    14. 
   
   
   
   
  14. <td><b><a href="#" 
    15. 
   
   
   
   
  15. onclick="<portlet:namespace/>setCurrentDateTime();" 
    16. 
   
   
   
   
  16. style="color: black;">Refresh</a></b></td> 
    17. 
   
   
   
   
  17. </tr> 
    18. 
   
   
   
   
  18. </table> 
    19. 
   
   
   
   
  19. <br/> 
    20. 
   
   
   
   
  20. <!-- div ， ajax -->
    21. 
   
   
   
   
  21. <div id="<portlet:namespace/>messageText"> 
    22. 
   
   
   
   
  22. </div> 
    23.

ここでは,setCurrentDateTime()というjsメソッドをクリックページ上のRefreshハイパーリンクのイベント処理関数として定義し,このメソッドではブラウザのXHRオブジェクトを作成し,DateTimeServiceletへの接続を開き,Http GETでアクセスし,非同期接続(trueパラメータ)とし,最後にXHRにこの要求を送信させ,すぐに戻る.
 
ステップ3:サーブレットをサービス側で定義してXHRからの過去の要求を処理する.ステップ2でXMLHttpRequsetからの送信はGET要求であるため、対応する.ここでdoGetの実装を定義する必要がある.

  
  
  
  
    
   
   
   
   
  1. public class DateTimeServlet extends HttpServlet { 
    2. 
   
   
   
   
  2. public void doGet(HttpServletRequest request, 
    3. 
   
   
   
   
  3. HttpServletResponse response) ... { 
    4. 
   
   
   
   
  4. SimpleDateFormat sdf = 
    5. 
   
   
   
   
  5. new SimpleDateFormat("dd-MMM-yyyy hh:mm:ss a"); 
    6. 
   
   
   
   
  6. OutputStream outStream = response.getOutputStream(); 
    7. 
   
   
   
   
  7. StringBuffer buffer = new StringBuffer(); 
    8. 
   
   
   
   
  8. buffer.append("Hello World (<i> " 
    9. 
   
   
   
   
  9. + sdf.format(new Date()) + " </i>)"); 
    10. 
   
   
   
   
  10. outStream.write(buffer.toString().getBytes()); 
    11. 
   
   
   
   
  11. } 
    12. 
   
   
   
   
  12. } 
    13.

DateFormatを作成し、HttpServeretResponse出力ストリームを開き、フォーマットされた日付と他の文字列をHTML Fragmentとして出力ストリームに書き込みます.
 
ステップ4:ページにjs関数を定義して、サーブレットが返す結果に応答し、指定した
にレンダリングします.

  
  
  
  
    
   
   
   
   
  1. <script type='text/javascript'> 
    2. 
   
   
   
   
  2. function <portlet:namespace/>setCurrentDateTime() { 
    3. 
   
   
   
   
  3. var xhr = new XMLHttpRequest(); 
    4. 
   
   
   
   
  4. xhr.onreadystatechange = function() { 
    5. 
   
   
   
   
  5. //readyState 4 XMLHttpRequest Complete, Data 
    6. 
   
   
   
   
  6. if(xhr.readyState == 4) { 
    7. 
   
   
   
   
  7. var messageText = document.getElementById("<portlet:namespace/>messageText"); 
    8. 
   
   
   
   
  8. messageText.innerHTML = xhr.responseText; 
    9. 
   
   
   
   
  9. } 
    10. 
   
   
   
   
  10. }; 
    11. 
   
   
   
   
  11. var url = 
    12. 
   
   
   
   
  12. "<%=request.getContextPath()%>/DateTimeServlet"; 
    13. 
   
   
   
   
  13. xhr.open("GET", url, true); 
    14. 
   
   
   
   
  14. xhr.send(); 
    15. 
   
   
   
   
  15. } 
    16. 
   
   
   
   
  16. </script> 
    17.

知らなかったことを話す
[伯俊19941-Kotlin]分配ハンバーガー