Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to integrate Ajax with JSP

In this article we will discuss about Ajax and JSP technologies and their integration.

Ajax stands for Asynchronous JavaScript And XML. This is a technique but not a technology, using the Ajax concept we can develop our web projects very first. This project can run very smoothly and successfully through the webserver. The webserver is very much heavy due to more data present in the page so at every time when page refreshment occurs then we must download it and every time downloading takes all of MB that is really expensive for us.

To avoid that type of problem at the time of net surfing we must take help of Ajax. The Ajax is such type of system that is generally used for avoiding the page refreshment process and our expenses easily goes down. It is remembered that Asynchronous JavaScript and XML is not limited for the JSP but we can use it in many different languages like PHP, ASP, and ASP.Net etc.

Note: To learn more about Javascript, check this Javascript Course

The page-oriented Hyper Text Markup Language (HTML) has long been the standard for Web-based applications and its interaction. HTML is designed to make the UI and display text, Figure s etc in a Web browser. It’s simple publication and viewing model has helped fuel the explosive adoption of the World Wide Web into the global phenomenon we know today. But this growth has created more demands -- Web applications that provide a desktop-like user experience -- and HTML's page-oriented model falls short.

Power of Ajax:

Asynchronous JavaScript and XML are a design approach and a set of techniques for delivering high quality interactive web applications which has desktop-like user experience. And it will run on popular HTML browsers. Ajax is basically Asynchronous JavaScript and XML. It improves the user's Web application involvement while retaining the HTML reimbursements on server-based application development and deployment. Ajax achieves desktop-like experience in Web pages by having parts of a web page reload, instead of refreshing the entire page, in response to user input. Instead of whole-page refreshes, small amounts of data are exchanged with the server using Ajax, and the rest of the web application can be used the end users. So Ajax techniques represent the continued evolution of DHTML to distribute Rich Internet Applications (RIAs) and the Web 2.0 experience. Asynchronous JavaScript and XML are attractive to IT professionals because it enables rich user experiences while preserving existing back-end infrastructure as it is. Users get benefit from the next-generation applications that have the feel of desktop applications and provide new features. At the same time IT preserves existing benefits from Web-based application deployment and continuity with existing HTML-based back-end infrastructure. Ajax technology has developed as a critical technology for launching the Web's next generation which is also referred to as Web 2.0. Ajax. This is also increasing the end user productivity and enabling new classes of collaborative applications. Generally the Ajax is redefining the Web and requiring every organization with a Web presence or Internet-based business applications to develop an Asynchronous JavaScript and XML strategy. Ajax can be used to generate open standards that are widely available as native features (i.e., without plugins) in all popular browsers. Ajax has incremental update techniques which are obtained through built-in features such as JavaScript and the XMLHttpRequest API. Ajax developments also leverage JavaScript libraries that provide a cross-browser abstraction layer.

Ajax-powered user experience:

Ajax diminishes the number of page refreshes because the client issues data requests to the server and not the page requests. The Ajax based application stays on the screen continuously while the Ajax engine handles data exchange with the server. So instead of refreshing the page, the application updates only those parts of the screen affected by newly arrived data.

Showing client server interaction using Ajax engine

Figure 1: Showing client server interaction using Ajax engine

Concept to use AJAX in JSP:

In this article we will look at how to use AJAX (Asynchronous JavaScript and XML) in JSP. Nowadays dynamic web pages are very popular in web, everyone want to generate website using dynamic web pages. So AJAX technique is used to create fast, dynamic and interactive web pages. AJAX technique allows updating partial web page, instead of reloading the entire page. AJAX is simple JavaScript script which work with XML Http request.

Example:

In the following example we will try to create a JSP page that can fetch information from a database using AJAX. Before we start let us first create a table as described below in our database which we will use in our example.

Course Name Duration Class Amount
C Language 3 Month 2 days/Week 2100
C++ 3 Month 2 days/Week 2100
Android with Advanced Java 6 Month 2 days/Week 4200
Basic Electronics with Networking 7 Month 1 days/Week 2800

