Documentation‎ > ‎Portlets‎ > ‎

Using Resource URL for Ajax

Sample Code

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

Introduction
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.

Analysis of portlet project

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="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 to display major cities</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="usa">USA</OPTION>
        <OPTION value="canada">Canada</OPTION>
        <OPTION value="india">India</OPTION>
        </select>
    </p>

</FORM>
<div id="div_resource_response">

</div>

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

  @Override
    public void serveResource(ResourceRequest request, ResourceResponse response) throws PortletException, IOException {
        String country= request.getParameter("country");
        if(country.equals("usa"))
            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>");

    }


Comments