Friday, December 13, 2013

Simple Ajax using JSP tutorial

Ajax is the method of using Javascript, DHTML and the XMLHttpRequest object to perform a GET or POST and return a result without reloading the HTML page. Below is a very simple Ajax example using JSP.


To create first JSP page:
1. Download Eclipse IDE for Java EE Developers from http://www.eclipse.org/downloads/
2. Unzip it and Install Eclipse IDE.
3. Launch Eclipse by clicking eclipse.exe
4. Click File=>New=>Project=>Web=>Dynamic Web Project
5. Click Next button
6. Put ajax in Project name and select 2.3 in Dynamic web module version
7. Click Finish button
8. Right-click on WebContent and click New=>JSP file and create hello.html
9. Replace following code with

 <html>  

 <head>
 <title>Simple Ajax Example</title>
 <script language="Javascript">
 function xmlhttpPost(strURL) {
 var xmlHttpReq = false;
 var self = this;
 // Mozilla/Safari
 if (window.XMLHttpRequest) {
 self.xmlHttpReq = new XMLHttpRequest();
 }
 // IE
 else if (window.ActiveXObject) {
 self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
 }
 self.xmlHttpReq.open('POST', strURL, true);
 self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 self.xmlHttpReq.onreadystatechange = function() {
 if (self.xmlHttpReq.readyState == 4) {
 updatepage(self.xmlHttpReq.responseText);
 }
 }
 self.xmlHttpReq.send(getquerystring());
 }
 function getquerystring() {
 var form = document.forms['f1'];
 var word = form.word.value;
 qstr = 'w=' + escape(word); // NOTE: no '?' before querystring
 return qstr;
 }
 function updatepage(str){
 document.getElementById("result").innerHTML = str;
 }
 </script>
 </head>
 <body>
 <form name="f1">
 <p>Your name: <input name="word" type="text">
 <input value="Go" type="button" onclick='JavaScript:xmlhttpPost("hello.jsp")'></p>
 <div id="result"></div>
 </form>
 </body>
 </html>
 8. Right-click on WebContent and click New=>File file and create hello.jsp
 9. Replace following code:
 <%@ page language="java" contentType="application/x-www-form-urlencoded; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
 <%
 String w = request.getParameter("w");
 String msg = "Hello "+w;
 %>
 <%=msg%>


10. Click File=>Save
11. Right-click your ajax project.
12. Click Export=>war file
13. In Destination, put c:\ajax.war and click Finish button
Now you need publish your Hello World jsp on internet. I found a good JPS hosting company EATJ.com http://www.eatj.com/ . They have free trial account. You can get your hosting space immediately, once you register on EATJ.
14. Once your EATJ account is activated, login to your EATJ account. Scroll down, you will find UPLOAD WAR FILES section. Click Browser button and go to c:\ and find your ajax.war and click Upload button.
15. Click Restart link. You will see something like http://..eatj.com/
16. Click this link. You will see Tomcat page.
17. Append hello/hello.jsp in your URL such as http://..eatj.com/ajax/hello.html
18. Put your name and click Go button

For this tutorial source code, you can download it at http://www.postpart.com/ajax.war

Database tutorial: http://jspjdbc.blogspot.com/

4 comments:

oakleyses said...

louis vuitton handbags, oakley sunglasses, louboutin, longchamp outlet, nike shoes, louis vuitton outlet stores, chanel handbags, burberry outlet, prada outlet, jordan shoes, tiffany and co, michael kors outlet, tory burch outlet, louis vuitton outlet, longchamp handbags, nike free, true religion jeans, michael kors outlet, kate spade outlet, polo ralph lauren outlet, tiffany and co, prada handbags, polo ralph lauren outlet, michael kors outlet, michael kors outlet, longchamp handbags, oakley sunglasses, ray ban sunglasses, kate spade handbags, burberry outlet, louis vuitton outlet, louboutin outlet, louboutin, coach factory outlet, air max, air max, coach outlet, gucci outlet, christian louboutin shoes, michael kors outlet, coach purses, ray ban sunglasses, michael kors outlet, louis vuitton, coach outlet store online, true religion jeans, oakley sunglasses cheap

oakleyses said...

ralph lauren, lululemon, air max, hollister, north face, nike air max, polo lacoste, vanessa bruno, timberland, vans pas cher, louboutin, louis vuitton, oakley pas cher, air max pas cher, nike roshe run, air max, true religion outlet, barbour, sac longchamp, air force, hollister, sac louis vuitton, nike free, polo ralph lauren, nike trainers, louis vuitton uk, nike roshe, sac hermes, longchamp, michael kors, sac burberry, sac guess, mulberry, new balance pas cher, converse pas cher, sac louis vuitton, hogan outlet, nike tn, north face, true religion outlet, ray ban pas cher, michael kors, air jordan, nike blazer, nike free pas cher, michael kors pas cher, abercrombie and fitch, ray ban sunglasses

oakleyses said...

mac cosmetics, mont blanc, marc jacobs, canada goose outlet, nike huarache, vans shoes, soccer jerseys, hollister, giuseppe zanotti, beats by dre, abercrombie and fitch, longchamp, insanity workout, celine handbags, bottega veneta, ghd, nfl jerseys, north face outlet, chi flat iron, ugg boots, birkin bag, ugg australia, canada goose, herve leger, ugg pas cher, rolex watches, valentino shoes, canada goose uk, canada goose, ferragamo shoes, canada goose, ugg boots, uggs outlet, north face jackets, soccer shoes, asics running shoes, new balance shoes, p90x, lululemon outlet, canada goose jackets, mcm handbags, instyler, babyliss pro, ugg, wedding dresses, jimmy choo outlet, reebok outlet, nike roshe run

oakleyses said...

parajumpers, karen millen, air max, converse, pandora charms, moncler, louboutin, moncler, links of london, lancel, juicy couture outlet, oakley, hollister, pandora charms, supra shoes, thomas sabo, canada goose, gucci, wedding dresses, timberland boots, swarovski crystal, air max, coach outlet store online, moncler, ray ban, canada goose, moncler, ugg, louis vuitton, swarovski, hollister, montre homme, moncler, hollister clothing store, ralph lauren, rolex watches, moncler outlet, moncler, iphone 6 cases, baseball bats, juicy couture outlet, toms shoes, vans, pandora jewelry, ugg, converse shoes