tag:blogger.com,1999:blog-12118297302387986282024-02-19T09:24:05.555+05:30Step by Step Ajax Tutorial for BeginnersEasy and fastest way to learn Ajax tutorial. This ajax tutorial contains real time example and step by step Ajax tutorial for beginners. Every one can easily learn this ajax tutorialUnknownnoreply@blogger.comBlogger12125tag:blogger.com,1999:blog-1211829730238798628.post-78176483410125953302010-09-27T18:33:00.004+05:302011-03-06T19:06:25.256+05:30AJAX Suggestion Text Box | AJAX Auto Complete Using JSP JAVA, JQuery<div style="text-align: center;">
<span style="font-size: large;"><b>AJAX Suggestion Text Box </b></span></div>
<div style="text-align: center;">
<span style="font-size: large;"><b>AJAX Auto Complete Text Box Using JSP JAVA</b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The latest Websites uses AJAX for user friendly. </div>
<div style="text-align: justify;">
Text box Auto Complete is latest trend to display the typing word as dropdown.</div>
<div style="text-align: justify;">
Example google shows the drop down.</div>
<div style="text-align: justify;">
<b>How to create Suggestion Box?</b></div>
<div style="text-align: justify;">
Its simple because if you gonna use jQuery then it takes little time. However you need the Business logic to work on Database. </div>
<div style="text-align: justify;">
You have to configure your coding structure for connecting to Database. Whenever user types a letter in the Text box then using onkeyup event in javascript have to ping up the Database. Using like statement in Database have to retrieve the value and display it in View part i mean in JSP.<br />
<br />
<h3>
Description</h3>
The AutoSuggest class adds a pulldown menu of suggested values to a
text field. The user can either click directly on a suggestion to enter
it into the field, or navigate the list using the up and down arrow
keys, selecting a value using the enter key. The values for the
suggestion list are to provided as XML, <em>or as JSON</em> (by a PHP script, or similar).<br />
The results of the first request are cached on the client machine and
are filtered as the user continues to type, to reduce the number of
requests hitting the server.<br />
In the JSON example above a callback function is passed to the
autoSuggest instance. It is called when the user selects an entry, and
inserts the entry id into a hidden field (visible for this example).<br />
In the XML example below supplementary information is being displayed along with the names, in this case an english county.<br />
<br />
Example for AJAX Suggestion Box:<br />
<br />
Visit <a href="http://www.tutorialsfree.net/">TutorialsFree.net </a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1211829730238798628.post-26366459344155179342010-09-06T11:02:00.000+05:302010-09-06T11:02:10.835+05:30Step by Step AJAX Tutorial for Beginners - Index Page Chapter Wise Tutorial<div style="text-align: center;">
<span style="font-size: large;"><b> Step by Step AJAX Tutorial for Beginners - Contents Page Chapter Wise</b></span></div>
<div style="margin-left: 160px; text-align: center;">
<br /></div>
<ul style="margin-left: 160px; text-align: left;">
<li> <span style="font-size: large;"><a dir="ltr" href="http://ajaxtutorialonline.blogspot.com/search/label/1.%20AJAX%20Introduction">1. AJAX Introduction</a></span> </li>
<li> <span style="font-size: large;"><a dir="ltr" href="http://ajaxtutorialonline.blogspot.com/search/label/2.%20How%20Ajax%20Works%3F">2. How Ajax Works?</a></span> </li>
<li> <span style="font-size: large;"><a dir="ltr" href="http://ajaxtutorialonline.blogspot.com/search/label/3.%20Software%20needed%20for%20AJAX">3. Software needed for AJAX</a></span> </li>
<li> <span style="font-size: large;"><a dir="ltr" href="http://ajaxtutorialonline.blogspot.com/search/label/4.%20Ajax%20Browser%20compatibility">4. Ajax Browser compatibility</a></span> </li>
<li> <span style="font-size: large;"><a dir="ltr" href="http://ajaxtutorialonline.blogspot.com/search/label/5.%20Ajax%20Example1">5. Ajax Example1</a></span> </li>
<li> <span style="font-size: large;"><a dir="ltr" href="http://ajaxtutorialonline.blogspot.com/search/label/6.%20Example%201%3A%20Source%20code">6. Example 1: Source code</a></span> </li>
<li> <span style="font-size: large;"><a dir="ltr" href="http://ajaxtutorialonline.blogspot.com/search/label/7.%20Example%3A1%20AJAX%20Source%20Code%20Explained">7. Example:1 AJAX Source Code Explained</a></span> </li>
<li> <span style="font-size: large;"><a dir="ltr" href="http://ajaxtutorialonline.blogspot.com/search/label/8.%20Example%202%3A%20Ajax%20with%20Database">8. Example 2: Ajax with Database</a></span> </li>
<li> <span style="font-size: large;"><a dir="ltr" href="http://ajaxtutorialonline.blogspot.com/search/label/9.%20Example%203%20%3A%20AJAX%20Database%20using%20Struts">9. Example 3 : AJAX Database using Struts</a></span></li>
<li><span style="font-size: large;"><a href="http://ajaxtutorialonline.blogspot.com/2010/09/steps-for-dynamic-city-state-loading-on.html">10. Example 4: Dynamic City State Loading</a></span></li>
</ul>
<div style="text-align: center;">
<br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1211829730238798628.post-61000162922881221622010-09-05T23:32:00.003+05:302010-09-06T10:59:48.115+05:30Steps for Dynamic City, State Loading on Selecting a Country using AJAX with Database Connection<div style="text-align: center;">
<span style="font-size: large;"><b><span style="font-size: small;">Dynamic City, State Loading based on Country Selection </span></b></span></div>
<div style="text-align: center;">
<span style="font-size: large;"><b><span style="font-size: small;"> </span><span style="font-size: small;">Without Reloading the Page </span></b></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: small;">In previous chapter i explained Database connection with Ajax. </span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><span style="font-size: small;">Now we will discuss how to load City and State on particular Country selection using Combo Box or Drop Down Box</span></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><span style="font-size: small;">Use Servlets or Struts for Connecting Database the response from action should be in xml format.</span></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><span style="font-size: small;">Check Below link to create Servlet class </span></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><span style="font-size: small;">http://ajaxtutorialonline.blogspot.com/2010/09/steps-to-connect-ajax-with-database-to.html.</span></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Configure Web.xml </b><br />
<b>------------------------- </b></div>
<div style="text-align: justify;">
<b><servlet></b></div>
<div style="text-align: justify;">
<b><servlet-name>DynamicLoading</servlet-name> </b></div>
<div style="text-align: justify;">
<b><servlet-class>com.CountryLoad</servlet-class></b></div>
<div style="text-align: justify;">
<b></servlet></b></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<b><servlet-mapping></b></div>
<div style="text-align: justify;">
<b><servlet-name></b><b>DynamicLoading</b><b></servlet-name></b></div>
<div style="text-align: justify;">
<b><url-pattern>/Country</url-pattern></b></div>
<div style="text-align: justify;">
<b></servlet-mapping></b></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<span style="font-size: large;"><span style="font-size: small;"> </span></span>public class <b>DynamicLoading </b>extends HttpServlet<br />
{<br />
public void doGet(HttpServletRequest request, HttpServletResponse response) <br />
{<br />
try<br />
{<br />
String val = request.getParameter("id"); <br />
String stor=null;<br />
Connection con = null;<br />
PreparedStatement pst =null;<br />
ResultSet rs=null; <br />
response.setContentType("text/xml");<br />
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); <br />
pst = con.prepareStatement("select State from Country where Country=?");<br />
pst.setString(1,val);</div>
<div style="text-align: justify;">
response.getWriter().write("<Country>");<br />
while(rs.next())<br />
{<br />
stor =rs.getString(1); <br />
response.getWriter().write("<state>"+stor+"</state>");<br />
}</div>
<div style="text-align: justify;">
response.getWriter().write("</Country>");<br />
con.close();<br />
}catch(SQLException e)<br />
{<br />
<br />
}<br />
}<br />
}<span style="font-size: large;"><b><br /></b></span></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1211829730238798628.post-75019349425039693442010-06-22T21:32:00.010+05:302010-07-24T17:19:13.607+05:30Step by Step Ajax tutorial for Beginners<div style="text-align: center;">
<b>Step by Step Ajax tutorial for Beginners</b></div>
<div style="text-align: left;">
<b>Brief Introduction to Ajax:</b></div>
<div style="text-align: center;">
<div style="text-align: justify;">
Ajax is the Latest Technology which is used in Web Application Development. </div>
<div style="text-align: justify;">
Ajax is not popular until Google use that. In the year 2005 Google use's AJAX in Gmail, Google Search and GoogleMaps etc makes ajax popular. </div>
<div style="text-align: justify;">
<b>Use of AJAX:</b></div>
<div style="text-align: justify;">
AJAX is used to build a dynamic website without reloading a page, menus or images etc. </div>
<div style="text-align: justify;">
Also its very faster and save resources.</div>
<div style="text-align: justify;">
Processing of web page is on Server side using web services, JSP or PHP Scripts.<br />
For example, fields of forms, choices of user, may be processed and the result displayed immediately into the same page. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>What is Ajax?</b></div>
<div style="text-align: justify;">
Ajax is defined as Asynchronous Javascript XML.<br />
If you need a fastest website use ajax.<br />
Look and feel is good.<br />
<br />
XML Extensible Markup Language is a very good option for programmers because using xml we can parse all kind of results using AJAX.<br />
In my Example's i used ordinary methods like <b>innerHTML</b> for displaying results in Html Format.<br />
Each and every Program and example's of this is using JavaScript. By using DIV i displayed dynamic results and Many more so you can have a look at all things below.<br />
<br /></div>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1211829730238798628.post-41401150763251947402010-06-22T21:30:00.004+05:302010-07-24T17:17:06.554+05:30Step by Step Ajax tutorial for Beginners2How AJAX works?<br />
Ajax works on xmlHttp Request to server and Client.<br />
<br />
<table align="center" border="1" style="background-color: #ea222d; border-color: green; color: white; font-size: large;"><tbody>
<tr><td>1. Client Browser (Sends Request)</td></tr>
<tr><td bgcolor="white"></td></tr>
<tr><td>2 Server (Process the Request and sends the Response)</td></tr>
<tr><td bgcolor="white"></td></tr>
<tr><td>3. Client Browser ( process the request using Javascript and Displays the Content)</td></tr>
</tbody></table>
<br />
1. Clients creates xmlHttpRequest to server.<br />
2. Server process the HttpRequest from client. And send response to the client browser.<br />
3. Client browser process the returned data using javascript. Content of the page will be updated.<br />
<br />
Do you know 95% of AJAX is JAVASCRIPT only.<br />
WHAT CAN WE DO WITH AJAX?<br />
With AJAX we can do lot of things display a result dynamically as well as differently in appearance wise. Thing of google worlds top search engine uses AJAX as a main source. Did you Noticed while typing in a search box in google a drop down search suggestion will open. Have you wondered about how it works? Its all of AJAX.<br />
You can load the content dynamically as you want to display it in time. For Example If you having a very big content in your Database or some thing which is Large to load in browser at that time you can show a loading image so user can easily identify that content is loading or processing. After content has been been loaded it will be displayed to user browser.<br />
With AJAX we can fetch the data from database and parse that as XML and display it in browser as you like. AJAX is very faster in loading its a great thing to use AJAX.<br />
However it is I wrote many examples of AJAX coding in my tutorial. <br />
So learn AJAX and play with it. <br />
ALL THE BEST<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1211829730238798628.post-70920059699791355242010-06-22T21:00:00.001+05:302010-07-24T17:17:52.584+05:30Ajax Browser support<div style="text-align: center;">
<span style="font-size: large;"><b>Ajax Browser support</b></span></div>
Ajax supports all kind of browsers with small conflicts.<br />
Older browsers like Internet Explorer 5.0 6.0 didn't support xmlHttpRequest directly so instead they are using ActiveXObject which is implemented in Explorer 5.0 and 6.0.<br />
<br />
Latest Browsers like Firefox, Opera, Chrome, Safari and IE 8 implemented the xmlHttpRequest to support Ajax.<br />
<br />
<br />
Note:<br />
At first website must satisfy a Compatible view in all kind of browsers. If you use ajax in your web Application then you have to use two kind of codes for compatibility. <br />
<b><br />
</b><br />
<table align="center" border="1" style="background-color: #ea222d; border-color: green; color: white; font-size: large;"><tbody>
<tr><td align="center" bgcolor="white" style="color: black;">Older Browsers like IE5.0 and IE6.0</td></tr>
<tr><td>xmlhttp = new ActiveXObject("Microsoft.XMLHttpRequest");</td></tr>
</tbody></table>
<br />
<br />
<table align="center" border="1" style="background-color: #ea222d; border-color: green; color: white; font-size: large;"><tbody>
<tr><td align="center" bgcolor="white" style="color: black;">For Latest Browsers</td></tr>
<tr><td>xmlhttp = new XMLHttpRequest();</td></tr>
</tbody></table>
<br />
So using the above code creates an object for all kind of browsers. No more compatible issue in using Ajax. <br />
<br />
<table align="center" border="1" style="background-color: #ea222d; border-color: green; color: white; font-size: large;"><tbody>
<tr><td align="center" bgcolor="white" style="color: black;">Code for Checking Browser Compatibility </td></tr>
<tr><td>if (window.XMLHttpRequest)<br />
{// code for IE7+, Firefox, Chrome, Opera, Safari<br />
xmlhttp=new XMLHttpRequest();<br />
}<br />
else<br />
{// code for IE6, IE5<br />
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");<br />
} <br />
<br /></td></tr>
</tbody></table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1211829730238798628.post-16594618919153981082010-06-22T20:55:00.007+05:302010-07-24T17:17:38.257+05:30Software needed to Code AJAX Program- Explained in SCREEN SHOTS<div style="text-align: center;">
<span style="font-size: large;"><b>Tools and Software needed to Code AJAX</b></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><span style="font-size: small;">You can develop AJAX based Application easy and quickly without the help of any third party tools and software's. For your convenience you can use Eclipse IDE, NetBeans etc. </span></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><span style="font-size: small;">Myself i put some screen shots or images of Eclipse IDE to develop your own AJAX based Application. You can develop ajax application without using IDE but its not reliable because we need Tomcat Apache Server to run and verify our application.</span></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><span style="font-size: small;">Follow below steps to achieve a good end result for your AJAX Application. </span></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><span style="font-size: small;">For this i used a freeware software Eclipse IDE which is mainly used to develop JAVA, J2EE based Applications.</span></span></div>
<ol>
<li><span style="font-size: large;"><span style="font-size: small;">Download Eclipse IDE from this Eclipse Official Website <a href="http://www.eclipse.org/downloads/">http://www.eclipse.org/downloads/ </a></span></span></li>
<li><span style="font-size: large;"><span style="font-size: small;">Open and install Eclipse if you need Java Runtime Environment( JRE and JDK) <a href="http://java.sun.com/">http://java.sun.com</a> download from this site and install it. You can code your program without using JRE and JDK its not necessary for AJAX based application.</span></span></li>
<li><span style="font-size: large;"><span style="font-size: small;">Download Freeware Tomcat Apache Server now latest version 7.0 is available but i gave you the link for Apache Tomcat 6.0 <a href="http://tomcat.apache.org/download-60.cgi">http://tomcat.apache.org/download-60.cgi </a>Click the ZIP file and start download and install that with default password and username.</span></span></li>
<li><span style="font-size: large;"><span style="font-size: small;">Open Eclipse IDE and it prompts you to enter Workspace just give your application name.</span></span></li>
</ol>
<div style="text-align: justify;">
<b><span style="font-size: large;"><span style="font-size: small;"><br /></span></span></b></div>
<div style="text-align: justify;">
<b><span style="font-size: large;"><span style="font-size: small;">Step By Step to develop AJAX program in Eclipse IDE(Integrated Development Environment):</span></span></b></div>
<div style="text-align: justify;">
<b><br /></b><br />
<div style="color: red;">
<b>STEP 1 : </b></div>
<div style="color: black;">
<b>Open Eclipse IDE</b></div>
</div>
<div style="text-align: justify;">
<span style="font-size: large;"><span style="font-size: small;"> </span><b> </b></span></div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtUIUvYaBXTVvXftlcJfUsXikO9x0EVRKln0B1TZ8bVH7Nflbk5M-TeFyG9_g_9TtRwz98GmcWaAfllNkvqevi_Cy3XFMCiu60XnzYHA6xvgMrS-PVSty19xVRdRAknVDz01LoDgiOJes/s1600/Ajax_tutorial_Eclipse1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtUIUvYaBXTVvXftlcJfUsXikO9x0EVRKln0B1TZ8bVH7Nflbk5M-TeFyG9_g_9TtRwz98GmcWaAfllNkvqevi_Cy3XFMCiu60XnzYHA6xvgMrS-PVSty19xVRdRAknVDz01LoDgiOJes/s320/Ajax_tutorial_Eclipse1.jpg" /></a></div>
<br />
<div style="color: red; text-align: justify;">
<b>STEP 2: </b></div>
<div style="text-align: justify;">
<b>Click File ==> New ==> Project (2)</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-k7pQc37QY0ssfWaZAuo_wX_n-aj8z0ra6LzQrJdLASGTB5qMwUzKObT8E2kihVlLajaVIpedtt-Km13fi-wxnXti72o7MS3BRpxLjYY4IgB13fP0wdxWIq7ir4VRH5XAZXJk7dr-bSo/s1600/Ajax_tutorial_Eclipse2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-k7pQc37QY0ssfWaZAuo_wX_n-aj8z0ra6LzQrJdLASGTB5qMwUzKObT8E2kihVlLajaVIpedtt-Km13fi-wxnXti72o7MS3BRpxLjYY4IgB13fP0wdxWIq7ir4VRH5XAZXJk7dr-bSo/s320/Ajax_tutorial_Eclipse2.jpg" /></a></div>
<br />
<br />
<div style="color: red; text-align: justify;">
<b>STEP 3:</b></div>
<div style="text-align: justify;">
<b> Click WEB ==> Dynamic Project</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirnJcHBRNb9C9SAqitw8AnQ7CSDK-OcESwl-kpc2VPASMJHJCrNPrsr3RWU63ZcD_bTpfJvAuNGH-753Jy9MkizkC77xS9fgwtULl7LYiMX_0qmL59E2mAAjlVkGMOVVbfNzhG-1CcgvI/s1600/Ajax_tutorial_Eclipse3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirnJcHBRNb9C9SAqitw8AnQ7CSDK-OcESwl-kpc2VPASMJHJCrNPrsr3RWU63ZcD_bTpfJvAuNGH-753Jy9MkizkC77xS9fgwtULl7LYiMX_0qmL59E2mAAjlVkGMOVVbfNzhG-1CcgvI/s320/Ajax_tutorial_Eclipse3.jpg" /></a></div>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="color: red; text-align: justify;">
<b>STEP 4: </b></div>
<div style="text-align: justify;">
<b>Name Your Project and Click Finish</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2ik_aG6GITfvzA38aKMJdlfosEG9SHOSUOh1PaaB4KVhfK2GKkY8yJVKobOg9ubE9tqCaH3Alh9gAK5CESc6qM7e7znEBwpPh16urrqXLdsyNZinwElDPY9ojNNfpYLUhXkPl0sIt78/s1600/Ajax_tutorial_Eclipse4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2ik_aG6GITfvzA38aKMJdlfosEG9SHOSUOh1PaaB4KVhfK2GKkY8yJVKobOg9ubE9tqCaH3Alh9gAK5CESc6qM7e7znEBwpPh16urrqXLdsyNZinwElDPY9ojNNfpYLUhXkPl0sIt78/s320/Ajax_tutorial_Eclipse4.jpg" /></a></div>
<br />
<br />
<div style="color: red; text-align: justify;">
<b>STEP 5 : </b></div>
<div style="text-align: justify;">
<b>Now you can see a Project Explore. </b></div>
<div style="text-align: justify;">
<b>Click Server tab as i mentioned in red mark </b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UjIyJfx575JhgY81EUzi1WyVK_GVJHuaow0kuz_h2C5MZh7Upu4Z6ErR6mffa-d4SfDYnPkkgNSykExglULXJY8nA05M4HSSHT-rrC_T2TqHJKn_T0boRGdXJ-Ol-S5DgtUtCJKu24A/s1600/Ajax_tutorial_Tomcat1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UjIyJfx575JhgY81EUzi1WyVK_GVJHuaow0kuz_h2C5MZh7Upu4Z6ErR6mffa-d4SfDYnPkkgNSykExglULXJY8nA05M4HSSHT-rrC_T2TqHJKn_T0boRGdXJ-Ol-S5DgtUtCJKu24A/s320/Ajax_tutorial_Tomcat1.jpg" /></a></b></div>
<b><br /></b><br />
<div style="text-align: justify;">
<b><br /></b></div>
<div style="color: red; text-align: justify;">
<b>STEP 6: </b></div>
<div style="text-align: justify;">
<b>Right click on the space provided in server tab Click New ==> Server</b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhujNgX8DJNp5iVJoIq2BiwRP4D6OqAWY-yR_KbEe-FnlOGsJw-X8cZwlULhxbgDbf5_hkTdFStb26pyrJ3PM3NNr77EGSZ2nVI6weTrHY_MD_pXtbwEEHnVnvCzEt6QJLZ1sOiEdCGTEw/s1600/Ajax_tutorial_Tomcat2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhujNgX8DJNp5iVJoIq2BiwRP4D6OqAWY-yR_KbEe-FnlOGsJw-X8cZwlULhxbgDbf5_hkTdFStb26pyrJ3PM3NNr77EGSZ2nVI6weTrHY_MD_pXtbwEEHnVnvCzEt6QJLZ1sOiEdCGTEw/s320/Ajax_tutorial_Tomcat2.jpg" /></a></b></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="color: red; text-align: justify;">
<b>STEP 7: </b></div>
<div style="text-align: justify;">
<b>Now a window will open Click Apache ==> then select appropriate server which you installed as i mentioned above. Here i using Tomcat 6.0</b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpx_itWb2JELy_kZ__ok8AIKCeoMhc6M8Q9iL1SvokIpNbNkTmU1wMZGzURCEIECluTjaV1VThr8_opghk769BmOXye7wexo2qg9EYtkppF-6WXbZUmoA4tnH3kvrhGM1xC3OsodhqdDo/s1600/Ajax_tutorial_Tomcat4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpx_itWb2JELy_kZ__ok8AIKCeoMhc6M8Q9iL1SvokIpNbNkTmU1wMZGzURCEIECluTjaV1VThr8_opghk769BmOXye7wexo2qg9EYtkppF-6WXbZUmoA4tnH3kvrhGM1xC3OsodhqdDo/s320/Ajax_tutorial_Tomcat4.jpg" /></a></b></div>
<b><br /></b><br />
<b><br /></b><br />
<div style="color: red; text-align: justify;">
<b>STEP 8:</b></div>
<div style="text-align: justify;">
<b> In this step you going to select the Tomcat Apache Installed Path. I installed in my system in this path C:\Program Files\Apache Software Foundation\Tomcat 6.0 </b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxwmd6dH_p8waZNRPFQpQmgiiaHgw8uVzRAMf2K6zdE5qT8K6Cg9_nSxnTycErbkjYGNQ0YOVcd91UFoMVE5PjvsIXvWrgelmaPvq2qqL74FrpKjBoMErczSzGB2jQnwyxV24sUqUjisM/s1600/Ajax_tutorial_Tomcat5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxwmd6dH_p8waZNRPFQpQmgiiaHgw8uVzRAMf2K6zdE5qT8K6Cg9_nSxnTycErbkjYGNQ0YOVcd91UFoMVE5PjvsIXvWrgelmaPvq2qqL74FrpKjBoMErczSzGB2jQnwyxV24sUqUjisM/s320/Ajax_tutorial_Tomcat5.jpg" /></a></div>
<br />
<b><br /></b><br />
<div style="color: red; text-align: justify;">
<b>STEP 9 : </b></div>
<div style="text-align: justify;">
<b>Right Click in WebContent folder in Eclipse and then </b></div>
<div style="text-align: justify;">
<b>Click New ==> select JSP Name your JSP and click Finish</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC4AbHIqdfwnjgi4Fwv9xIk-wTT5QJfqGBYvgGOl9pEkFGUKAws1tgNGOsub5nZPafTEQ9sTpF6kt7lLf41blVvuuyUYJD_rvT8b1WCZ0G0UYqC_aFRKTgs9wqmUwo6X_X7SMH3_ZNIa0/s1600/Ajax_tutorial_Tomcat7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC4AbHIqdfwnjgi4Fwv9xIk-wTT5QJfqGBYvgGOl9pEkFGUKAws1tgNGOsub5nZPafTEQ9sTpF6kt7lLf41blVvuuyUYJD_rvT8b1WCZ0G0UYqC_aFRKTgs9wqmUwo6X_X7SMH3_ZNIa0/s320/Ajax_tutorial_Tomcat7.jpg" /></a></div>
<br />
<div style="color: red; text-align: justify;">
<b>STEP 10 : </b></div>
<div style="text-align: justify;">
<b>Start Coding your Program as i Mentioned in coding section <a href="http://ajaxtutorialonline.blogspot.com/2010/06/ajax-simple-example-1.html" target="_blank">CLICK HERE</a> .</b></div>
<div style="text-align: justify;">
<b>After completed your Coding save your Project. Right click on the Tomcat Apache server which is at the bottom of the Eclipse and Click Start. After that Tomcat Apache Server will start running in Default 8080 port.</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF8HEp78j1f8CE61RosmPDGXfqajKjMi5McGp2VIKohjDldB0XGnQNk0wg1k0axBOCxGCVMVbV4YTCSfZadzNn92lwJMMzh9c29qq2SwNVk8PNSEsTRJ7EwTI4RbggWzMYvxK1uIJO4A4/s1600/Ajax_tutorial_Tomcat6.5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF8HEp78j1f8CE61RosmPDGXfqajKjMi5McGp2VIKohjDldB0XGnQNk0wg1k0axBOCxGCVMVbV4YTCSfZadzNn92lwJMMzh9c29qq2SwNVk8PNSEsTRJ7EwTI4RbggWzMYvxK1uIJO4A4/s320/Ajax_tutorial_Tomcat6.5.jpg" /></a></div>
<br />
<div style="color: red; text-align: justify;">
<b>STEP 11: </b></div>
<div style="text-align: justify;">
<b>Open your Browser here i used IE(Internet Explorer 7.0) Just type url.</b></div>
<div style="text-align: justify;">
<b>Example: http://localhost:8080/Ajax/sample.jsp</b></div>
<div style="text-align: left;">
Note: http://localhost ----- is the local hostname</div>
<div style="text-align: left;">
8080----> is port number. So its common no need to change any names in this type as i said <b>http://localhost:8080/</b></div>
<div style="text-align: left;">
After http://localhost:8080/ i mentioned<b> Ajax is the Project Name</b> which you give during the creation of project. <b>sample.jsp is the name of your JSP page</b> which you created.</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRHjflc6ZgsnnEzuHnKsCOxUCWdm4AuwUnLAx07W4cMjEn36juk02GP0kTOttVoiiweNcihsXDgio84FngARlPQ2ehZ5aymVI34jIb0NG52MVKfdMlEAM2Xntm_WxROn78Q6rWMYe7ZMo/s1600/Internet_explorer.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRHjflc6ZgsnnEzuHnKsCOxUCWdm4AuwUnLAx07W4cMjEn36juk02GP0kTOttVoiiweNcihsXDgio84FngARlPQ2ehZ5aymVI34jIb0NG52MVKfdMlEAM2Xntm_WxROn78Q6rWMYe7ZMo/s320/Internet_explorer.jpg" /></a></div>
<br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1211829730238798628.post-48395973776171048042010-06-22T20:43:00.004+05:302010-08-06T07:50:25.386+05:30Ajax simple Example 1<script type="text/javascript">
function hide()
{
var x =document.getElementById("hello");
x.innerHTML="";
}
function ajax()
{
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
var x= document.getElementById("hello");
x.innerHTML= "<h3>Hi Welcome to Ajax tutorial</h3>"+
"<h2 style='color:red;'>KamalakannanJS</h2>";
}
xmlhttp.open("Post","http://ajaxtutorialonline.blogspot.com");
xmlhttp.send();
}
</script>
<b>Ajax Simple Example to show or hide the Data dynamically without reloading the Page</b>
If you click "Show Button" it show some data below. If you click "Hide Button" then it hides the data that shown.
Try clicking the button below
<br />
<input onclick="ajax();" type="submit" value="Show" />
<input onclick="hide();" type="submit" value="Hide" />
<br />
<div id="hello">
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1211829730238798628.post-73844510362343236432010-06-20T21:59:00.008+05:302010-07-24T17:27:46.924+05:30Ajax Simple Example 1<script type="text/javascript">
function hide1()
{
var x =document.getElementById("hel");
x.innerHTML="";
}
function ajax1()
{
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
var x= document.getElementById("hel");
x.innerHTML= "<h3>Hi Welcome to Ajax tutorial</h3><h2 style='color:red;'>"+
"Kamalakannan JS</h2>";
}
xmlhttp.open("Post","http://ajaxtutorialonline.blogspot.com");
xmlhttp.send();
}
</script><br />
<b>Ajax Simple Example</b><br />
In previous chapter i explained browser compatibility for browser.<br />
So now we will see a simple example for AJAX.<br />
<br />
<b><input onclick="ajax1();" type="submit" value="Show" /><br />
<input onclick="hide1();" type="submit" value="Hide" /><br />
</b><br />
<div id="hel">
</div>
<br />
<br />
<table align="center" border="1" style="background-color: lightskyblue; border-color: green; color: white; font-size: large;"><tbody>
<tr style="font-family: "Courier New",Courier,monospace;"><td align="center" bgcolor="white" style="color: black;"><b><span style="font-size: small;">Code for Example 1 </span></b></td></tr>
<tr style="color: black; font-family: "Courier New",Courier,monospace;"> <td><span style="font-size: small;"> </span><br />
<span style="font-size: small;">function hide()</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">var x =document.getElementById("hello");</span><br />
<span style="font-size: small;">x.innerHTML="";</span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;">function ajax()</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">if(window.XMLHttpRequest)</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">xmlhttp = new XMLHttpRequest();</span><br />
<span style="font-size: small;"> </span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;">else</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");</span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;">xmlhttp.onreadystatechange=function()</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">var x= document.getElementById("hello");</span><br />
<span style="font-size: small;">x.innerHTML= "<h3>Hi Welcome to Ajax tutorial</h3><h2 style='color:red;'>Kamalakannan JS</h2>";</span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;">xmlhttp.open("Post","http://ajaxtutorialonline.blogspot.com");</span><br />
<span style="font-size: small;">xmlhttp.send();</span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;"><br />
</span></td></tr>
</tbody></table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1211829730238798628.post-3469336962217741672010-06-19T19:52:00.006+05:302010-07-24T17:18:42.419+05:30Example:1 AJAX Source Code Explained<div style="text-align: center;">
<span style="font-size: large;"><b>Example:1 Source Code Explained</b></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><span style="font-size: small;">Source Code Explained:</span></b></span></div>
<div style="text-align: center;">
<div style="text-align: justify;">
<span style="font-size: small;">To get the Element of a ID ----</span><span style="font-size: small;">> <b style="color: red;">document.getElementById("hello");</b></span></div>
<div style="text-align: justify;">
<span style="font-size: small;">the above code uses to get the element id with hello.</span></div>
<div style="text-align: justify;">
<b><span style="font-size: small;"><br /></span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: small;">Step : 1 </span></b></div>
<div style="color: red; text-align: justify;">
<b><span style="font-size: small;"><div id="hello"></div></span></b></div>
<div style="color: red; text-align: justify;">
<br /></div>
<div style="color: red; text-align: justify;">
<b style="color: black;"><span style="font-size: small;">Step : 2</span></b><b><span style="font-size: small;"><br /></span></b></div>
<div style="text-align: justify;">
<b><span style="font-size: small;">The <span style="color: red;">document.getElementById("hello"); </span></span></b></div>
<div style="text-align: justify;">
<b><span style="font-size: small;">Used to get the id name of the particular div. </span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: small;">Step : 3</span></b><b><span style="font-size: small;"><br /></span></b></div>
<div style="color: red; text-align: justify;">
<b><span style="font-size: small;">var x =document.getElementById("hello");</span></b></div>
<div style="color: red; text-align: justify;">
</div>
<div style="color: black; text-align: justify;">
<span style="font-size: small;">Storing the retrieved document<b> id</b> to variable<b> 'x</b>'</span></div>
<div style="color: black; text-align: justify;">
<br /></div>
<div style="color: black; text-align: justify;">
<b><span style="font-size: small;">Step 4: </span></b></div>
<div style="color: red; text-align: justify;">
<b><span style="font-size: small;"> x.innerHTML="";</span></b></div>
<div style="color: red; text-align: justify;">
<b><span style="font-size: small;"><span style="color: black;">innerHTML method in java script used to display a Dynamic Content.</span></span></b></div>
<div style="color: red; text-align: justify;">
<br /></div>
<div style="color: red; text-align: justify;">
<b><span style="font-size: small;"><span style="color: black;">For Example:</span></span></b></div>
<div style="color: red; text-align: justify;">
<b><span style="font-size: small;"><span style="color: red;">x.innerHTML="<b>Kannan</b>";</span></span></b></div>
<div style="color: red; text-align: justify;">
<b><span style="font-size: small;"><span style="color: black;">Will result in display a Bold word as Kannan. </span></span></b></div>
<div style="color: black; text-align: justify;">
<b><br /></b><br />
<b>Step 5:</b><br />
<b>Checking for Old Browser and New Browser </b><br />
<br />
<div style="color: red;">
<b><span style="font-size: small;">if(window.XMLHttpRequest)</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;">{</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;">xmlhttp = new XMLHttpRequest();</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;"> </span></b></div>
<div style="color: red;">
<b><span style="font-size: small;">}</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;">else</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;">{</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;">xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;">}</span></b></div>
<div style="color: red;">
<br /></div>
<div style="color: black;">
<b><span style="font-size: small;">Step 6:</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;">xmlhttp.onreadystatechange=function()</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;">{</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;"> // code</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;">}</span></b></div>
<div style="color: black;">
<b><span style="font-size: small;"><br /></span></b></div>
<div style="color: black;">
<b><span style="font-size: small;">There are five Ready states in Ajax as i mentioned before. </span></b></div>
<div style="color: red;">
<b><span style="font-size: small;">onreadystatechange<span style="color: black;"> is the method which will executed if we get successful request from server.</span></span></b></div>
<div style="color: red;">
<br /></div>
<div style="color: red;">
<br /></div>
<div style="color: black;">
<b><span style="font-size: small;">Step 7:</span></b></div>
<div style="color: red;">
<b><span style="font-size: small;"> </span></b></div>
</div>
<div style="color: black; text-align: justify;">
<div style="color: red;">
<b><span style="font-size: small;">xmlhttp.open("Post","http://ajaxtutorialonline.blogspot.com");</span></b></div>
<span style="font-size: small;"> The above coded used to open a connection.</span><br />
<span style="font-size: small;">It must be given in all ajax codes. Else it won't Work.</span><br />
<div style="color: red;">
<span style="font-size: small;">Note :</span></div>
<div style="color: red;">
<span style="font-size: small;">Inside </span><span style="font-size: small;">xmlhttp.open i gave POST method instead of that you can use GET. </span></div>
<div style="color: red;">
<span style="font-size: small;">And you have to the link of your own site which you going to put code. </span></div>
<span style="color: red; font-size: small;">I mentioned </span><span style="font-size: small;"><span style="color: red;">http://ajaxtutorialonline.blogspot.com because i coded the program for this site. If you put your code in any website you can put your own website or domain name ex : http://example.com</span></span><br />
<div style="color: black;">
<br /></div>
<div style="color: black;">
<b><span style="font-size: small;">Step 8 :</span></b></div>
<span style="font-size: small;"><span style="color: black;">The send method will send the data. If you not retrieve any data you can simply give null.</span></span><br />
<div style="color: red;">
<b><span style="font-size: small;">xmlhttp.send();</span></b></div>
</div>
<div style="color: black; text-align: justify;">
<br /></div>
<div style="color: black; text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: small;"><br /></span></b></div>
<br />
<b><span style="font-size: small;"> </span></b></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><span style="font-size: small;"><br /></span> </b></span></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1211829730238798628.post-75814237898347507432010-06-18T10:23:00.002+05:302010-09-05T23:30:27.883+05:30Steps to Connect AJAX with Database to display data from Database table without reloading the page<div style="text-align: center;">
<b><span style="font-size: large;">AJAX - Database Connection</span> </b></div>
<div style="text-align: center;">
<b>without reloading the page</b></div>
<div style="text-align: justify;">
Ajax is the mastermind to display data directly from database without reloading the page. How to achieve this without calling a Servlets Action or Struts Action without reloading or refreshing the page how to display the data from table. Google showing suggestions without reloading the page.<br />
<br />
Here am going to explain how to display data using Database.<br />
Am going to use combination of JavaScript, AJAX and MySql Database.<br />
<br />
<b>Steps to connect Database using AJAX</b><br />
<br />
<b>Step 1:</b><br />
<ul>
<li>Create a Database and Table with fields.</li>
</ul>
Ex: Database table contains Empid int(20), EmpName varchar(200)</div>
<div style="text-align: justify;">
<b><br />Step 2:</b></div>
<div style="text-align: justify;">
Use a Servlets action or JSP or PHP to write database logic. Am going to use Servlet Action.</div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>Configure Web.xml </b><br />
<b>------------------------- </b></div>
<div style="text-align: justify;">
<b><servlet></b></div>
<div style="text-align: justify;">
<b><servlet-name>ajaxtutorial</servlet-name> </b></div>
<div style="text-align: justify;">
<b><servlet-class>com.Test</servlet-class></b></div>
<div style="text-align: justify;">
<b></servlet></b></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<b><servlet-mapping></b></div>
<div style="text-align: justify;">
<b><servlet-name>ajaxtutorial</servlet-name></b></div>
<div style="text-align: justify;">
<b><url-pattern>/test</url-pattern></b></div>
<div style="text-align: justify;">
<b></servlet-mapping></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Test.java</b><br />
<br />
public class Test extends HttpServlet<br />
{<br />
public void doGet(HttpServletRequest request, HttpServletResponse response) <br />
{<br />
try<br />
{<br />
String val = request.getParameter("id"); <br />
String stor=null;<br />
Connection con = null;<br />
PreparedStatement pst =null;<br />
ResultSet rs=null; <br />
response.setContentType("text/xml");<br />
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); <br />
pst = con.prepareStatement("select Empid, EmpName from employee where Empid=?");<br />
pst.setString(1,val);<br />
if(rs.next())<br />
{<br />
stor =rs.getString(1); <br />
response.getWriter().write(stor);<br />
}<br />
con.close();<br />
}catch(SQLException e)<br />
{<br />
<br />
}<br />
}<br />
}<br />
<br />
<b>Step 3: </b><br />
In your JSP page or PHP page write this JavaScript function<br />
<br />
<script type="text/javascript"><br />
<br />
<span style="font-size: small;">function ajaxDB()</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">var </span>boxtype=<span style="font-size: small;">document.getElementById("</span>boxtype<span style="font-size: small;">");</span><span style="font-size: small;"> </span><br />
<span style="font-size: small;">var url = "/test?id="+</span>boxtype;<br />
<span style="font-size: small;">if(window.XMLHttpRequest)</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">xmlhttp = new XMLHttpRequest();</span><br />
<span style="font-size: small;"> </span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;">else</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");</span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;">xmlhttp.onreadystatechange=function()</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">var x= document.getElementById("hello");</span><br />
<span style="font-size: small;">x.innerHTML=</span><span style="font-size: small;">xmlhttp.responseText;</span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;">xmlhttp.open("GET",url,true);</span><br />
<span style="font-size: small;">xmlhttp.send();</span><br />
<span style="font-size: small;">}</span><br />
</script><br />
<input type="text" id="boxtype"></input><br />
<div id="hello"></div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1211829730238798628.post-40590745659811624922010-06-17T13:25:00.000+05:302010-09-05T23:23:31.188+05:30Steps to Connect AJAX Database using Struts to display results in XML or TEXT<div style="text-align: center;">
<b>Steps to Connect AJAX Database using Struts </b></div>
<div style="text-align: justify;">
As i have explained clearly connecting AJAX with Servlets in previous chapter. </div>
<div style="text-align: justify;">
Now i going to explain how to connect Database using Struts and AJAX.</div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>Steps to Connect Database using Struts and Ajax</b></div>
<div style="text-align: justify;">
<b>Step 1: Configuring web.xml and struts-config.xml</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Web.xml :</b></div>
<div style="text-align: justify;">
<web-app></div>
<div style="text-align: justify;">
<display-name>AjaxTutorialonline</display-name> </div>
<div style="text-align: justify;">
<servlet><br />
<servlet-name>action</servlet-name><br />
<servlet-class>org.apache.struts.action.ActionServlet</servlet-class><br />
<init-param><br />
<param-name>config</param-name><br />
<param-value>/WEB-INF/struts-config.xml</param-value><br />
</init-param><br />
<load-on-startup>1</load-on-startup><br />
</servlet><br />
<servlet-mapping><br />
<servlet-name>action</servlet-name><br />
<url-pattern>*.do</url-pattern><br />
</servlet-mapping></div>
<div style="text-align: justify;">
</web-app></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Step 2: Configuring Struts for Ajax Database Connection</b></div>
<div style="text-align: justify;">
<b>Struts-config.xml</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<form-beans><br />
<form-bean name="Ajaxtutorialonline" type="com.ajax.ExampleForm" /><br />
</form-beans></div>
<div style="text-align: justify;">
<action-mappings></div>
<div style="text-align: justify;">
<action path="/ajax" name="Ajaxtutorialonline" scope="request" type="ajax.tutorial.AjaxAction"/></div>
<div style="text-align: justify;">
</action-mappings><br />
<br />
<b>Step 3: </b><b> </b><br />
<b>ExampleForm.java</b><br />
<br />
package com.ajax;<br />
import org.apache.struts.action.ActionForm;<br />
public class ProfileForm extends ActionForm{<br />
private String empid=null;<br />
private String employee=null;<br />
<b>//Generate getter setter method</b><br />
public String getEmpid() {<br />
return empid;<br />
}<br />
public void setEmpid (String empid) {<br />
this.empid= empid;<br />
} <br />
public String getEmployee() {<br />
return employee;<br />
}<br />
public void setEmployee(String employee) {<br />
this.employee = employee;<br />
}<br />
<br />
<b>Step 4: Writing Action </b><br />
<b>AjaxAction.java</b><br />
<br />
package ajax.tutorial;<br />
import javax.servlet.http.HttpServletRequest;<br />
import javax.servlet.http.HttpServletResponse;<br />
import org.apache.struts.action.Action;<br />
import org.apache.struts.action.ActionForm;<br />
import org.apache.struts.action.ActionForward;<br />
import org.apache.struts.action.ActionMapping;<br />
public class AjaxAction extends Action<br />
{<br />
public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest req, HttpServletResponse res) <br />
{<br />
String val = req.getParameter("id");<br />
String stor=null;<br />
Connection con = null;<br />
PreparedStatement pst =null;<br />
ResultSet rs=null; <br />
response.setContentType("text/xml");<br />
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); <br />
pst = con.prepareStatement("select Empid, EmpName where Empid=?");<br />
pst.setString(1,val);<br />
if(rs.next())<br />
{<br />
stor =rs.getString(1); <br />
response.getWriter().write(stor);<br />
}<br />
con.close();<br />
}catch(SQLException e)<br />
{<br />
<br />
}<br />
}<br />
<br />
<br />
<b>Step 5: JavaScript AJAX</b><br />
<script type="text/javascript"><br />
<br />
<span style="font-size: small;">function ajaxDB()</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">if(window.XMLHttpRequest)</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">xmlhttp = new XMLHttpRequest();</span><br />
<span style="font-size: small;"> </span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;">else</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");</span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;">xmlhttp.onreadystatechange=function()</span><br />
<span style="font-size: small;">{</span><br />
<span style="font-size: small;">var x= document.getElementById("hello");</span><br />
<span style="font-size: small;">x.innerHTML=</span><span style="font-size: small;">xmlhttp.responseText;</span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;">xmlhttp.open("GET","/test.do",true);</span><br />
<span style="font-size: small;">xmlhttp.send();</span><br />
<span style="font-size: small;">}</span><br />
</script><br />
<br />
<div id="hello"></div><b></b><br />
<br />
<br /></div>
<div style="text-align: justify;">
<b></b></div>
<div style="text-align: justify;">
</div>Unknownnoreply@blogger.com0