Ajax Basics and Tutorials and code: Ajax Basics and Tutorials and code

Ajax in action
Ajax(Asynchronous JavaScript and Xml) is a new web development technique used for creating interactive web applications.
The intent is to make web pages feel more responsive by exchanging small amount of data with the server behind the scenes so that entire page does not want to reloaded when use request a change.Ajax is asynchronous in the sense that extra data is requested from the the server and loaded in the background without interfering with the display and behavior of the existing page .The intent is to make web pages feel more responsive by exchanging small amount of data with the server behind the scenes so that entire page does not want to when use request a change .

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>

TRADITIONAL WEB APPLICATION MODEL -
Traditional web application model send a request to the web server , which processes it and send back the response .Then there may be a small change on the web page but the entire page had to refreshed.

Ajax Supporting Browsers

1)Microsoft Internet Explorer 5.0
2)Mozilla Firefox 1.0 and above
3)Netscape 7.1 and above
4)Opera 7.6 and above
5)Konqueror
6)Apple Safari 1.2 and above

Ajax Components

JavaScript
Cascading Style Sheet(CSS)
Document Oject Model(DOM)
The XMLHttpRequest Object
Extensible Markup Language(XML)

JavaScript-description
JavaScript is the heart of an Ajax application.JavaScript is the most popular , client side programming language. JavaScript manipulates GUI interface elements via the javascript DOM and establishes communication with the web server asynchronously through the XMLHttpRequest.
CSS
Cascading Style Sheets (css) is a style sheet language used to describe the presentation of an an HTML document content embedded with in a markup language and passed to a Browser.CSS allows document style to be influenced by multiple style sheets.

Ajax Basics and Tutorials and code