Sreekanth's Weblog: A simple AJAX call with a Progress bar

This is a simple code sample for a REST based service call from a Script using a XMLHttpRequest. This also shows a way of displaying a status progress GIF file while the Async call is happening and make it disappear when the work is done.

(*This is a simple implementation with XHR-wanted to show bare-bones implementation, You can do this much better and simpler with JQuery)

This will show some status progress as shown in the figure below and the XML returned from the REST service will be displayed on the Text Area.



<body class="mystyle">
<form name="myform">
<center> <P class="special"> Hello - this is my Web application, Welcome </P></center>

<br><br>
    <textarea name="RestResponse" rows="8" cols="100"></textarea>   
<br><br>
    <div id="progress"></div>
<br><br>
    <button id="RestServiceButton" type="button" onclick="rest_button()">
    Call Rest Service</button>
    <button id="ClearTextButton" type="button" onclick="clear_button()">
    Clear Data</button>
<br>
<br>
<script type="text/javascript">
 
    //show the progress bar - make it visible - use any progress bar gif file
    function show_progressbar(id) {
        replace_html(id,
                '<img src="bigrotation2.gif" border="0" alt="Loading, please wait..." />');
    }
 
    //hide the progress bar - make it visible
    function hide_progressbar(id) {
        replace_html(id, "");
    }
    
   //function to set the innerhtml.
    function replace_html(id, content) {
        document.getElementById(id).innerHTML = content;
    }

    function clear_button()
    {
        document.myform.RestResponse.value="";
    }
 
    // button function for REST call
    function rest_button()
    {
        // Going to use XMLHTTPRequest to make an AJAX call to the Rest Service        
        var xmlhttp = null;       
        if (window.XMLHttpRequest)
        {
              xmlhttp = new XMLHttpRequest();
              if ( typeof xmlhttp.overrideMimeType != 'undefined') {
                xmlhttp.overrideMimeType('text/xml');
              }
        }
        else if (window.ActiveXObject) {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
              alert('Does your browser support AJAX?');
        }       

        // Open and send the Request to the REST service
        xmlhttp.open('GET', "http://localhost:8080/MyRestWSProject/RestServlet", true);
        xmlhttp.send(null);
        show_progressbar("progress");

        // The Ready state would change from 0,1,2, 3 and 4.
        xmlhttp.onreadystatechange = function() {         
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  //alert ("This is the response from the server: " +  xmlhttp.responseText);
                  hide_progressbar("progress");
                  document.myform.RestResponse.value="";
                  document.myform.RestResponse.value+=xmlhttp.responseText;
              } else {
                  // Nothing to do, Just wait !!!                    
              }             
            };

    }   
   
</script>
</form>
</body>

Sreekanth's Weblog

Thursday, April 22, 2010

A simple AJAX call with a Progress bar

1 comment:

Labels