Brief IntroductionAJAX
:
AJAX (Asynchronous JavaScript and XML) is a method of building interactive applications for the Web that process user requests immediately. Ajax combines several programming tools including JavaScript, dynamic HTML (DHTML), Extensible Markup Language (XML), cascading style sheets (CSS), the Document Object Model (DOM), and the Microsoft object, XMLHttpRequest. Ajax allows content on Web pages to update immediately when a user performs an action, unlike an HTTP request, during which users must wait for a whole new page to load. For example, a weather forecasting site could display local conditions on one side of the page without delay after a user types in a zip code.
Google Maps is one well-known application that uses Ajax. The interface allows the user to change views and manipulate the map in real time. Ajax applications do not require installation of a plug-in, but work directly with a Web browser. Because of the technique's reliance on XMLHttpRequest, early applications worked only with Microsoft's Internet Explorer browser, but most other browsers now support Ajax.
AjaxAnywhere is designed to turn any set of existing JSP or JSF components into AJAX-aware components without complex JavaScript coding.
In contrast to other solutions, AjaxAnywhere is not component-oriented. You will not find here yet another AutoComplete component.
Simply separate your web page into multiple zones, and use Ajax Anywhere to refresh only those zones that needs to be updated.
· AjaxAnywhere, a JSP tag library that uses AJAX to refresh "zones" on a web page.
· This is a simple way to enhance an existing JSP / Struts / Spring / JSF application with AJAX.
- Mark "reload-capable" zones of a web page with AjaxAnywhere custom tags.
- Instead of submitting a form in traditional way, do it by AjaxAnywhere javascript API.
- During request processing on the server-side, determine the zones to refresh. (You can implement this logic either on the client-side via JavaScript or on the server-side, via AjaxAnywhere API.)
- On the server-side AjaxAnywhere will generate an XML containing only the "updated" HTML.
- On the client-side AjaxAnywhere javascript will receive the XML, parse it and update the selected zones.
Note: Explained in detail with an example
- Less JavaScript to develop and to maintain. Absence of commonly accepted naming convention, formatting rules, patterns makes JavaScript code messier then Java/JSP. It is extremely difficult to debug and unit-test it in multi-browser environment. Get rid of all those complexities by using AjaxAnywhere.
- Lower technical risk. Switch whenever you need between AJAX and traditional (refresh-all-page) behaviour of your web application. Your application can also support both behaviors.
- Default graceful degradation. You do not need to develop another interface for older browers support. If XMLHttpRequest is not available, application will keep working in traditional way, refreshing the entire page.
- JavaScript received by AJAX is treated in a special way. AjaxAnywhere executes it via eval(""), it is also able to extract the declared functions into the proper context. (as if the page was reloaded completely). However, it is impossible to execute document.write() command inside AJAXable zone.
- The zones to reload might be known before submitting the request. In this case, override AjaxAnywhere.getZonesToReload() JavaScript function on the client-side. No additional server side logic is necessary.
- response.sendRedirect() during Ajax request is transformed into location.href=.. JavaScript commmand.
- AjaxAnywhere doesn't require changes to the underlying code, so while it's more coarse than finely-tuned AJAX, it's also easier to implement, and doesn't bind your application to AJAX (i.e., browsers that don't support AJAX can still work.)
Limitations on AjaxAnywhere
· AxajAnywhere is not as dynamic as pure-JavaScript AJAX solutions.
· Can only update a set of complete DHTML objects without breaking then apart.
· Extract JavaScript file(s) (aa.js) from the binary distibution file into your web application root. In my case I have placed it along with my JSP files
· Copy the JAR file to /WEB-INF/lib or your web application
· Add AAFilter mapping for dynamic URLs to web.xml. Make sure that AjaxAnywhere filter in the first one in the chain.
<display-name>AjaxAnywhere</display-name>
<filter>
<filter-name>AjaxAnywhere</filter-name>
<display-name>AjaxAnywhere</display-name>
<filter-class>org.ajaxanywhere.AAFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>AjaxAnywhere</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>AjaxAnywhere</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>
Lets implement AjaxAnywhere with an Example:
Abstract of the example: We would be displaying three different time zones in a drop down, on selecting a particular Time zone it has to call the action class and display the time accordingly. For this we will be using AjaxAnywhere, where in the complete page should not be refreshed on selecting the Zone (Normal AJAX functionality)
Follow the above installation steps i.e., downloading the jar file and extracting aa.js and placing along with the Project files and making the configuration setting in web.xml
Please note: I would be using Struts 1.1 in my example to explain the functionality.
Create a new JSP file for the time zone drop downs along with the zone(s) on Ajax call as below:
<%@ page language="java"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="http://ajaxanywhere.sourceforge.net/" prefix="aa" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META name="GENERATOR" content="IBM WebSphere Studio">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="../theme/Master.css" rel="stylesheet" type="text/css">
<TITLE>Time Zones</TITLE>
<script language="javascript" src="aa.js"></script>
<SCRIPT>
function getCountryList(ref){
if(ref.value == " "){
alert("Please select a Time Zone.");
document.getElementById('showTime').style.display="none";
return;
}
ajaxAnywhere.submitAJAX();
document.getElementById('showTime').style.display="block";
}
</SCRIPT>
</HEAD>
<BODY onload="alert('This Alert is just to show that the page is loaded only once.');">
<html:form action="SampleServlet.do">
<table>
<tr>
<td>Time Zone:</td>
<td></td>
<td>
<html:select property="dropDownValue" onchange="getCountryList(this)">
<html:option value=" ">---Select---</html:option>
<html:option value="Asia/Calcutta">INDIA</html:option>
<html:option value="GMT">UK</html:option>
<html:option value="America/New_York">NEW YORK</html:option>
</html:select>
</td>
</tr>
</table>
<div style="display:none" id="showTime">
<aa:zone name="countriesList">
<%=request.getAttribute("TIME_ZONE")%>
</aa:zone>
</div>
</html:form>
</BODY>
</HTML>
Date now = new Date();
DateFormat df = new SimpleDateFormat("MM-dd-yyyy HH:mm:ss z");
df.setTimeZone(TimeZone.getTimeZone(((DropDown)form).getDropDownValue()));
System.out.println(df.format(now));
request.setAttribute("TIME_ZONE", df.format(now));
if(AAUtils.isAjaxRequest(request)){
AAUtils.addZonesToRefresh(request, "countriesList");
}
return mapping.findForward("SUCCESS");
private String dropDownValue;
/**
* @return
*/
public String getDropDownValue() {
return dropDownValue;
}
/**
* @param string
*/
public void setDropDownValue(String string) {
dropDownValue = string;
}
<struts-config>
<form-beans>
<form-bean name="DropDown" type="com.wipro.forms.DropDown"/>
</form-beans>
<action-mappings>
<action path="/SampleServlet" type="com.wipro.servlet.SampleServlet" name="DropDown">
<forward name="SUCCESS" path="/JSP/DependentDropDown.jsp" />
</action>
</action-mappings>
</struts-config>
- AjaxAnywhere doesn't require changes to the underlying code, , it's also easier to implement, and doesn't bind your application to AJAX (i.e., browsers that don't support AJAX can still work.)