Table 1: Sample database table

In this example we will use Oracle Database 10g Express Edition, so if you have some other database then you have to do some minor changes for connectivity with the database. But that can be done easily.

CREATE TABLE ceiinfo
(cname VARCHAR2(30),
 duration VARCHAR2(20),
 class VARCHAR2(20),
 amount number(6,2) ); 

Create a ceicourse.jsp page:

Listing 1: Examine this page carefully as this page contains JavaScript and Ajax logic

<html>
<head>
<title>Course Details of Computer Educational Institution</title>
<script>
function showuser(str)
{ 
var xreq;
if(str=="")
{
document.getElementById("showtext").innerHTML="";
return;
}
if(window.XMLHttpRequest)
{
xreq=new XMLHttpRequest();
}
else
{
xreq=new ActiveXObject("Microsoft.XMLHTTP");
}
xreq.onreadystatechange=function ()
{
if((xreq.readyState==4) && (xreq.status==200))
{
document.getElementById("showtext").innerHTML 
                                   =xreq.responseText;
}
}
xreq.open("get","getceiuser.jsp?q="+str,"true");
xreq.send();
}
</script>
</head>
<body>
<form>
<select name="user" onchange="ceiuser(this.value)" >
<option value="">Select Course name....</option>
<option value="c"> C Language </option>
<option value="cpp">C++ </option>
<option value="adam">Android with Advanced Java</option>
<option value="net">Networking</option>
</select>
</form>
<br />
<div id="showtext">The Course response will come here</div>
</body>
</html> 

When someone is selecting from the drop down list javascript ceiuser() method will get fired and create an XMLHttpRequest object and create the function to be executed when the server response is ready. Then it sends the request off to a getceiuser.jsp page on the server. Notice that a parameter (st) is added to the URL. This parameter will be passing to getceiuser.jsp in request object.

Listing 2: Sample getceiuser.jsp page

<%@page import="java.text.SimpleDateFormat"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.util.*,java.sql.*,java.io.*" %>
<%@page import="javax.servlet.*" %>
<%@page import="javax.servlet.http.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome to Computer Educational Institution </title>
</head>
<body>
<%!Connection con; %>
<%!Statement s; %>
<%!ResultSet rs; %>
<% String name=request.getParameter("st");
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
con=DriverManager.getConnection
("jdbc:oracle:cei:@localhost:1521:XE","username","password");
s=con.createStatement();
rs=s.executeQuery("select * from ceiinfo where 
                       name='"+name+"'");
}catch(Exception e){ e.printStackTrace(); }
%>
<div id="dtl_table"><table border='3' cellpadding='5' 
     cellspacing='2' width="400px">
<tr bgcolor="66FF00">
<th>Course_Name</th>
<th>Duration</th>
<th>Class</th>
<th>Amount</th>
</tr>
<tr>
<% while(rs.next()) 
{ %>
<td><%=rs.getString(1)%></td>
<td><%=rs.getString(2)%></td>
<td><%=rs.getString(3)%></td>
<td><%=rs.getString(4)%></td>
<% } %>
</tr>
</table></div>
</body>
</html> 

If everything works fine the ceicourse.jsp page will look something like this when we will select a course name from the drop-down list. Select other course name from the drop-down list; we will see the dynamic work of AJAX (Asynchronous JavaScript and XML).

Conclusion

The above scenario gives a bright picture to implement AJAX (Asynchronous JavaScript and XML) in the server side programming language. Now we are using this server side programming language which supports us controlling much operation especially at the time of searching data from server. Because searching is the major part for the Search Engine related web sites. As like Google we see that proper implementation of AJAX. In JSP which page we are working that page can be accumulated with searching procedure and this searching procedure must be very smooth and successfully run through the AJAX concept. So to conclude the discussion we can say that AJAX is a technique which can be implemented in JSP program and also other Server based programming Applications. Hope you have enjoyed the article. Keep reading in mrbool.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login