Ajax jsp tutorial

Example

index.html

<html>
<head>
<script type="text/javascript">  
var xmlHttpRequest;  
function sendInfo() {   
var num=document.testform.numText.value;  
var url="index.jsp?val="+num;   
if(window.XMLHttpRequest){  
	xmlHttpRequest=new XMLHttpRequest();  
} else if(window.ActiveXObject){  
	xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");  
}  
 
try {  
	xmlHttpRequest.onreadystatechange=getInfo;  
	xmlHttpRequest.open("GET",url,true);  
	xmlHttpRequest.send();  
} catch(e) {  
	alert("Not able to connect to server");  
}  
}  
 
function getInfo(){  
	if(this.readyState == 4 && this.status == 200){  
		var responseVal=xmlHttpRequest.responseText;  
		document.getElementById('test').innerHTML=responseVal;  
	}  
}  
 
</script>
</head>
<body>
	<h2>Ajax JSP Example</h2>
	<form name="testform">
		<input type="text" name="numText"/> 
		<input type="button" value="Get Table" onClick="sendInfo()"/>
	</form>
 
	<p id="test"> </p>
 
</body>
</html>

index.jsp

<%  
int number=Integer.parseInt(request.getParameter("val"));    
	for(int i=1;i<=10;i++) {
		out.print(i*number+"<br/>");   
	}
%>

index.html

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >
 
<web-app>
  <display-name>Archetype Created Web Application</display-name>
   <welcome-file-list>  
    	<welcome-file>index.html</welcome-file>  
   </welcome-file-list>  
</web-app>

Output

ajax example 1 - w3spoint

Please Share