Trong phần trước, chúng ta đã nhắc đến 3 loại URL, ta đã có 2 ví dụ tương ứng về renderURL và actionURL, bây giờ chúng ta sẽ sử dụng nốt resourceURL. Loại URL này rất thích hợp để thực hiện Ajax vì thế ta sẽ xét nó qua một ví dụ về Ajax.
Trước tiên, chúng ta nói lại một chút về Ajax.
Ajax được viết tắt của Asynchronous JavaScript and XML – phương pháp phía client tạo các request bất đồng bộ - là công nghệ phát triển web dựa trên javascript và XML. Đặc điểm của nó là ẩn với người dùng, các ứng dụng web tự tạo các request tới server để lấy dữ liệu mà không cần sự can
thiệp của người dùng.
Ajax cho phép tạo ra một Ajax Engine nằm giữa giao giữa client và server. Điều này giống như việc tăng thêm một lớp giữa cho ứng dụng để giảm quá trình "đi lại" của thông tin và giảm thời gian phản ứng. Khi đó, các yêu cầu gửi resquest và nhận response do Ajax Engine thực hiện. Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, web server có thể gửi trả dữ liệu dạng XML và Ajax Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML+CSS cho trình duyệt hiển thị. Việc này được thực hiện trên client nên giảm tải rất nhiều cho server, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì mà không cần nạp lại trang. Mặt khác, sự kết hợp của các công nghệ web như CSS và XHTML làm cho việc trình bày giao diện trang web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp. Và thay vì tải lại (refresh) toàn bộ một trang, nó chỉ nạp những thông tin được thay đổi, còn giữ nguyên các phần khác.
Chúng ta sẽ có 2 ví dụ về ajax. Một sử dụng resourceURL và một sử dụng XMLHTMLRequest.
a. resourceURL
Điểm quan trọng nhất khi sử dụng là resourceURL và hàm xử lý serveResource.
<%
ResourceURL currentResUrl = renderResponse.createResourceURL();
currentResUrl.setParameter("updateType", "ajax") ;
%>
<table style="width:100%;"> <tr>
<td style="width:25%">
<a href="javascript:;"
onclick="$('#<portlet:namespace/>content').load('<%= currentResUrl.toString() %>');return false;">Sports</ a> </td> <td style="width:75%"> <div id="<portlet:namespace/>content"> It is coding time. </div> </td> </tr> </table>
Phần code trên khai báo một biến thuộc kiểu ResourceURL. Biến này có nhiệm vụ yêu cầu request tới server và nhận giá trị trả về.
Một <table> được khai báo chứa link để kích hoạt ajax. Chúng ta sẽ gọi ajax qua jQuery Javascript Library API để truyền tải nội
Phía server:
public class changeStatus extends MVCPortlet { @Override
public void serveResource(ResourceRequest request, ResourceResponse response) throws
PortletException, IOException { String country=
request.getParameter("updateType"); if(country.equals("ajax"))
response.getWriter().println("<b>It's sports time</ b>"); else response.getWriter().println("Ajax test!!!"); } }
Chúng ta sẽ phải override hàm serveResouce để nhận các yêu cầu từ phía client để xử lý.
Deloy portlet và xem kết quả đạt được
Khi click vào “Sports”
Chúng ta có thể nhận thấy, khi bấm vào link “Sports” thì thông điệp “It is coding time” được thay đổi thành “It’s sports time” mà các portlet xung quanh không có thay đổi gi. Tức là một yêu cầu ajax đã được gửi đến server xử lý và nhận kết quả trả về. Các portlet khác không hề bị ảnh hưởng.
Đây là cách gọi ajax truyền thống, sử dụng một đối tượng
XMLHTTPRequest để gửi yêu cầu tới server và nhận kết quả trả về.
<%@page session="false" contentType="text/html"
pageEncoding="ISO-8859-1"
import="java.util.*,javax.portlet.*" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0"
prefix="portlet"%>
<portlet:defineObjects/>
<script type="text/javascript">
var xmlRequest;
/* send request to backend server */
function updatePortlet(url)
{
getXMLHttpRequest();
var params= getFormDataParams(); if(xmlRequest != null)
{
xmlRequest.onreadystatechange=stateHandler; xmlRequest.open("POST",url,true);
xmlRequest.setRequestHeader ("Content-Type",
"application/x-www-form-urlencoded"); xmlRequest.send(params);
} }
/* callback function called to check the request status and retrieve the resposne */
function stateHandler() { if (xmlRequest.readyState==4) { if (xmlRequest.status==200) { var responseDiv = document.getElementById("div_resource_response"); responseDiv.innerHTML= xmlRequest.responseText; } else {
alert("Problem retrieving XML data"); }
} }
/* get XMLHttpRequest object */
function getXMLHttpRequest()
{
if (window.XMLHttpRequest) {
xmlRequest = new XMLHttpRequest(); // Mozilla/Safari
}
else if ( typeof ActiveXObject != "undefined" ) {
xmlRequest = new ActiveXObject("MicroSoft.XMLHTTP"); // IE
} }
/* Prepares Post data */
function getFormDataParams()
{
var params = "country=" +
encodeURIComponent(document.resourceForm.country.value )
+ "&NOCACHE=" + new Date().getTime(); return params;
}
</script>
<H3 style="margin-bottom: 3px">Select a country:</H3> <FORM name="resourceForm" class="cssform">
<p>
<LABEL>Country</LABEL>
<select name="country"
onchange="updatePortlet('<portlet:resourceURL></
portlet:resourceURL>');">
<OPTION value="" selected="selected"></OPTION>
<OPTION value="us">USA</OPTION>
<OPTION value="en">English</OPTION>
<OPTION value="vi">Viet Nam</OPTION>
</select>
</p> </FORM>
<div id="div_resource_response">
Vì cách sử dụng XMLHTTPRequest đã khá quen thuộc nên trong ở đây sẽ không trình bày kĩ.
Deloy và quan sát kết quả: