(Portal 开发读书笔记）AjaxPortlet

 如下是开发 AjaxPortlet的步骤：

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

public class DateTimePortlet extends GenericPortlet {
@RenderMode(name = "view")
public void showHomePage(RenderRequest request,
RenderResponse response)throws ...{
...
getPortletContext().getRequestDispatcher(
response.encodeURL("/WEB-INF/jsp/home.jsp"))
.include(request, response);
}
}

 

步骤2：在jsp页面中，使用浏览器的XMLHttpRequest对象来发送请求和接受响应。

<%@include file="include.jsp"%>
<script type='text/javascript'>
function <portlet:namespace/>setCurrentDateTime() {
var xhr = new XMLHttpRequest();
...
var url =
"<%=request.getContextPath()%>/DateTimeServlet"
xhr.open("GET", url, true);
xhr.send();
}
</script>
<table>
<tr>
<td><b><a href="#"
onclick="<portlet:namespace/>setCurrentDateTime();"
style="color: black;">Refresh</a></b></td>
</tr>
</table>
<br/>
<!--如下的div容器用于显示当前的日期和时间，其中的数据是ajax返回拿到的-->
<div id="<portlet:namespace/>messageText">
</div>

咱们这里能够看到，咱们定义了一个js方法，叫setCurrentDateTime()做为点击页面上Refresh超连接的事件处理函数，在这个方法里面，咱们建立了浏览器的XHR对象，而后让它打开一个指向DateTimeServlet的链接，用Http GET 访问，而且是个异步链接(true参数），最后让XHR发送这个请求，而且马上就返回。

 

步骤3：在服务端定义Servlet来处理XHR发过去的请求，由于步骤2中XMLHttpRequset发过去的是GET请求，因此对应的，这里必须定义doGet的实现：

public class DateTimeServlet extends HttpServlet {
public void doGet(HttpServletRequest request,
HttpServletResponse response) ... {
SimpleDateFormat sdf =
new SimpleDateFormat("dd-MMM-yyyy hh:mm:ss a");
OutputStream outStream = response.getOutputStream();
StringBuffer buffer = new StringBuffer();
buffer.append("Hello World (<i> "
+ sdf.format(new Date()) + " </i>)");
outStream.write(buffer.toString().getBytes());
}
}

它先建立一个DateFormat，而后打开一个HttpServletResponse输出流，而且将格式化的日期和其余字符串以HTML Fragment的形式写入到输出流中。

 

步骤4：在页面上定义一个js函数用于响应Servlet返回的结果，而后渲染到指定<div>中

<script type='text/javascript'>
function <portlet:namespace/>setCurrentDateTime() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
//readyState为4代表XMLHttpRequest的状态为Complete,也就是响应Data能够拿到了
if(xhr.readyState == 4) {
var messageText = document.getElementById("<portlet:namespace/>messageText");
messageText.innerHTML = xhr.responseText;
}
};
var url =
"<%=request.getContextPath()%>/DateTimeServlet";
xhr.open("GET", url, true);
xhr.send();
}
</script>