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="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=""><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>");

}
</portlet:defineobjects>

Partial page refresh with AJAX and JQuery

Problem : mechanism to continuously refresh a web page in order to provide a real-time dashboard of some kind or only could refresh a part of a specific page, for example: the traffic lights on a dashboard that indicate the status of the system.

It is really easy to only refresh a part of the page by using the JQuery JavaScript library. Include the JQuery library into our page, you only need 1 line of JavaScript to get it working:


<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

So you just place this little JS code snippet into our page to refresh everything inside the tag with the content id, let’s say every 5 seconds:


setInterval(function() {
$("#content").load(location.href+" #content>*","",);
}, 5000);

setInterval(function() {
$("#content").load(location.href+" #content>*","",);
}, 5000);

That’s it!! It is thus fairly easy to accomplish some real-time monitoring behavior with just that line of code. No more weird meta-refresh tags or iframe kind of workarounds in your web applications.

Every 5 seconds, we will refresh the content of the element with the content of the same URL and all elements that reside under the element with id: content.

JQuery certainly allows you to apply some very powerful techniques in just a few lines of code.