recently built a Web application with JavaServer Pages (JSP) and Servlets for a client. While testing the application, the client discovered a page that required her to press a button to retrieve values from the server before other fields in the page would populate. She wanted me to eliminate the “hang” that occurred when she pressed the button (i.e., submitted the page to the server), so that she could populate other fields while the application fetched values from the server.

This is a common scenario: a Web application fetches some data from the server based on user input before populating the rest of the fields in a Web page. Usually, an application submits the page to the server, which then returns the requested information back to the page. Users don’t like waiting until the page refreshes with the fetched data, and developers must perform additional coding for the application to maintain any populated fields when fetching data from the server based on user input.

This 10-Minute Solution demonstrates how to use inline frames (iFrames) as a means of submitting and receiving values from the server side. Used with JavaScript and JSP code, iFrames elegantly resolve the “hang” issue, thus enhancing the user experience and reducing the required coding. This tutorial presents this technique via a simple user registration application, which consists of a registration page, a Servlet to process requests, and another JSP page that is included in an iFrame.

How do I make a Web application fetch data from the server when a user submits input?without hanging and while maintaining populated fields on a page?

Use iFrames as a means of submitting and receiving values from the Web server. Used with JavaScript and JSP code, iFrames elegantly resolve the “hang” issue.

The iFrame Solution
An iFrame element defines an inline frame for the inclusion of external objects, including other HTML documents. It enables you to easily open and position a Web page anywhere inside your main page without the hassle of classical frames. The following is HTML code for an iFrame:

Figure 1. The Registration Page

In the registration page of the example application, you will embed an iFrame containing another JSP page, which the application will use to communicate with the Servlet on behalf of its parent page. As a result, the application transparently submits the iFrame page without the user ever knowing it, thus eliminating the hang that occurs when it submits a page to the server. Figure 1 shows how the registration page looks.

The registration page has a “check name” button. Clicking this button runs a JavaScript function that passes the entered user name to the iFrame page and submits the page to the server. When the Servlet processes the iFrame page request, control returns to the iFrame page and it populates a message area in the parent window, indicating whether the login name is already used.

Installing and Running the Sample
I use JDeveloper 10g to build and run Web applications. The source code contains a workspace that you can open in JDeveloper to run the registration page, thereby running the application. If you don’t want to use JDeveloper, extract the contents of the included WAR file and open it in your favorite IDE. You can also deploy the WAR directly to any JSP/Servlet engine.

Registration Page: registration.jsp
The registration.jsp file is the registration page you’ll usually find in Web applications. Clicking the “check name” button calls the following JavaScript function:

function checkName(){    // Some Validation        //Set login_name field in the iframe's page.                window.frames['iframe1'].document.forms[0].login_name.value=   
     document.forms[0].login_name.value;     //Submit iFrame's page.          window.frames['iframe1'].document.forms[0].submit(); }

This function sets the login field in the iFrame page and submits the page’s form.

The iFrame Page: check_name.jsp
The iFrame page contains a form with one text field:

The text field is populated with the value the user enters in the parent page (registration.jsp). When the page is submitted to the server, a Servlet (RegistrationServlet) processes the request. The Servlet checks whether the user name is already used and sets an attribute in the request before forwarding it to check_name.jsp:

request.setAttribute("loginNameUsed", new Boolean(true) );

In check_name.jsp, JSP code generates JavaScript code that will populate the parent page’s message area, indicating whether the user name has already been used:

<%   // If condition only executed after the page has submitted a request to RegistrationServletif ( request.getAttribute("loginNameUsed") != null  ) {    Boolean loginNameUsed= (Boolean) request.getAttribute("loginNameUsed");    if ( loginNameUsed.booleanValue() == true )    {%> <%        }        else        {%> <%        }    }%>

Last Step: Make It Invisible
You can hide the iFrame once you’ve completed development and testing by setting its height and width to zero.

iFrames in the Real World
Because currently used browsers support iFrames, you can use them directly without any added configuration or setup effort. The example application demonstrated how with minimal development effort iFrames can make fetching data from the server transparent to the user, thus relieving users from having to wait while the application fetches the data.

Such a technique can be of great help with more complicated scenarios as well. In fact, I see many uses for iFrames in real world applications, including as an alternative for Applets in some cases. For example, the traditional ticker example built with applets can be easily done with iFrames embedding a JSP page.