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