How to fetch data using Ajax HTTP "GET" method in Java

Many a times user like to see dynamic data (data coming from the server) without loosing the existing data filled on the form. In Java it is possible to achieve using Ajax call.

Lets see the steps to get the data from server side using AJAX call.

1) Create a Servlet to return dynamic data
2) Create a JSP to show dynamic data
3) Write Ajax function to place a request to server side and show data on client side
4) Run and Verify

We will see an example of fetching institute details dynamically based on the user operation.

Lets see the steps in detailed:

1) Create a Servlet to return dynamic data

Our servlet's doGet method returns hard coded values of the Institute which will be shown by the browser to the end user. Instead of hard coded value you can read data from the file system / database etc. For demo purpose I have used hard coded value to keep the things simple.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
out.print("1) ABC </br> 2) XYZ </br> 3) PQR </br>");
}


2) Create a JSP to show dynamic data

Here is the code snippet of the index.jsp:

<form name="studnet" method="get" action="/student">
<div><b>Institute Details</b> : 
<input type="button" value="Get Institutes" onclick='fetchInstituteNames("/student/Register")' /></div>
<div id="institute"></div>
</form> 


When user clicks on the "Get Institutes" button "fetchInstituteNames()" js function will be triggered.

3) Write Ajax function to place a request to server side and show data on client side

<script type="text/javascript">
function fetchInstituteNames(requestURL)
{
   //Need to create a XMLHttpRequest object which will place a request to the server
   var xmlhttpobj;
   if (window.XMLHttpRequest){
    xmlhttpobj = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari
   } else {
    xmlhttpobj = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5
   }
   //1st parameter depicts HTTP method in our case its a GET
   //3rd parameter is true means its an asynchronous GET request
   xmlhttpobj.open("GET", requestURL, true);
    
   //When readyState is 4 then get the server output
   xmlhttpobj.onreadystatechange = function() {
       if (xmlhttpobj.readyState == 4) {
           if (xmlhttpobj.status == 200) {
               document.getElementById("institute").innerHTML = xmlhttpobj.responseText;                
           }
           else {
               alert('Data Unavailable!');
           }
       }
   };
   xmlhttp.send(null);
}

</script>

4) Run and Verify

In our dynamic web application our index.jsp will look like below, when user hits the URL:

Once user clicks on the "Get institutes" button Ajax request will be triggered and names of the Institutes will be returned from the server. Which will be shown on the JSP page via "fetchInstituteNames" js function.

Cheers!
Henal Saraiya
(Lead Consultant)
CIGNEX Datamatics