Dr R Anurekha: October 2019

JSP and JDBC





<html>

<head>
<title>HTML Forms, JSP and JDBC</title>

<style>
label
{
font-family:vivaldi;
font-size:x-large;
letter-spacing:2px;
line-height:40px;
}
</style>
</head>

<body>
<form method="GET" action="JSP_JDBC.jsp">
<center>

<h2>HTML Forms, JSP and JDBC</h2><br/>

<label>Enter Department Name </label>
<input type="text" Name="DN" tabindex=1/>

<br/> <br/>

<input type="submit" value="Get Code!!!"/>

</center>
</form>

</body>
</html>



<html>
<body>

<%@ taglib uri = "http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@page import="java.io.*"%>
<%@page import="java.util.*"%>
<%@page import="java.lang.*"%>
<%@page import="java.sql.*"%>

<sql:setDataSource var="db" driver="oracle.jdbc.driver.OracleDriver" url="jdbc:oracle:thin:@//localhost:1521/XEPDB1" user="system" password="Harini97#"/>

<sql:query dataSource="${db}" var="rs">
SELECT * from DC
</sql:query>

<center>
<h1> Department and Code </h1>

<table border="2" width="50%">
<tr>
<th>Department</th>
<th>Code</th>
</tr>

<c:forEach var="table" items="${rs.rows}">
<tr>
<td><c:out value="${table.name}"/></td>
<td><c:out value="${table.Code}"/></td>
</tr>
</c:forEach>
</table>
</center>

<%
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@//localhost:1521/XEPDB1", "system", "Harini97#");

String dn = request.getParameter("DN").trim();
String qry = "SELECT * FROM DC WHERE name ='"+dn+"'";
PreparedStatement ps = conn.prepareStatement(qry);
ResultSet rs = ps.executeQuery();

while(rs.next())
{
%>

<br/>
<center>
<h2>

Department Name : <%=rs.getString(1)%> <br/>
Department Code : <%=rs.getString(2)%>
</h2>
</center>
<%
}
%>

</body>

</html>

JDBC and servlets





<html>

<head>
<title>HTML Forms and Servlets</title>

<style>
label
{
font-family:vivaldi;
font-size:x-large;
letter-spacing:2px;
line-height:40px;
}
</style>
</head>

<body>
<form method="GET" action="JDBC_DC">
<center>

<h2>HTML, Servlets and Database</h2></br>

<label>Enter Department Name </label>
<input type="text" Name="DN" tabindex=1/>

</br> </br>

<button class="btn" type="button " >Get Code!!! </button>

</center>
</form>

</body>

</html>

// Servlet to access form data and generate response to client browser

import javax.servlet.http.*;
import javax.servlet.*;
import java.io.*;
import java.util.*;
import java.lang.*;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.*;

public class JDBC_DC extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res) throws ServletException, IOException
{

//setting the content type
res.setContentType("text/html");

//create the stream to write the data
PrintWriter pw=res.getWriter();

String D = req.getParameter("DN").trim();

//writing html in the stream
pw.println("<html><body><h2>");
pw.println("<center>");
pw.println("Dept = "+D+"<br/>");
try
{

Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@//localhost:1521/XEPDB1", "system", "Harini97#");

String qry = "SELECT * FROM DC WHERE name ='"+ D+"'";
PreparedStatement ps = conn.prepareStatement(qry);
ResultSet rs = ps.executeQuery();
while(rs.next())
pw.println("Code = "+rs.getString(2)+"<br/>");

}
catch (Exception e) {
e.printStackTrace();
}

pw.println("</center>");
pw.println("</h2></body></html>");

//closing the stream
pw.close();

}
}

AJAX Callback functions

AJAX – Asynchronous JavaScript and XML

AJAX is a technique for creating fast and dynamic web pages with the help of XML, HTML, CSS, and Java Script. Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display. XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

Ajax makes it possible to update parts of a web page, without reloading the whole page. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.

<![if !vml]>

<![endif]>

AJAX Client – Server Architecture

AJAX Working

When user first visits the page, the Ajax engine is initialized and loaded. From that point of time user interacts with Ajax engine to interact with the web server. The Ajax engine operates asynchronously while sending the request to the server and receiving the response from server. Ajax life cycle within the web browser can be divided into following stages:

<![if !supportLists]>1. <![endif]>User Visit to the page: User visits the URL by typing URL in browser or clicking a link from some other page.

<![if !supportLists]>2. <![endif]>Initialization of Ajax engine: When a page is initially loaded, the Ajax engine is also initialized and it continuously refreshes the page content without reloading the whole page.

<![if !supportLists]>3. <![endif]>Event Processing Loop:

<![if !supportLists]>a. <![endif]>Browser event may instruct the Ajax engine to send request to server and receive the response data

<![if !supportLists]>b. <![endif]>Server response - Ajax engine receives the response from the server. Then it calls the JavaScript call back functions

<![if !supportLists]>c. <![endif]>Browser update – JavaScript request call back functions is used to update the browser. DHTML and CSS is used to update the browser display.

<![if !vml]>

<![endif]>

Callback functions in AJAX

The need for callback functions is to run code in response to an event. When Synchronous operations are carried out, they are executed one after the other. For example, when a request is made to a server, the client waits until the response is received before executing any other code. But in AJAX, the operations are asynchronous, which means the client makes a request to the server, but does not wait for the response. Instead it carries out other operations in background. This will run into problems if the executing code depends on the server response data.

Consider for example, if function B depends on response from function A it should be called only when function A finishes. To ensure this in asynchronous executions like AJAX, callback functions are used. Function B is only called after function A is finished and function A is actually the one responsible for calling function B from last line of function A. The different kinds of callback functions are

<![if !supportLists]> 1. <![endif]>Anonymous function

<![if !supportLists]> 2. <![endif]>Named function (A function name is passed as a parameter to another function and is called from inside the function)

Working of Ajax callback functions

<![if !supportLists]> 1. <![endif]>Ajax callbacks always start in JavaScript. Some JavaScript code in the browser executes and sends a message (or data) to the server, and specifies the page on the server that will receive the message.

<![if !supportLists]> 2. <![endif]>On the server side, the message from the browser is received and the page that was specified is run.

<![if !supportLists]> 3. <![endif]>When the browser receives the response from the server, which is usually a JavaScript code, it executes that code and then calls the callback function.

Example program:

// 1. Callback – Anonymous Function

<!DOCTYPE html>

<html>

<head>

function loadDoc()

{

var xhttp = new XMLHttpRequest();

// Callback using Anonymous Function

xhttp.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

document.getElementById("id1").innerHTML = this.responseText;

}

};

xhttp.open("GET", "Hello.txt", true);

xhttp.send();

}

</script>

</head>

<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Change Content</button>

</div>

</body>

</html>

Example program:

// 2. Callback – Named Function

<!DOCTYPE html>

<html>

<head>

function loadDoc(fncall)

{

var xhttp=new XMLHttpRequest();

xhttp.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

fncall(this);

}

};

xhttp.open("GET", "Hello.txt", true);

xhttp.send();

}

function CallBkFn(xhttp)

{

document.getElementById("demo").innerHTML = xhttp.responseText;

}

</script>

</head>

<body>

<h2>Ajax callback functions </h2>

Change Content

</button>

</div>

</body>

</html>