Scribd
Upload
333 views

Ajax With JSP Developed in NetBeans

This document provides steps to build an AJAX application using JSP in NetBeans. It describes creating a new web application project, adding code to the default index.jsp page to make an asynchronous call to ajax.jsp using the XMLHttpRequest object, and adding code to ajax.jsp to return a response. When the user enters text in the text area, AJAX is used to call ajax.jsp and update the message div without reloading the whole page. This allows asynchronous and partial page updates for a better user experience compared to full page reloads.

Uploaded by

Mani Kno Thyself
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
333 views

Ajax With JSP Developed in NetBeans

This document provides steps to build an AJAX application using JSP in NetBeans. It describes creating a new web application project, adding code to the default index.jsp page to make an asynchronous call to ajax.jsp using the XMLHttpRequest object, and adding code to ajax.jsp to return a response. When the user enters text in the text area, AJAX is used to call ajax.jsp and update the message div without reloading the whole page. This allows asynchronous and partial page updates for a better user experience compared to full page reloads.

Uploaded by

Mani Kno Thyself
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

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 youre 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 } req.open("POST", url, true); req.onreadystatechange = callback; req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.setRequestHeader("Content-length", = new ActiveXObject("Microsoft.XMLHTTP");

poststr.length); req.setRequestHeader("Connection", "close"); req.send(poststr); } function callback() { if (req.readyState == 4) { if (req.status == 200) { // update the HTML DOM 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 </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"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write(content); %> name="content" rows="3" cols="40" onkeyup="javascript:ajaxCall();"></textarea>

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

If 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.

You might also like