以下是开发 AjaxPortlet的步骤：

步骤1：创建一个常规的Portlet作为AjaxPortlet的基础。

 
  
  1. public class DateTimePortlet extends GenericPortlet { 
  2. @RenderMode(name = "view") 
  3. public void showHomePage(RenderRequest request, 
  4. RenderResponse response)throws ...{ 
  5. ... 
  6. getPortletContext().getRequestDispatcher( 
  7. response.encodeURL("/WEB-INF/jsp/home.jsp")) 
  8. .include(request, response); 
  9. } 
  10. } 
 
  
 
 
  
步骤2：在jsp页面中，使用浏览器的XMLHttpRequest对象来发送请求和接受响应。
 
  
 
  
  1. <%@include file="include.jsp"%> 
  2. <script type='text/javascript'> 
  3. function <portlet:namespace/>setCurrentDateTime() { 
  4. var xhr = new XMLHttpRequest(); 
  5. ... 
  6. var url = 
  7. "<%=request.getContextPath()%>/DateTimeServlet" 
  8. xhr.open("GET", url, true); 
  9. xhr.send(); 
  10. } 
  11. </script> 
  12. <table> 
  13. <tr> 
  14. <td><b><a href="#" 
  15. onclick="<portlet:namespace/>setCurrentDateTime();" 
  16. style="color: black;">Refresh</a></b></td> 
  17. </tr> 
  18. </table> 
  19. <br/> 
  20. <!--以下的div容器用于显示当前的日期和时间，其中的数据是ajax返回拿到的-->
  21. <div id="<portlet:namespace/>messageText"> 
  22. </div> 
 
  
我们这里可以看到，我们定义了一个js方法，叫setCurrentDateTime()作为点击页面上Refresh超链接的事件处理函数，在这个方法里面，我们创建了浏览器的XHR对象，然后让它打开一个指向DateTimeServlet的连接，用Http GET 访问，并且是个异步连接(true参数），最后让XHR发送这个请求，并且立刻就返回。
 
  
 
 
  
步骤3：在服务端定义Servlet来处理XHR发过去的请求，因为步骤2中XMLHttpRequset发过去的是GET请求，所以对应的，这里必须定义doGet的实现：
 
  
 
  
  1. public class DateTimeServlet extends HttpServlet { 
  2. public void doGet(HttpServletRequest request, 
  3. HttpServletResponse response) ... { 
  4. SimpleDateFormat sdf = 
  5. new SimpleDateFormat("dd-MMM-yyyy hh:mm:ss a"); 
  6. OutputStream outStream = response.getOutputStream(); 
  7. StringBuffer buffer = new StringBuffer(); 
  8. buffer.append("Hello World (<i> " 
  9. + sdf.format(new Date()) + " </i>)"); 
  10. outStream.write(buffer.toString().getBytes()); 
  11. } 
  12. } 
 
  
它先创建一个DateFormat，然后打开一个HttpServletResponse输出流，并且将格式化的日期和其他字符串以HTML Fragment的形式写入到输出流中。
 
  
 
 
  
步骤4：在页面上定义一个js函数用于响应Servlet返回的结果，然后渲染到指定<div>中
 
  
 
  
  1. <script type='text/javascript'> 
  2. function <portlet:namespace/>setCurrentDateTime() { 
  3. var xhr = new XMLHttpRequest(); 
  4. xhr.onreadystatechange = function() { 
  5. //readyState为4表明XMLHttpRequest的状态为Complete,也就是响应Data可以拿到了
  6. if(xhr.readyState == 4) { 
  7. var messageText = document.getElementById("<portlet:namespace/>messageText"); 
  8. messageText.innerHTML = xhr.responseText; 
  9. } 
  10. }; 
  11. var url = 
  12. "<%=request.getContextPath()%>/DateTimeServlet"; 
  13. xhr.open("GET", url, true); 
  14. xhr.send(); 
  15. } 
  16. </script>