Thursday 31 March 2016

Example For AJAX


EXAMPLE For AJAX :

  • To create ajax example, you need to use any server-side language e.g. servlet, jsp, php, asp.net etc. Here we are using JSP for generating the server-side code.
  • In this example, we are simply printing the table of the given number.
  • Steps to create ajax example with jsp
  • You need to follow following steps:
  • load the org.json.jar file
  • create input page to receive any text or number
  • create server side page to process the request
  • provide entry in web.xml file
  • Load the org.json.jar file
  • create input page to receive any text or number
  • In this page, we have created a form that gets input from the user. When user clicks on the showTable button, sendInfo()function is called. We have written all the ajax code inside this function.
  • We have called the getInfo() function whenever ready state changes. It writes the returned data in the web page dynamically by the help of innerHTML property.table1.html

  1. <html> 
  2. <head> 
  3. <script> 
  4. var request; 
  5. function sendInfo() 
  6. { 
  7. var v=document.vinform.t1.value; 
  8. var url="index.jsp?val="+v; 

  10. if(window.XMLHttpRequest){ 
  11. request=new XMLHttpRequest(); 
  12. } 
  13. else if(window.ActiveXObject){ 
  14. request=new ActiveXObject("Microsoft.XMLHTTP"); 
  15. } 
  16. try 
  17. { 
  18. request.onreadystatechange=getInfo; 
  19. request.open("GET",url,true); 
  20. request.send(); 
  21. } 
  22. catch(e) 
  23. { 
  24. alert("Unable to connect to server"); 
  25. } 
  26. } 
  27. function getInfo(){ 
  28. if(request.readyState==4){ 
  29. var val=request.responseText; 
  30. document.getElementById('amit').innerHTML=val; 
  31. } 
  32. } 
  33. </script> 
  34. </head> 
  35. <body> 
  36. <marquee><h1>This is an example of ajax</h1></marquee> 
  37. <form name="vinform"> 
  38. <input type="text" name="t1"> 
  39. <input type="button" value="ShowTable" onClick="sendInfo()"> 
  40. </form> 
  41. <span id="amit"> </span> 
  42. </body> 
  43. </html> 
create server side page to process the request

In this jsp page, we printing the table of given number.index.jsp

  1. <% 
  2. int n=Integer.parseInt(request.getParameter("val")); 
  3. for(int i=1;i<=10;i++) 
  4. out.print(i*n+"<br>"); 
  5. %> 

web.xml


  1. <?xml version="1.0" encoding="UTF-8"?> 
  2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" 
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
  5. http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 
  6. <session-config> 
  7. <session-timeout> 
  8. 30 
  9. </session-timeout> 
  10. </session-config> 
  11. <welcome-file-list> 
  12. <welcome-file>table1.html</welcome-file> 
  13. </welcome-file-list> 
  14. </web-app> 

Output