Ajax with JSP

weaverchurchΛογισμικό & κατασκευή λογ/κού

15 Αυγ 2012 (πριν από 5 χρόνια και 11 μήνες)

278 εμφανίσεις

Ajax with JSP Developed in NetBeans

Before starting this tutorial, assume that you have
already installed Apache Tomcat and NetBeans IDE

7.0
.
You will build our AJAX server by using
jsp

technology
and the work will be done in NetBeans IDE.



Step 1:

Startup NetBeans. Select File
-
>New Project…



Step2:

Select
Web

and
Web Application
, then Next.

•

In the new dialog box, name your project and
choose a location for it. Press
finish

when you’r
e
finished with it.

•

You will see a default page
index.jsp

and the
directory structure like this where you can place
“How World!” in the HTML body:


You can run this default page by clicking Run
-
>
Run Main
Project. It takes few seconds to launch the build
-
in Java
server. Also, the new jsp file needs to be compiled. After
all, a new browser would be open automatically
with

a
simple page.



Step 3:



Copy the following code to the default page
index.
jsp



<HTML>


<head>


<script type="text/javascript">


var req;


function ajaxCall() {



var poststr = "username=" +



encodeURI(document.frmtest.content.value);



var url = "ajax.jsp";

if (window.XMLHttpRequest) {



req = new XMLHttpRequest
();



} else if (window.ActiveXObject) {



req = new
ActiveXObject("Microsoft.XMLHTTP");



}






req.open("POST", url, true);



req.onreadystatechange = callback;



req.setRequestHeader("Content
-
Type",
"application/x
-
www
-
form
-
urlencoded"
);



req.setRequestHeader("Content
-
length",
poststr.length);



req.setRequestHeader("Connection", "close");



req.send(poststr);


}

function callback() {



if (req.readyState == 4) {



if (req.status == 200) {



// update the HTML DO
M based on
whether or not message is valid



parseMessage();



}



}


}

function parseMessage() {



var message = req.responseText;



setMessage(message);


}


function setMessage(message) {



mdiv = document.getElementById
("Message");



mdiv.innerHTML = "<div
style=
\
"color:green
\
">"+message+"</ div>";


}


</script>

</head>


<body>


<form action="" name="frmtest">


<textarea name="content" rows="3" cols="40"
onkeyup="javascript:ajaxCall();"></textarea>


</form>


<div id=
"Message"></div>


</body>


</html>


Create a new file named
ajax.jsp

in the same folder, and
copy the following code to it:


<%


String content = request.getParameter("username");


content = "Hello! " + content;


response.setContentType("text/html");


resp
onse.setHeader("Cache
-
Control", "no
-
cache");


response.getWriter().write(content);


%>



Step 4
:

You launch the server Run
-
>
Run Main Project. In the
new default page you can see a text area.


I
f you enter some name in the text area, the page
responses
you automatically and seamlessly without a
push button invocation.


You can find in this example that Ajax client works in an
asynchronous mode without loss of operation context
rather than in the
“
click, wait, and fresh
”

request/response communication user interaction mode.
The Ajax client only refreshes the updated portion of the
page partially and gets the instant feedback for client
user
’
s activities.