Ajax Basics and Tutorials and code: Advantages of Ajax

Continuous feel : Traditional web application force a user to submit a form back to the web server .For example for a cricket score site we have to refresh each time the to watch the score.But using ajax applications we can asynchronously refresh the score with out page initilization.

Code For Live Cricket Score

DESCRIPTION OF CODE	HERE CRICKET SCORE WHICH IS CHANGED IN DATA BASE IS UPDATED IN THE PAGE "CRICKET.JSP"  USING AJAX .HERE DURING EVERY SECOND THE FUNCTION DISPLAY SCORE IS CALLED IN THE PAGE CRICKET.JSP .THE CURRENT SCORE IS BRING TO THE PAGE FROM CRICKETSQL.JSP BY AJAX CODE NOW LOOK IN TO CODE POSTED BY thomaspaul123@gamil.com------HTML AND AJAX CODE---------------PAG NAME CRICKET.JSP function createRequestObject()var xmlhttp=false;          xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");catch(e)tryxmlhttp=new AciveXObject("Microsoft.XMLHTTP");catch(E){xmlhttp=false;                  if(!xmlhttp && typeof XMLHttpRequest !='undefined')xmlhttp= new XMLHttpRequest();                    // for mozilla firefox return xmlhttp;function displayscore()var request=createRequestObject();request.open('GET','cricketsql.jsp',true);request.onreadystatechange=function()<br/>{<br/>if(request.readyState == 4)if(request.status == 200)var response=request.responseText;document.getElementById('cricketscore').innerHTML =response;request.send(null);setTimeout("displayscore()",1000);}---------HTML CODE--------------<br/><div id="cricketscore" style="width:1000"></div><script><br/>displayscore();</script>----------------------------<br/><br/>------------JSP CODE AND MYSQL CODE------------PreparedStatement pst; ResultSet rs= null;try{int i=0;Class.forName ("sun.jdbc.odbc.JdbcOdbcDriver");    Connection con = null;con =DriverManager.getConnection ("jdbc:odbc:cricket");String command="select * from cricket";pst=con.prepareStatement(command);rs=pst.executeQuery();if(rs.next())<br/>{<br/>int score=rs.getInt(1);int wicket=rs.getInt(2);int over=rs.getInt(3);out.println("<table border="0" width="661" height="250" bgcolor="white" align="left">");out.println("<tr><td colspan="6"><span style="font-size:130%;color:darkblue;">");out.println("<b>India Batting(");out.println(over);out.println("  overs</b>)</span></td></tr>");out.println("<tr>");out.println("<td width="150"><img src="cricketpic/ind.gif"/></td>");out.println("<td> </td>");out.println("<td> </td>");out.println("<td width="50"><span style="font-size:7;color:darkblue;"><b>Score:</b></span></td>");out.println("<td align="left"><span width="80" style="font-size:7;color:darkblue;">");out.println(score+" /  "+wicket);out.println("</span></td></tr>");out.println("</table>");     catch(Exception e){out.println(e);}%>

Code For Dyanmic Search

-----------------------------------------DESCRIPTION OF CODEHERE THIS IS CODE FOR DYNAMIC SEARCH VERY USEFUL FOR DEVELOPERSITS WORKING IS LIKE IF YOU PRESS A KEY FOR EXAMPLE "A" IT WILL DYNAMICALLY SEARCH FOR WORDS START WITH "A" IN THE DATABASE AND COME BACK AND DISPLAYS THE RESULT--------------------------------THIS IS THE IMPORTANT PORTIONS OF THE PROGRAM------ JAVASCRIPT AND AJAX PART---------1) SEARCH.JSP -PAGE CONTAINS AJAX AND HTML CODE<script>function createRequestObject(){var xmlhttp=false;          try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{xmlhttp=new AciveXObject("Microsoft.XMLHTTP");}catch(E){xmlhttp=false;                          }}if(!xmlhttp && typeof XMLHttpRequest !='undefined'){xmlhttp= new XMLHttpRequest();                    // for mozilla firefox }return xmlhttp;}function displayscore(){var a=document.form1.text1.value;//alert(a);var request=createRequestObject();request.open('GET','getcompanyname.jsp?detail='+a,true);// NOTE : EACH KEY VALUE ARE PASSESD TO DETAILS.JSP request.onreadystatechange=function(){if(request.readyState == 4){if(request.status == 200){var response=request.responseText;//alert(response);document.getElementById('result').innerHTML =response;}}}request.send(null);}</script>-------END OF AJAX PART------------HTML PART ----- <div id="main3" align="center">	   			 		    <h5>Dynamic Search</h5>			 <h5> Search Your company name or symbol</h5>		    <p> </p>		    		    <form action="" name="form1" method="post">                        <input onkeyup="displayscore();" name="text1" size="67" type="text"/>						<!-- EACH VALUE IS PASSED WHEN A KEY IS PRESSED --><div id="result">   </div>    ------------END OF HTML -------------BEGINING OF JSP PAGE FOR SEARCH-----------GETCOMPANYNAME.JSP<%resultset 15;rs="mobilebean.selectQuery(command);out.println(<table" rs="null;String" s="request.getParameter(detail);if(s.equals()){}else{		 String" command="select Name,Symbol from stockdetails where Name like '+s+%' or Symbol like '+s+%' limit" width="430" bgcolor="white">");            while(rs.next())            {              //int id=rs.getInt(1);                        String company=rs.getString(1);                       String Symbol=rs.getString(2);									 out.println("<tr><td id="hai" width="300">");			 out.println("<a href="sharestatus.jsp?stockval=">");	        out.println(company);			 out.println("</a>");			out.println("</td><td id="hai"><b><span style="color:green;">");			 out.println(Symbol);				        out.println("</span></b></td></tr>");           }                         out.println("");            }%>---------------END ------------------</%resultset></form></div>

Ajax Basics and Tutorials and code

Advantages of Ajax

Your Favourites

Ajax Basics

Timer

Ajax Working model

Ajax Basics and Tutorials and code

Ajax Basics and Tutorials and code

Live Cricket Score

Code For Live Cricket Score

Dynamic Search Like Google Suggest

Code For Dyanmic Search

How Ajax works

Ajax Working Model