Wednesday, May 27, 2009

Using Resource URL for Ajax

This below sample code illustrates how to use Resource URL for initiating Ajax requests. This allows to update portions of page without refreshing whole page.

<span style="font-weight: bold;">Introduction</span>
This portlet displays a drop-down list to select country. Upon selecting, an Ajax request is sent to portlet. This will invoke serveResource method of portlet which sends a text message containing major cities part of selected country. These cities are shown in hidden division in the portlet window.

<span style="font-weight: bold;">Analysis of portlet project</span>

1. The following is sample JSP shown in portlet. The highlighted code shows creating resource URL, and hidden division. This JSP also shows Javascript code used to send Ajax request.

<%@page session="false" contentType="text/html" pageEncoding="ISO-8859-1" import="java.util.*,javax.portlet.*" %>
<%@ taglib uri="" prefix="portlet"%>

<script type="text/javascript">
var xmlRequest;
/* send request to backend server */

function updatePortlet(url)
var params= getFormDataParams();
if(xmlRequest != null) { xmlRequest.onreadystatechange=stateHandler;"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( + "&NOCACHE=" + new Date().getTime();
return params;

<h3 style="margin-bottom: 3px;">Select a country to display major cities</h3>
<form name="resourceForm" class="cssform">
<select name="country" onchange=""><option value="" selected="selected"></option> <option value="usa">USA</option> <option value="canada">Canada</option> <option value="india">India</option> </select>

<div id="div_resource_response">


2. The following is the method invoked by submitting to resource URL.

public void serveResource(ResourceRequest request, ResourceResponse response) throws PortletException, IOException {
String country= request.getParameter("country");
response.getWriter().println("Major cities in USA are <b>New york, Chicago, Houston, Los Angeles</b>");
else if(country.equals("canada"))
response.getWriter().println("Major cities in Canda are <b>Toronto, Vancouer, Ottawa</b>");
else if(country.equals("india"))
response.getWriter().println("Major cities in India are <b>Delhi, Bombay, Bangalore, Madras</b>");