How to show value from database to jsp without refreshing the page using ajax How to show value from database to jsp without refreshing the page using ajax database database

How to show value from database to jsp without refreshing the page using ajax


You have to make below changes :-In Servlet :-Set the response content type as:- response.setContentType("text/xml"); in top section of the servlet. By setting this we can send the response in XML format and while retrieving it on JSP we will get it based on tag name of the XML.

Do whatever operation you want in servlet...Save the value for ex-

String uname=";     uname="hello"; //some operation    //create one XML string    String sendThis="<?xml version='1.0'?>"            +"<Maintag>"            +"<Subtag>"            +"<unameVal>"+uname+"</unameVal>"                 +"</Subtag>"            +"</Maintag>"  out.print(sendThis);

Now we'll go to JSP page where we've to display data.

    function getXMLObject()  //XML OBJECT        {            var xmlHttp = false;            try {                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers            }            catch (e) {                try {                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+                }                catch (e2) {                    xmlHttp = false   // No Browser accepts the XMLHTTP Object then false                }            }            if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {                xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers            }            return xmlHttp;  // Mandatory Statement returning the ajax object created        }    var xmlhttp = new getXMLObject();   //xmlhttp holds the ajax object        function ajaxFunction() {            if(xmlhttp) {                xmlhttp.open("GET","NameList",true); //NameList will be the servlet name                xmlhttp.onreadystatechange  = handleServerResponse;                xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');                xmlhttp.send(null);            }        }        function handleServerResponse() {            if (xmlhttp.readyState == 4) {                if(xmlhttp.status == 200) {                   getVal();                }                else {                    alert("Error during AJAX call. Please try again");                }            }        }       function getVal()        {             var xmlResp=xmlhttp.responseText;             try{                if(xmlResp.search("Maintag")>0 )                {               var x=xmlhttp.responseXML.documentElement.getElementsByTagName("Subtag");                    var xx=x[0].getElementsByTagName("unameVal");                     var recievedUname=xx[0].firstChild.nodeValue;                   document.getElementById("message").innerText=recievedUname;//here                 }                 }catch(err2){                    alert("Error in getting data"+err2);                }        }

And here you are done. :)


1.In servlet code

PrintWriter output = response.getWriter();  String result = "value";  writer.write(result);  writer.close()

2. Why you don't use jquery ?
You can replace your code on -

$.post('url', function(data) {  $('#message1').html(data);  });

query post example


Probably off the hook but might be useful, rather than putting up all the javascript for Ajax call use some javascript library preferably jQuery for making the Ajax call.

Any javascript library you use will help you make the code compact and concise and will also help you maintain cross browser compatibility.

If you planning to write all the XHTTP code yourself, you might end up spending a lot of time for fixing cross browser issues and your code will have a lots of hacks rather than the actual business logic.

Also, using library like jQuery will also achieve the same stuff with less number of lines of code.

Hope that helps.