MCA631_Advanced Internet Programming

UNIT 5 JAVA SERVLETS - II Structure: 5.0 Learning Objectives 5.1 Introduction 5.2 Servicing client requests 5.3 GET and POST request methods 5.4 Retrieving data from database to servlet 5.5 Servlet config and Servlet context 5.6 Session Tracking 5.7 Practical Assignment 5.8 Summary 5.9 Key Words/Abbreviations 5.10 Learning Activity 5.11 Unit End Questions (MCQs and Descriptive) 5.12 References 5.0 Learning Objectives After studying this unit, you will be able to:  Explain servicing client requests and GET and POST request methods  Discuss Retrieving data from databaseto servlet, Servlet config and Servletcontext  Elaborate session tracking CU IDOL SELF LEARNING MATERIAL (SLM)

Java Servlets - II 93 5.1 Introduction Servlet technology is used to create a web application (resides at server side and generates a dynamic web page). Servlet technology is robust and scalable because of java language. Before Servlet, CGI (Common Gateway Interface) scripting language was common as a server-side programming language. However, there were many disadvantages to this technology. We have discussed these disadvantages below. There are many interfaces and classes in the Servlet API such as Servlet, GenericServlet, HttpServlet, ServletRequest, ServletResponse, etc. 5.2 Servicing client requests Servicing Client request can be performed by http protocol. Http Protocol & Http Methods:- HTTP (Hyper Text Transfer Protocol) The Hypertext Transfer Protocol (HTTP) is application-level protocol for collaborative, distributed, hypermedia information systems. It is the data communication protocol used to establish communication between client and server. HTTP is TCP/IP based communication protocol, which is used to deliver the data like image files, query results, HTML files etc on the World Wide Web (WWW) with the default port is TCP 80. It provides the standardized way for computers to communicate with each other. Http Request Server Http Response Client Fig. 5.1: Http Protocol The Basic Characteristics of HTTP (Hyper Text Transfer Protocol):  It is the protocol that allows web servers and browsers to exchange data over the web. CU IDOL SELF LEARNING MATERIAL (SLM)

94 Advanced Internet Programming  It is a request response protocol.  It uses the reliable TCP connections by default on TCP port 80.  It is stateless means each request is considered as the new request. In other words, server doesn’t recognize the user by default. The Basic Features of HTTP (Hyper Text Transfer Protocol): There are three fundamental features that make the HTTP a simple and powerful protocol used for communication:  HTTP is media independent: It refers to any type of media content can be sent by HTTP as long as both the server and the client can handle the data content.  HTTP is connectionless: It is a connectionless approach in which HTTP client i.e., a browser initiates the HTTP request and after the request is sends the client disconnects from server and waits for the response.  HTTP is stateless: The client and server are aware of each other during a current request only. Afterwards, both of them forget each other. Due to the stateless nature of protocol, neither the client nor the server can retain the information about different request across the web pages. HTTP Architecture (Hyper Text Transfer Protocol) The below diagram represents the basic architecture of web application and depicts where HTTP stands: Web Server Web Client Server Side Script Database HTTP Protocol Fig. 5.2: HTTP Architecture CU IDOL SELF LEARNING MATERIAL (SLM)

Java Servlets - II 95 HTTP is request/response protocol which is based on client/server based architecture. In this web browser, search engines, etc behaves as a HTTP clients, and the Web server like Servlet behaves as a server. 5.3 GET and POST Request Methods HTTP Methods 1. HTTP Requests: The request sends by the computer to a web server that contains all sorts of potentially interesting information is known as HTTP requests. The HTTP client sends the request to the server in the form of request message which includes following information:  The Request-line  The analysis of source IP address, proxy and port  The analysis of destination IP address, protocol, port and host  The Requested URI (Uniform Resource Identifier)  The Request method and Content  The User-Agent header  The Connection control header  The Cache control header The HTTP request method indicates the method to be performed on the resource identified by the Requested URI (Uniform Resource Identifier). This method is case-sensitive and should be used in uppercase. The HTTP request methods are: HTTP Request Table 5.1: HTTP Request Methods GET Description POST Asks to get the resource at the requested URL. HEAD Asks the server to accept the body info attached. It is like GET request with extra TRACE info sent with the request. Asks for only the header part of whatever a GET would return. Just like GET but with no body. Asks for the loopback of the request message, for testing or troubleshooting. CU IDOL SELF LEARNING MATERIAL (SLM)

96 Advanced Internet Programming PUT Says to put the enclosed info (the body) at the requested URL. DELETE Says to delete the resource at the requested URL. OPTIONS Asks for a list of the HTTP methods to which the thing at the request URL can respond 2. Get vs. Post: There are many differences between the Get and Post request. Let’s see these differences: Table 5.2: Differences Between the Get and Post Request GET POST 1. In case of Get request, only limited amount of In case of post request, large amount of data data can be sent because data is sent in header. can be sent because data is sent in body. 2. Get request is not secured because data is Post request is secured because data is not exposed in URL bar. exposed in URL bar. 3. Get request can be bookmarked. Post request cannot be bookmarked. 4. Get request is idempotent . It means second Post request is non-idempotent. request will be ignored until response of first request is delivered 5. Get request is more efficient and used more than Post request is less efficient and used less Post. than get. GET and POST Two common methods for the request-response between a server and client are:  GET: It requests the data from a specified resource  POST: It submits the processed data to a specified resource Anatomy of Get Request The query string (name/value pairs) is sent inside the URL of a GET request: 1. GET /RegisterDao.jsp?name1=value1&name2=value2 As we know that data is sent in request header in case of get request. It is the default request type. Let’ see what information is sent to the server. CU IDOL SELF LEARNING MATERIAL (SLM)

Java Servlets - II 97 Fig. 5.3: Anatomy of GET Request Anatomy of Post Request The query string (name/value pairs) is sent in HTTP message body for a POST request: 1. POST/RegisterDao.jsp HTTP/1.1 2. Host: www. javatpoint.com 3. name1=value1&name2=value2 As we know, in case of post request original data is sent in message body. Let’s see how information is passed to the server in case of post request. Fig. 5.4: Anatomy of Post Request 5.4 Retrieving Data from Database to Servlet Design database for student administration. Develop servlet(s) to perform CRUD operations. CU IDOL SELF LEARNING MATERIAL (SLM)

98 Advanced Internet Programming HomePage.html <input type=\"submit\" value=\"Insert\"> </form> <!DOCTYPE html> <br> <html> <form action=\"updateData.html\"> <head> <input type=\"submit\" value=\"Update\"> <title>Home page</title> </form> <meta charset=\"UTF-8\"> <br> <meta name=\"viewport\" <form action=\"deleteData.html\"> content=\"width=device-width, initial-scale=1.0\"> <input type=\"submit\" value=\"Delete\"> </head> </form> <body> <br> <center> <form action=\"selectStud\"> <h1>Student Administration</h1> <input type=\"submit\" value=\"Show All <form action=\"createtblStud\"> Records\"> <input type=\"submit\" value=\"Create </form> tblStudent\"> </center> </body> </html> </form> <br> <form action=\"insertData.html\"> web.xml <servlet-name>InsertStudent</servlet- name> <?xml version=\"1.0\" encoding=\"UTF-8\"?> <url-pattern>/InsertStudent</url-pattern> <web-app xmlns=\"http://xmlns.jcp.org/xml/ns/javaee\" </servlet-mapping> xmlns:xsi=\"http://www.w3.org/2001/XMLSchema- <servlet> instance\" xsi:schemaLocation=\"http://xmlns.jcp.org/xml/ns/jav <servlet-name>UpdateStudent</servlet- aee name> http://xmlns.jcp.org/xml/ns/javaee/web- <servlet-class>UpdateStudent</servlet- app_3_1.xsd\" class> version=\"3.1\"> </servlet> <session-config> <servlet-mapping> <session-timeout> <servlet-name>UpdateStudent</servlet- CU IDOL SELF LEARNING MATERIAL (SLM)

Java Servlets - II 99 30 name> </session-timeout> <url-pattern>/UpdateStudent</url-pattern> </session-config> </servlet-mapping> <welcome-file-list> <servlet> <welcome-file>HomePage.html</welcome-file> <servlet-name>DeleteStudent</servlet- </welcome-file-list> name> <servlet> <servlet-class>DeleteStudent</servlet- <servlet-name>createtblStud</servlet-name> class> <servlet-class>createtblStud</servlet-class> </servlet> </servlet> <servlet-mapping> <servlet-mapping> <servlet-name>DeleteStudent</servlet- <servlet-name>createtblStud</servlet-name> name> <url-pattern>/createtblStud</url-pattern> <url-pattern>/DeleteStudent</url-pattern> </servlet-mapping> </servlet-mapping> <servlet> <servlet> <servlet-name>selectStud</servlet-name> <servlet- <servlet-class>selectStud</servlet-class> name>UpdateStudentDetails</servlet- </servlet> name> <servlet-mapping> <servlet- <servlet-name>selectStud</servlet-name> class>UpdateStudentDetails</servlet- <url-pattern>/selectStud</url-pattern> class> </servlet-mapping> </servlet> <servlet> <servlet-mapping> <servlet-name>InsertStudent</servlet-name> <servlet- <servlet-class>InsertStudent</servlet-class> name>UpdateStudentDetails</servlet- </servlet> name> <servlet-mapping> <url-pattern>/UpdateStudentDetails</url- pattern> createtblStud.java </servlet-mapping> </web-app> Import javax.servlet.*; String query=\"create table tblStudent(RollNo import javax.servlet.http.*; int,StudName varchar(20),MarksSSC import java.io.*; float,MarksHSC float);\"; import java.sql.*; System.out.println(query); public class createtblStud extends int c=st.executeUpdate(query); HttpServlet{ if(c==0) CU IDOL SELF LEARNING MATERIAL (SLM)

100 Advanced Internet Programming public void service(HttpServletRequest out.println(\"<h1>Table created<br>\"); request,HttpServletResponse response) else throws IOException out.println(\"<h1>Error in creation/already { exists<br>\"); Connection con; out.println(\"<a href='HomePage.html'>Click to Statement st; go to Home Page</a><br>\"); PrintWriter out=response.getWriter(); } response.setContentType(\"text/html\"); catch(Exception e) out.println(\"<center>\"); { try System.out.println(e); { out.println(\"<h1>Error in creation/already Class.forName(\"com.mysql.jdbc.Driver\"); exists<br>\"); con=DriverManager.getConnection(\"jdbc:mys out.println(\"<a href='HomePage.html'>Click to ql://localhost:9300/dbStudent\",\"root\",\"root\"); go to Home Page</a><br>\"); st=con.createStatement(); }}} insertData.html <td><input type=\"text\" name=\"txtStudName\"></td> <!DOCTYPE html> </tr> <html> <tr> <head> <td>Marks in SSC</td> <meta http-equiv=\"Content-Type\" <td><input type=\"text\" content=\"text/html; charset=UTF-8\"> name=\"txtMarksSSC\"></td> <title>Insert</title> </tr> </head> <tr> <body> <td>Marks in HSC</td> <center> <td><input type=\"text\" <h1>Student Data Insertion</h1> name=\"txtMarksHSC\"></td> <form action=\"InsertStudent\"> </tr> <table> <tr> <tr> <td><input type=\"submit\" name=\"Insert\"></td> <td>Roll no</td> </tr> <td><input type=\"text\" name=\"txtRollNo\"></td> </table> </tr> </form> </center> </body> </html> <tr> <td>Student Name</td> CU IDOL SELF LEARNING MATERIAL (SLM)

Java Servlets - II 101 InsertStudent.java marksSSC=Float.parseFloat(request.getPar ameter(\"txtMarksSSC\")); import javax.servlet.*; float import javax.servlet.http.*; marksHSC=Float.parseFloat(request.getParam import java.io.*; eter(\"txtMarksHSC\")); import java.sql.*; String query=\"insert into tblStudent public class InsertStudent extends HttpServlet{ values(\"+no+\",'\"+name+\"',\"+marksSSC+\",\"+mar public void service(HttpServletRequest ksHSC+\")\"; request,HttpServletResponse response) throws System.out.println(query); IOException int c=st.executeUpdate(query); { if(c!=0) Connection con; out.println(\"<h1>Record inserted<br>\"); Statement st; else PrintWriter out=response.getWriter(); out.println(\"<h1>Error in insertion<br>\"); response.setContentType(\"text/html\"); out.println(\"<a href='HomePage.html'>Click to out.println(\"<center>\"); go to Home Page</a><br>\"); try out.println(\"<a href='insertData.html'>Click to { add one more record</a></h1>\"); } Class.forName(\"com.mysql.jdbc.Driver\");tm catch(Exception e) con=DriverManager.getConnection(\"jdbc:mysql { ://localhost:9300/dbStudent\",\"root\",\"root\"); System.out.println(e); st=con.createStatement(); out.println(\"<h1>Error in insertion<br>\"); int out.println(\"<a href='HomePage.html'>Click to no=Integer.parseInt(request.getParameter(\"txt go to Home Page</a><br>\"); RollNo\")); out.println(\"<a href='insertData.html'>Click to String add one more record</a></h1>\"); name=request.getParameter(\"txtStudName\"); }} } float <td>Roll No</td> deleteData.html <td><input type=\"text\" name=\"txtRollNo\"></td> </tr> <!DOCTYPE html> <tr> <html> <td><input type=\"submit\" <head> name=\"Delete\"></td> <meta http-equiv=\"Content-Type\" </tr> content=\"text/html; charset=UTF-8\"> <title>Delete</title> </head> CU IDOL SELF LEARNING MATERIAL (SLM)

102 Advanced Internet Programming <body> </table> <center> </form> <h1>Student Data Deletion</h1> </center> <form action=\"DeleteStudent\"> </body> <table> </html> <tr> String query=\"select * from tblStudent where DeleteStudent.java RollNo=\"+no+\";\"; ResultSet rs=st.executeQuery(query); import javax.servlet.*; if(rs.next()) import javax.servlet.http.*; { import j ava.io.*; query=\"delete from tblStudent where import java.sql.*; RollNo=\"+no+\";\"; public class DeleteStudent extends HttpServlet int c=st.executeUpdate(query); { if(c!=0) public void service(HttpServletRequest out.println(\"<h1>Record deleted<br>\"); request,HttpServletResponse response) throws } IOException else { out.println(\"<h1>No such record<br>\"); Connection con; out.println(\"<a href='HomePage.html'>Click to Statement st; go to Home Page</a><br><br>\"); PrintWriter out=response.getWriter(); } response.setContentType(\"text/html\"); catch(Exception e) out.println(\"<center>\"); { try System.out.println(e); { out.println(\"<h1>Error in deletion<br>\"); Class.forName(\"com.mysql.jdbc.Driver\"); out.println(\"<a href='HomePage.html'>Click to go to Home Page</a><br><br>\"); con=DriverManager.getConnection(\"jdbc:mysql: }} } //localhost:9300/dbStudent\",\"root\",\"root\"); st=con.createStatement(); <td>Roll No</td> int <td><input type=\"text\" name=\"txtRollNo\"></td> no=Integer.parseInt(request.getParameter(\"txtR ollNo\")); updateData.html <!DOCTYPE html> <html> CU IDOL SELF LEARNING MATERIAL (SLM)

Java Servlets - II 103 <head> </tr> <meta http-equiv=\"Content-Type\" <tr> content=\"text/html; charset=UTF-8\"> <td><input type=\"submit\" <title>Updation</title> name=\"Update\"></td> </head> </tr> <body> </table> <center> </form> <h1>Student Data Updation</h1> </center> <form action=\"UpdateStudent\"> </body> <table> </html> <tr> float marksSSC=rs.getFloat(3); UpdateStudent.java float marksHSC=rs.getFloat(4); import javax.servlet.*; import javax.servlet.http.*; out.println(\"<form import java.io.*; action='UpdateStudentDetails'><table><tr><td> import java.sql.*; Roll No</td><td><input type='text' public class UpdateStudent extends name='txtRollNo' value=\"+no+\"></td></tr>\"); HttpServlet{ public void service(HttpServletRequest out.println(\"<tr><td>Student request,HttpServletResponse response) throws Name</td><td><input type='text' IOException name='txtStudName' { value=\"+name+\"></td></tr>\"); Connection con; Statement st; out.println(\"<tr><td>Marks in PrintWriter out=response.getWriter(); SSC</td><td><input type='text' response.setContentType(\"text/html\"); name='marksSSC' out.println(\"<center>\"); value=\"+marksSSC+\"></td></tr>\"); try { out.println(\"<tr><td>Marks in Class.forName(\"com.mysql.jdbc.Driver\"); HSC</td><td><input type='text' con=DriverManager.getConnection(\"jdbc:mysql: name='marksHSC' //localhost:9300/dbStudent\",\"root\",\"root\"); value=\"+marksHSC+\"></td></tr>\"); st=con.createStatement(); int out.println(\"<tr><td><input type='submit' no=Integer.parseInt(request.getParameter(\"txtR name='Update'></td></tr></table></form>\"); ollNo\")); } else out.println(\"<h1>No such record<br>\"); out.println(\"<a href='HomePage.html'>Click to go to Home Page</a><br><br>\"); } CU IDOL SELF LEARNING MATERIAL (SLM)

104 Advanced Internet Programming String query=\"select * from tblStudent where catch(Exception e) RollNo=\"+no+\";\"; { ResultSet rs=st.executeQuery(query); System.out.println(e); if(rs.next()) out.println(\"<h1>Error in updation<br>\"); { out.println(\"<a href='HomePage.html'>Click to no=Integer.parseInt(rs.getString(1)); go to Home Page</a><br><br>\"); String name=rs.getString(2); }}} UpdateStudentDetails.java float marksSSC=Float.parseFloat(request.getPara import javax.servlet.*; meter(\"marksSSC\")); import javax.servlet.http.*; float import java.io.*; marksHSC=Float.parseFloat(request.getPara import java.sql.*; meter(\"marksHSC\")); public class UpdateStudentDetails extends String query=\"update tblStudent set HttpServlet{ StudName='\"+name+\"',MarksSSC=\"+marksS public void service(HttpServletRequest SC+\",MarksHSC='\"+marksHSC+\"' where request,HttpServletResponse response) throws RollNo=\"+no+\";\"; IOException System.out.println(query); { int c=st.executeUpdate(query); Connection con; if(c!=0) Statement st; out.println(\"<h1>Record updated<br>\"); PrintWriter out=response.getWriter(); else response.setContentType(\"text/html\"); out.println(\"<h1>Error in updation<br>\"); out.println(\"<center>\"); out.println(\"<a href='HomePage.html'>Click try to go to Home Page</a><br>\"); { } Class.forName(\"com.mysql.jdbc.Driver\"); catch(Exception e) con=DriverManager.getConnection(\"jdbc:mysql:// { localhost:9300/dbStudent\",\"root\",\"root\"); System.out.println(e); st=con.createStatement(); out.println(\"<h1>Error in updation<br>\"); int out.println(\"<a href='HomePage.html'>Click no=Integer.parseInt(request.getParameter(\"txtRo to go to Home Page</a><br>\"); llNo\")); }} } String name=request.getParameter(\"txtStudName\"); CU IDOL SELF LEARNING MATERIAL (SLM)

Java Servlets - II 105 5.5 Servlet Config and Servlet Context ServletConfig  ServletConfig available in javax.servlet.*; package  ServletConfig object is one per servlet class  Object of ServletConfig will be created during initialization process of the servlet  This Config object is public to a particular servlet only  Scope: As long as a servlet is executing, ServletConfig object will be available, it will be destroyed once the servlet execution is completed.  We should give re quest explicitly, in order to create ServletConfig object for the first time  In web.xml – <init-param> tag will be appear under <servlet-class> tag ServletContext  ServletContext available in javax.servlet.*; package  ServletContext object is global to entire web application  Object of ServletContext will be created at the time of web application deployment  Scope: As long as web application is executing, ServletContext object will be available, and it will be destroyed once the application is removed from the server.  ServletContext object will be available even before giving the first request  In web.xml – <context-param> tag will be appear under <web-app> tag Difference between ServletConfig and ServletContext in Java Servlet ServletConfig and ServletContext, both are objects created at the time of servlet initialization and used to provide some initial parameters or configuration information to the servlet. But, the difference lies in the fact that information shared by ServletConfig is for a specific servlet, while information shared by ServletContext is available for all servlets in the web application. ServletConfig:  ServletConfig is an object containing some initial parameters or configuration information created by Servlet Container and passed to the servlet during initialization. CU IDOL SELF LEARNING MATERIAL (SLM)

106 Advanced Internet Programming  ServletConfig is for a particular servlet, that means one should store servlet specific information in web.xml and retrieve them using this object.  Example: Suppose, one is building a job portal and desires to share different email ids (which may get change over time) to recruiter and job applicant. So, he decides to write two servlets one for handling recruiter’s request and another one for the job applicant. Where to store email-ids? Put email-id as a name-value pair for different servlet inside web.xml which can further be retrieved using getServletConfig().getInitParameter(“name”) in the servlet. ServletContext:  ServletContext is the object created by Servlet Container to share initial parameters or configuration information to the whole application.  Example: Suppose, the name of one’s job portal is “NewWebsite.tg”. Showing the website name at the top of webpages delivered by different servlets, one needs to store the website name in every servlet inviting redundancy. Since the information shared by ServletContext can be accessed by every Servlet, it is better to go with ServletContext and retrieve the website name using getServletContext.getInitParameter(“Name”) whenever required. 5.6 Session Tracking Session Tracking With Servlet API Session tracking is one of the important roles played by Java Servlet. To understand what session tracking is, let’s consider a Servlet that implements HTTP sessions, receives HTTP request from different clients. The Servlet, for each client request, must be able to determine the HTTP session to which the client request is made. Each client request belongs to just one of the client sessions tracked by the Servlet. The Servlet API provides a simple, powerful, set of techniques to deal with sessions. The Servlet API’s, HttpSession class, provides developers all that is required to track sessions using Servlet code spec. Each user that invokes the Servlet is mapped to a specific session, represented by an HttpSession instance. CU IDOL SELF LEARNING MATERIAL (SLM)

Java Servlets - II 107 Methods of Session Tracking There are several methods that facilitate exchanging SESSION IDs or state information between a visitor’s Web browser and the Web server. The following are the methods that allow tracking sessions: 1. Cookies 2. URLs Rewriting 3. Hidden Variables 4. Secure Socket Layer [SSL] 1. Cookies Cookies present a convenient way to store state information on a visitor’s hard disk. A cookie is a Web server generated container, in which the Web server can automatically store a small amount of state information on the visitor’s hard disk, through a request to the visitor’s browser. After this happens, each time the visitor’s Web browser communicates with the Web server that sets the cookie, it automatically returns the cookie content back to the Web server in its request for data. Advantages 1. Simplest technique of maintaining the state. 2. Cookies are maintained at client side. 3. Cookie information can be extracted from the client request using getCookies() of HttpSevletRequest Disadvantages 1. It will not work if cookie is disabled from the browser. 2. Only textual information can be set in Cookie object. 2. URL Rewriting With URL rewriting approach, the client appends some additional data to the end of each URL, which identifies the session and the Web server associates the identifier with data it has stored about the session. In other words, URL rewriting stores session details as part of the URL itself. CU IDOL SELF LEARNING MATERIAL (SLM)

108 Advanced Internet Programming For example, consider the following link in a Web page: <a href=”/bookshop/logincheck”> Which can be rewritten as: <a href=”/bookshop/logincheck;jsessionid=KD327888GMP444”> When the user clicks the link, the rewritten form of the URL is sent to server as part of the client’s request. The Web container identifies ;jsessionid=KD327888GMP444 as the SESSION ID and saves it for obtaining the proper HttpSession object for this client. Advantages 1. It will always work whether cookie is disabled or not (browser independent). 2. Extra form submission is not required on each page. Disadvantages 1. It will work only with links. 2. It can send Only textual information. 3. Hidden Form Fields In commercial applications occasionally it is necessary to return to the Web Server some client information, which is bound specifically to the application running in the client’s browser. In case of Hidden Form Field an invisible textfield is used for maintaining the state of an user. In such case, we store the information in the hidden field and get it from another servlet. This approach is better if we have to submit form in all the pages and we don't want to depend on the browser Example Servlet pulls out the SESSION ID from the form as follows: <form method=”post” action=”/MyServlets/Books” public void doPost(HttpServletRequest request, name=”frmBooks”> HttpServletResponse response) { <input type=”text” name=”txtBookName”> <input type=”hidden” name=”hidSessID” … value=””> … String mySessID = </form> request.getParamter(“hidSessID”); When the data is submitted to the Servlet, the … } CU IDOL SELF LEARNING MATERIAL (SLM)

Java Servlets - II 109 Explanation In the above code, the Books Servlet retrieves the SESSION ID from the hidden form field named hidSessID. Advantages 1. It will always work whether cookie is disabled or not. Disadvantages 1. It is maintained at server side. 2. Extra form submission is required on each page. 3. Only textual information can be used. 4. HttpSession Interface In such case, container creates a session id for each user. The container uses this id to identify the particular user. An object of HttpSession can be used to perform two tasks: 1. bind objects 2. view and manipulate information about a session, such as the session identifier, creation time, and last accessed time. The HttpServletRequest interface provides two methods to get the object of HttpSession: 1. public HttpSession getSession():Returns the current session associated with this request, or if the request does not have a session, creates one. 2. public HttpSession getSession(boolean create): Returns the current HttpSession associated with this request or, if there is no current session and create are true, returns a new session. 3. public String getId(): Returns a string containing the unique identifier value. 4. public long getCreationTime(): Returns the time when this session was created, measured in milliseconds since midnight January 1, 1970 GMT. 5. public long getLastAccessedTime():Returns the last time the client sent a request associated with this session, as the number of milliseconds since midnight January 1, 1970 GMT. CU IDOL SELF LEARNING MATERIAL (SLM)

110 Advanced Internet Programming Example of Cookies public void doPost(HttpServletRequest request, HttpServletResponse response) { // index.html try { <form action=\"servlet1\" method=\"post\"> response.setContentType(\"text/html\"); Name:<input type=\"text\" PrintWriter out = response.getWriter(); name=\"userName\"/><br/> Cookie ck[]=request.getCookies(); <input type=\"submit\" value=\"go\"/> out.print(\"Hello \"+ck[0].getValue()) </form> out.close(); // FirstServlet.java } catch(Exception e){System.out.println(e) ; } import java.io.*; }} import javax.servlet.*; import javax.servlet.http.*; response.setContentType(\"text/html\"); public class FirstServlet extends HttpServlet { PrintWriter out = response.getWriter(); Cookie ck[]=request.getCookies(); // SecondServlet.java out.print(\"Hello \"+ck[0].getValue()); out.close(); import java.io.*; } catch(Exception e){System.out.println(e); } } } import javax.servlet.*; import javax.servlet.http.*; public class SecondServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) { try { 5.7 Practical Assignment 1. Develop Java application of Session tracking using URL rewriting using annotation. 2. Develop Java application of a simple servlet program which stores a cookie in the browser when user first requests for it and then for further requests it displays the cookies stored. 3. Write a Program to take care of Number Format Exception if user enters values other than integer for calculating average marks of 2 students. The name of the students and marks in 3 subjects are taken from the user while executing the program.In the same Program write your own Exception classes to take care of Negative values and values out of range (i.e. other than in the range of 0-100) CU IDOL SELF LEARNING MATERIAL (SLM)

Java Servlets - II 111 5.8 Summary A servlet is a Java Programming language class that is used to extend the capabilities of servers that host applications accessed by means of a request-response programming model. Although servlets can respond to any type of request, they are commonly used to extend the applications hosted by web servers. It is also a web component that is deployed on the server to create a dynamic web page. 5.9 Key Words/Abbreviations  Collaborative: Servlet Collaboration means how one servlet can communicate with other. Sometimes servlets are to pass the common information that is to be shared directly by one servlet to another through various invocations of the methods.  Distributed: Give a share or a unit of (something) to each of a number of recipients.  Get request: The HTTP GET method requests a representation of the specified resource. Requests using GET should only retrieve data.  Post request: The HTTP POST method sends data to the server. It is often used when uploading a file or when submitting a completed web form.  Session: Session simply means a particular interval of time. Session Tracking is a way to maintain state (data) of an user. It is also known as session management in servlet 5.10 Learning Activity 1. Explain Hidden Form Fields ----------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- 2. Give difference between Get and Post. ----------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- CU IDOL SELF LEARNING MATERIAL (SLM)

112 Advanced Internet Programming 5.11 Unit End Questions (MCQs and Descriptive) A. Descriptive Types Questions 1. Explain how with the help of http protocol client requests are processed. 2. Explain GET and POST request methods of Http protocol using servlet. 3. Explain with example how data can be retrieving from database to servlet. 4. Explain with example how CRUD operation is to be performed with database in servlet. 5. Explain difference between Servlet config and Servlet context. 6. Write a short note on Session Tracking. 7. Explain different methods of Session Tracking. B. Multiple Choice/Objective Type Questions 1. Which methods are used to bind the objects on HttpSession instance and get the objects? (a) setAttribute (b) getAttribute (c) Both A & B (d) None of the above 2. What type of servlets use these methods doGet(), doPost(),doHead, doDelete(), doTrace()? (a) Genereic Servlets (b) HttpServlets (c) All of the above (d) None of the above 3. What are the functions of Servlet container? (a) Lifecycle management (b) Communication support (c) Multithreading support (d) All of the above 4. Which object of HttpSession can be used to view and manipulate information about a session? (a) session identifier (b) creation time (c) last accessed time (d) All mentioned above CU IDOL SELF LEARNING MATERIAL (SLM)

Java Servlets - II 113 5. Which method is used to specify before any lines that uses the PintWriter? (a) setPageType() (b) setContextType() (c) setContentType() (d) setResponseType() Answers 1. (c), 2. (b), 3. (d), 4. (d), 5. (c) 5.12 References 1. https://www.edureka.co/blog/java-servlets 2. https://www.geeksforgeeks.org/introduction-java-servlets/ 3. JDBC 4.2, Servlet 3.1, and JSP 2.3 Includes JSF 2.2 and Design Patterns, Black Book, 2ed CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT 6 AJAX - I Structure: 6.0 Learning Objectives 6.1 Introduction 6.2 AJAX Architecture 6.3 AJAX Request and Response Objects 6.4 AJAX Technologies 6.5 XML Http Request 6.6 AJAX with Database 6.7 Practical Assignment 6.8 Summary 6.9 Key Words/Abbreviations 6.10 Learning Activity 6.11 Unit End Questions (MCQs and Descriptive) 6.12 References 6.0 Learning Objectives After studying this unit, you will be able to:  Explain AJAX architecture  Define AJAX request & response objects  Elaborate AJAX technologies CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - I 115  Describe XMLHttpRequest  AJAX with Database 6.1 Introduction Ajax is an acronym for Asynchronous Javascript and XML. AJAX is a web development technique for creating interactive web applications. If you know JavaScript, HTML, CSS, and XML, then Understanding the AJAX is easy. 6.2 AJAX architecture  AJAX is AsynchronousJavaScriptAndXML.  AJAX is not a programming language.  AJAX just uses a combination of:  A browser built-in XMLHttpRequest object (to request data from a web server)  JavaScript and HTML DOM (to display or use the data)  Ajax is based on HTML, CSS, JavaScript, DOM, and XML.  HTML/CSS HTML/CSS is website markup language for defining web page layout, such as fonts style and colors.  JavaScript JavaScript is a web scripting language. JavaScript special object XMLHttpRequest that was designed by Microsoft. XMLHttpRequest provides an easy way to retrieve data from web server without having to do full page refresh. Web page can update just part of the page without interrupting what the users are doing.  Document Object Model Document Object Model (DOM) method provides a tree structure as a logical view of web page.  XML XML is a format for retrieve any type of data, not just XML data from the web server. However you can use other formats such as Plain text, HTML or JSON (JavaScript Object Notation). and it supports protocols HTTP and FTP. XMLHttpRequest is used heavily in AJAX programming. CU IDOL SELF LEARNING MATERIAL (SLM)

116 Advanced Internet Programming 1. Java Script Call Client Browser Client side User interface 5. Rander with 2. HTTP HTML/CSS Request 4. XML Data Plain Text/JSON data 3. Data Exchange Business Logic for storing, retrieving data Database 3. Data Exchange Web Server Fig. 6.1: AJAX Technologies Above figure (visual diagram) illustrates how AJAX technologies work together to handle user action. User action are triggers an AJAX response.  Client side user perform action to generate event that event call to a JavaScript function.  JavaScript function create XMLHttpRequest object, XMLHttpRequest object specify the JavaScript callback function.  JavaScript XMLHttpRequest object call as a asynchronous HTTP request to the Server.  Web Server process the request and return XML contain data.  XMLHttpRequest object calls to a callback function along with response from the web server.  Client browser updates the HTML DOM representing the web page along with new data. 6.3 AJAX Request and Response Objects Send a Request To a Server To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object: xhttp.open(\"GET\",\"ajax_info.txt\",true); xhttp.send(); CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - I 117 Method Table 6.1: GET Request Open (method, url, async) Description send() Specifies the type of request send(string) method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) Sends the request to the server (used for GET) Sends the request to the server (used for POST) GET or POST? GET is simpler and faster than POST, and can be used in most cases. However, always use POST requests when:  A cached file is not an option (update a file or database on the server).  Sending a large amount of data to the server (POST has no size limitations).  Sending user input (which can contain unknown characters), POST is more robust and secure than GET. GET Requests A simple GET request: Example: xhttp.open(\"GET\",\"demo_get.asp\",true); xhttp.send(); In the example above, you may get a cached result. To avoid this, add a unique ID to the URL: Example: xhttp.open(\"GET\",\"demo_get.asp?t=\"+ Math.random(),true); xhttp.send(); If you want to send information with the GET method, add the information to the URL: Example: xhttp.open(\"GET\",\"demo_get2.asp?fname=Henry&lname=Ford\",true); xhttp.send(); CU IDOL SELF LEARNING MATERIAL (SLM)

118 Advanced Internet Programming POST Requests A simple POST request: Example: xhttp.open(\"POST\",\"demo_post.asp\",true); xhttp.send(); To POST data like an HTML form, add an HTTP header with setRequestHeader(). Specify the data you want to send in the send() method: Example: xhttp.open(\"POST\",\"demo_post2.asp\",true); xhttp.setRequestHeader(\"Content-type\",\"application/x-www-form-urlencoded\"); xhttp.send(\"fname=Henry&lname=Ford\"); Table 6.2: POST Request Method Description setRequestHeader (header, value) Adds HTTP headers to the request header: specifies the header name The url - A File On a Server value: specifies the header value The url parameter of the open() method, is an address to a file on a server: xhttp.open(\"GET\",\"ajax_test.asp\",true); The file can be any kind of file, like .txt and .xml, or server scripting files like .asp and .php (which can perform actions on the server before sending the response back). Asynchronous - True or False? Server requests should be sent asynchronously. The async parameter of the open() method should be set to true: xhttp.open(\"GET\",\"ajax_test.asp\",true); By sending asynchronously, the JavaScript does not have to wait for the server response, but can instead: CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - I 119  execute other scripts while waiting for server response  deal with the response after the response is ready The onreadystatechange Property  With the XMLHttpRequest object you can define a function to be executed when the request receives an answer.  The function is defined in the onreadystatechange property of the XMLHttpResponse object: Example: xhttp.onreadystatechange=function() { if(this.readyState==4&&this.status==200) { document.getElementById(\"demo\").innerHTML=this.responseText; } }; xhttp.open(\"GET\",\"ajax_info.txt\",true); xhttp.send(); Synchronous Request To execute a synchronous request, change the third parameter in the open() method to false: xhttp.open(\"GET\",\"ajax_info.txt\",false); Sometimes async = false are used for quick testing. You will also find synchronous requests in older JavaScript code. Since the code will wait for server completion, there is no need for an onreadystatechange function: Example: xhttp.open(\"GET\",\"ajax_info.txt\",false); xhttp.send(); document.getElementById(\"demo\").innerHTML= xhttp.responseText; AJAX Response Objects Ajax.Responseis the object passed as the first argument of all Ajax requests callbacks. This is a wrapper around the native xmlHttpRequest object. It normalizes cross-browser issues while adding support for JSON via the responseJSON and headerJSON properties. CU IDOL SELF LEARNING MATERIAL (SLM)

120 Advanced Internet Programming Properties of the Ajax.Response Object Table 6.3: AJAX Response Objects Property Type Description status statusText Number The HTTP status code sent by the server. readyState String The HTTP status text sent by the server. responseText responseXML Number The request’s current state. 0 corresponds to “Uninitialized”, 1 to “Loading”, 2 to “Loaded”, 3 to “Interactive” and 4 to responseJSON “Complete”. headerJSON String The text body of the response. request document Object The XML body of the response if the content-type of the transport or null request is set to application/xml. null otherwise Object, Array The JSON body of the response if the content-type of the or null request is set to application/json. null otherwise. Object, Array Auto-evaluated content of the X-JSON header if present. null or null otherwise. This is useful to transfer small amounts of data. Object The request object itself (an instance of Ajax.Request or Ajax.Updater). Object The native xmlHttpRequest object itself. Example Following is the example to show the usage of statusand response Text properties – <html> var container = $('notice'); <head> var content = response.responseText; <title>Prototype examples</title> container.update(content); } <script type = \"text/javascript\" src = function failureFunc(response) { \"/javascript/prototype.js\"></script> alert(\"Call is failed\" ); } <script> </script> function SubmitRequest() { </head> new Ajax.Request('/cgi-bin/ajax.cgi', { <body> method: 'get', <p>Click submit button to see how current onSuccess: successFunc, notice changes.</p> onFailure: failureFunc <br /> }); <div id = \"notice\">Current Notice</div> CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - I 121 } <br /> function successFunc(response) { if (200 == response.status) { <br /> alert(\"Call is success\"); <input type = \"button\" value = \"Submit\" onclick } = \"SubmitRequest();\"/> </body> </html> Here is the content of ajax.cgi. #!/usr/bin/perl print \"Content-type: text/html\\n\\n\"; print \"This content is returned by AJAX cgi \"; print \"Current Time \" . localtime Methods of the Ajax.Response Object Table 6.4: Methods of the Ajax.Response Object Method Type Description getHeader(name) String or null Returns the value of the requested header if present. null otherwise. getAllHeaders() String or null Returns a string containing all headers separated by a line break. getResponseHeader(name) String Returns the value of the requested header if present. Throws an error otherwise. This is just a wrapper around the xmlHttpRequest object.s native method. Prefer it’s shorter counterpart getHeader. getAllResponseHeaders() String Returns a string containing all headers separated by a line break. Throws an error otherwise. This is just a wrapper around the xmlHttpRequest object’s native method. Prefer it.s shorter counterpart getAllHeaders. Example Following is the example to show the usage of getAllHeaders() and getResponseHeader(name) methods – <html> var content = response.getResponseHeader('Content-Type'); <head> <title>Prototype examples</title> var container = $(header2); <script type = \"text/javascript\" src = container.update(content); \"/javascript/prototype.js\"></script> } CU IDOL SELF LEARNING MATERIAL (SLM)

122 Advanced Internet Programming <script> </script> </head> function SubmitRequest() { <body> new Ajax.Request('/cgi-bin/ajax.cgi', { <p>Click submit button to see the result:</p> method: 'get', <br /> onSuccess: successFunc }); <div id = \"header1\">All Headers</div> } <div id = \"header2\">Content Type</div> function successFunc(response) { <br /> var content = response.getAllHeaders(); <br /> var container = $(header1); <input type = \"button\" value = \"Submit\" onclick container.update(content); = \"SubmitRequest();\"/> </body> </html> 6.4 AJAX Technologies AJAX cannot work independently. It is used in combination with other technologies to create interactive webpages. DOM  API for accessing and manipulating structured documents.  Represents the structure of XML and HTML documents.  It is used for dynamic display and interaction with data. CSS  Allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript XMLHttpRequest  JavaScript object that performs asynchronous interaction with the server. For more visit next page. XML or JSON  For carrying data to and from server. JSON (Javascript Object Notation) is like XML but short and faster than XML. ASP or JSP  Server side CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - I 123 JavaScript  Loosely typed scripting language.  JavaScript function is called when an event occurs in a page.  Glue for the whole AJAX operation.  It is used to bring above technologies together.  It used for Client-side validation and validate user input in an HTML form before sending the data to a server. 6.5 XMLHttpRequest The XMLHttpRequest object can be used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. The XMLHttpRequest object is the key to AJAX. It has been available ever since Internet Explorer 5.5 was released in July 2000, but was not fully discovered until AJAX and Web 2.0 in 2005 became popular. XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript, VBScript, and other web browser scripting languages to transfer and manipulate XML data to and from a webserver using HTTP, establishing an independent connection channel between a webpage’s Client-Side and Server-Side. The data returned from XMLHttpRequest calls will often be provided by back-end databases. Besides XML, XMLHttpRequest can be used to fetch data in other formats, e.g. JSON or even plain text. Using Ajax XMLHttpRequest object you can make many things easier. So many new things can’t possible using HEAD request. This object allows you to making HTTP requests and receives responses from the server in the background, without requiring the user to submit the page to the server (without round trip process). Using DOM to manipulate received data from the server and make responsive contents are added into live page without user/visual interruptions. Using this object you can make very user interactive web application. Following are sequence ofstepfor working with XMLHttpRequest object: CU IDOL SELF LEARNING MATERIAL (SLM)

124 Advanced Internet Programming  Define instance of this XMLHttpRequest.  Create a asynchronous call to a server page, also defining a callback function that will automatically execute when the server response is received.  Callback function getting server response.  DOM manipulate received data and added into live page.  Create an XMLHttpRequest Object  All modern browsers (Chrome, Firefox, IE7+, Edge, Safari Opera) have a built-in XMLHttpRequest object. Syntax for creating an XMLHttpRequest object: variable=newXMLHttpRequest(); Example varxhttp =newXMLHttpRequest(); XMLHttpRequest Methods  abort() Cancels the current request.  getAllResponseHeaders() Returns the complete set of HTTP headers as a string.  getResponseHeader(headerName) Returns the value of the specified HTTP header.  open(method, URL)  open(method, URL, async)  open(method, URL, async, userName)  open(method, URL, async, userName, password) Specifies the method, URL, and other optional attributes of a request. The method parameter can have a value of “GET”, “POST”, or “HEAD”. Other HTTP methods such as “PUT” and “DELETE” (primarily used in REST applications) may be possible. The “async” parameter specifies whether the request should be handled asynchronously or not. “true” means that the script processing carries on after the send() method without waiting for CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - I 125 a response, and “false” means that the script waits for a response before continuing script processing.  send(content) Sends the request.  setRequestHeader(label, value) Adds a label/value pair to the HTTP header to be sent. XMLHttpRequest Properties  onreadystatechange An event handler for an event that fires at every state change.  readyState The readyState property defines the current state of the XMLHttpRequest object. The following table provides a list of the possible values for the readyState property − Table 6.5: List of the Possible Values for the Readystate Property State Description 0 The request is not initialized. 1 The request has been set up. 2 The request has been sent. 3 The request is in process. 4 The request is completed.  readyState = 0After you have created the XMLHttpRequest object, but before you have called the open() method.  readyState = 1 After you have called the open() method, but before you have called send().  readyState = 2 After you have called send(). readyState = 3 After the browser has established a communication with the server, but before the server has completed the response.  readyState = 4 After the request has been completed, and the response data has been completely received from the server.  responseText Returns the response as a string. CU IDOL SELF LEARNING MATERIAL (SLM)

126 Advanced Internet Programming  responseXML Returns the response as XML. This property returns an XML document object, which can be examined and parsed using the W3C DOM node tree methods and properties.  status Returns the status as a number (e.g., 404 for “Not Found” and 200 for “OK”).  statusText Returns the status as a string (e.g., “Not Found” or “OK”). 6.6 AJAX with Database AJAX can be used for interactive communication with a database. Fetching data from MYSQL database in JSP and Servlet with JSON and JQuery. Fig. 6.2: AJAX with Database Steps to create ajax example with database through jsp You need to follow following steps: 1. load the org.json.jar file 2. create input page to receive any text or number 3. create server side page to process the request Load the org.json.jar file Include the org.json.jar file inside the WEB-INF/lib directory. CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - I 127 create input page to receive any text or number In this page, we have created a form that gets input from the user. When user press any key sendInfo() function is called. We have written all theajaxcode inside this function. We have called the getInfo() function whenever ready state changes. It writes the returned data in the web page dynamically by the help of innerHTML property. Ajax Java Example with Database In this example, we are interacting with the database. You don’t have to make any extra effort. Only write the database logic in you server side page. In this example, we have written the server side code inside the index.jsp file. Steps to create ajax example with database through jsp You need to follow following steps: 1. load the org.json.jar file 2. create input page to receive any text or number 3. create server side page to process the request Output table1.html <formname=\"vinform\"> <html> Enterid:<inputtype=\"text\"name=\"t1\"onkeyup=\"send <head> Info()\"> <script> </form> varrequest; <spanid=\"amit\"></span> functionsendInfo() </body> { </html> varv=document.vinform.t1.value; varurl=\"index.jsp?val=\"+v; index.jsp if(window.XMLHttpRequest){ <%@pageimport=\"java.sql.*\"%> request=newXMLHttpRequest(); <% } Strings=request.getParameter(\"val\"); elseif(window.ActiveXObject){ if(s==null||s.trim().equals(\"\")){ request=newActiveXObject(\"Microsoft.XML out.print(\"Pleaseenterid\"); HTTP\"); }else{ } intid=Integer.parseInt(s); CU IDOL SELF LEARNING MATERIAL (SLM)

128 Advanced Internet Programming try{ out.print(id); request.onreadystatechange=getInfo; try{ request.open(\"GET\",url,true); Class.forName(\"com.mysql.jdbc.Driver\"); request.send(); Connectioncon=DriverManager.getConnection(\"jd }catch(e){alert(\"Unabletoconnecttoserver\");} bc:mysql://localhost:3306/mdb\",\"root\",\"root\"); } PreparedStatementps=con.prepareStatement(\"sel functiongetInfo(){ ect*fromempwhereid=?\"); if(request.readyState==4){ ps.setInt(1,id); varval=request.responseText; ResultSetrs=ps.executeQuery(); document.getElementById('amit').innerHTM while(rs.next()){ L=val; out.print(rs.getInt(1)+\"\"+rs.getString(2)); } } } con.close(); </script> </head> }catch(Exceptione){e.printStackTrace();} <body> } %> This is an example of ajax with database Fig. 6.3: Example of AJAX with Database 6.7 Practical Assignment 1. Develop a Java application with AJAX to print table of number which is to be accepted by user through textfield. 2. Develop HelloWorld ajax web application to demonstrate basics of Java with Ajax. 6.8 Summary AJAX is a developer’s dream, because you can:  Update a web page without reloading the page  Request data from a server - after the page has loaded CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - I 129  Receive data from a server - after the page has loaded  Send data to a server - in the background 6.9 Key Words/Abbreviations  HTML: Hyper Text Markup Language  CSS: Cascading Style Sheets  XML: Extensible Markup Language  JSP: JavaServer Pages  JSON: JavaScript Object Notation 6.10 Learning Activity 1. List and explain XMLHttpRequest Properties. ----------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- 2. List and explain Methods of the Ajax.Response Object ----------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- 6.11 Unit End Questions (MCQs and Descriptive) A. Descriptive Types Questions 1. Explain AJAX architecture 2. Write note on AJAX request & response objects 3. Explain AJAX Technologies 4. Explain XMLHttpRequest 5. Explain AJAX with Database CU IDOL SELF LEARNING MATERIAL (SLM)

130 Advanced Internet Programming B. Multiple Choice/Objective Type Questions 1. AJAX Stands for: (a) Asynchronous Javascript and XML (b) Abstract JSON and XML (c) Another Java Abstraction for X-Windows (d) Another Java and XML Library 2. What is AJAX ? (a) is a programe (b) is a country name (c) is a football club name (d) is a Language 3. What makes Ajax unique? (a) It works as a stand-alone Web-development tool. (b) It works the same with all Web browsers. (c) It uses C++ as its programming language. (d) It makes data requests asynchronously. 4. What sever support AJAX ? (a) SMTP (b) WWW (c) HTTP (d) FTP 5. __________ Of the following technologies, which one provides the ability to dynamically interact with Web page layout? (a) JavaScript. (b) XML. (c) Document Object Model. (d) HTML. Answers 1. (a), 2. (a), 3. (d), 4. (c), 5. (c) 6.12 References 1. https://www.w3schools.com/php/php_ajax_intro.asp 2. https://www.geeksforgeeks.org/ajax-introduction/ 3. Thomas Powell, 20 March 2008, “Ajax: The Complete Reference Paperback”. CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT 7 AJAX - II Structure: 7.0 Learning Objectives 7.1 Introduction 7.2 AJAX -PHP Framework, 7.3 Comment form using AJAX in Java 7.4 Handling XML data using PHP and AJAX, AJAX JSON 7.5 Practical Assignment 7.6 Summary 7.7 Key Words/Abbreviations 7.8 Learning Activity 7.9 Unit End Questions (MCQs and Descriptive) 7.10 References 7.0 Learning Objectives After studying this unit, you will be able to:  Describe AJAX -PHP framework  Comment form using AJAX in Java  Explain Handling XML data using PHP and AJAX, AJAX JSON CU IDOL SELF LEARNING MATERIAL (SLM)

132 Advanced Internet Programming 7.1 Introduction Ajax is an acronym for Asynchronous Javascript and XML. It is used to communicate with the server without refreshing the web page and thus increasing the user experience and better performance. 7.2 AJAX -PHP framework A PHP Ajax framework is able to deal with database, search data, and build pages or parts of  Page and publish the page or return data to the XMLHttpRequest object.  Quicknet is an Ajax framework that provides secure data transmission, uses PHP on the server side. It is designed to develop web applications or websites that use passwords to identify correct users.  Using this framework, no cleartext password would be sent over the network or stored in the server.  Quicknet supports multi-language, AJAX call, session and password management, + 34 A tmodular structure, XML content and Javascript animation where PHP is used on the server side. AjaxAC :  It is an open source framework written in PHP, used to develop/create/generate AJAX applications.  The fundamental idea behind AJAX (Asynchronous Javascript and XML) is to use the XMLHttpRequest object to change a web page state using background HTTP subrequests without reloading the entire page. Features: 1. All application code is self contained in a single class (also additional Javascript libraries) 2. Calling PHP file/HTML page is very clean. All that is required is creating the application classes, then referencing the application Javascript and attaching any required elements to the application. 3. Built in functionality for easy handling Javascript events. 4. Easy to hook in to existing PHP Classes or MySQL database for returning data from subrequests. CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - II 133 How to Create an PHP Ajax application We will create a simple application that allows users to search for popular PHP MVC frameworks. Our application will have a text box that users will type in the names of the framework. We will then use mvc AJAX to search for a match then display the framework’s complete name just below the search form. Step 1: Creating the index page Index.php <html> MVC Framework</b></p> <head> <form method=\"POST\" action=\"index.php\"> <title>PHP MVC Frameworks - Search Engine</title> <p><input type=\"text\" size=\"40\" id=\"txtHint\" onkeyup=\"showName(this.value)\"> <script type=\"text/javascript\" </p> src=\"/auto_complete.js\"></script> </form> </head> <p>Matches: <span <body> id=\"txtName\"></span></p> <h2>PHP MVC Frameworks - Search </body> Engine</h2> </html> <p><b>Type the first letter of the PHP HERE,  “onkeyup=\"showName(this.value)\"” executes the JavaScript function show Name everytime a key is typed in the textbox. This feature is called auto complete Step 2: Creating the frameworks page frameworks.php <?php strlen($name)))) { $frameworks = array(\"CodeIgniter\",\"Zend Framework\",\"Cake PHP\",\"Kohana\") ; if ($match == \"\") $name = $_GET[\"name\"]; if (strlen($name) > 0) { { $match = $frameworks[$i]; } $match = \"\"; for ($i = 0; $i < count($frameworks); $i++) else { { $match = $match . \" , \" . $frameworks[$i]; } } }} CU IDOL SELF LEARNING MATERIAL (SLM)

134 Advanced Internet Programming if (strtolower($name) == echo ($match == \"\") ? 'no match found' : strtolower(substr($frameworks[$i], 0, $match; ?> Step 3: Creating the JS script auto_complete.js function showName(str) { xmlhttp.onreadystatechange=function() { if (str.length == 0){ //exit function if nothing if (xmlhttp.readyState == 4 && xmlhttp.status has been typed in the textbox == 200){ document.getElementById(\"txtName\").in document.getElementById(\"txtName\").inn nerHTML=\"\"; //clear previous results erHTML=xmlhttp.responseText; return; } } if (window.XMLHttpRequest) {// code for } IE7+, Firefox, Chrome, Opera, Safari xmlhttp.open(\"GET\",\"frameworks.php?name=\"+st xmlhttp=new XMLHttpRequest(); r,true); } else {// code for IE6, IE5 xmlhttp.send(); xmlhttp=new } ActiveXObject(\"Microsoft.XMLHTTP\"); } HERE,  “if (str.length == 0)” check the length of the string. If it is 0, then the rest of the script is not executed.  “ if (window.XMLHttpRequest) … ” Internet Explorer versions 5 and 6 use ActiveXObject for AJAX implementation. Other versions and browsers such as Chrome, FireFox use XMLHttpRequest. This code will ensure that our application works in both IE 5 & 6 and other high versions of IE and browsers.  “ xmlhttp.onreadystatechange=function … ” checks if the AJAX interaction is complete and the status is 200 then updates the txtName span with the returned results. Step 4: Testing our PHP Ajax application Fig. 7.1: PHP Ajax - 1 CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - II 135 Assuming you have saved the file index.php In phututs/ajax, browse to the URL http://localhost/phptuts/ajax/index.php Type the letter C in the text box you will get the following results. Fig. 7.2: PHP Ajax - 2 The above example demonstrates the concept of AJAX and how it can help us create rich interaction applications. 7.3 Comment form using AJAX in Java The form data is saved in the database and a list of all posted comments are shown below the comment form. Steps to create comment form example using AJAX in Java You need to follow following steps: 1. Create table in database 2. load the org.json.jar file 3. Create comment form 4. Create server side page to save the form data and print all posted comments Create Table in Database In this example, we are using oracle 10g database. The table structure is given below: Load the org.json.jar file Download this example, we have included the org.json.jar file inside the WEB-INF/lib directory. CU IDOL SELF LEARNING MATERIAL (SLM)

136 Advanced Internet Programming Create comment form In this page, we have created a form that gets input from the user. When user clicks on the Post Comment button, postComment() function is called. We have written all the ajax code inside this function. index.html <!DOCTYPE html> }//end of function <html> request.open(\"GET\",url,true); <head> request.send(); <script> }catch(e){alert(\"Unable to connect to server\");} var request; } function postComment() { </script> </head> var comment=document.commentform.com <body> ment.value; document.getElementById('mylocation').innerHTM var email=document.commentform.email.val L=val; } ue; <h1>Comment Form</h1> var url=\"index.jsp?comment=\"+comment+\" &email=\"+email; <form name=\"commentform\"> if(window.XMLHttpRequest) { Enter Comment:<br/> request=new XMLHttpRequest(); <textarea name=\"comment\" style=\"width:300px;he ight:100px\" required> } </textarea> <br/> else if(window.ActiveXObject) { Enter Email:<br/> request=new ActiveXObject(\"Microsoft.XML HTTP\"); <input type=\"text\" name=\"email\" required/><br/><b r/> } <input type=\"button\" value=\"Post Comment\" oncli try { ck=\"postComment()\"> request.onreadystatechange=function() { </form> if(request.readyState==4) { <span id=\"mylocation\"></span> var val=request.responseText; </body> </html> Create server side page to process the request In this jsp page, we are writing the database code to save the comment and print all comments. CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - II 137 index.jsp PreparedStatement ps=con.prepareStatemen t(\"insert into usercomment(comment1,email) <!DOCTYPE html> values(?,?)\"); ps.setString(1,comment); <html> ps.setString(2,email); <head> int i=ps.executeUpdate(); <style> PreparedStatement ps2=con.prepareStateme div.box{margin:2px;border:1px solid pink;padding: nt(\"select * from usercomment order by id de 10px;background-color:#e3e3e3} sc\"); </style> ResultSet rs=ps2.executeQuery(); </head> <body> out.print(\"<hr/><h2>Comments:</h2>\"); <%@ page import=\"java.sql.*\" %> while(rs.next()){ <% out.print(\"<div class='box'>\"); String comment=request.getParameter(\"comment out.print(\"<p>\"+rs.getString(2)+\"</p>\"); \"); out.print(\"<p><strong>By: \"+rs.getString(3)+\" String email=request.getParameter(\"email\"); </strong></p>\"); if(comment==null||email==null||comment.trim().eq out.print(\"</div>\"); uals(\"\")||email.trim().equals(\"\")){ } con.close(); out.print(\"<p>Please write comment</p>\"); }catch(Exception e){out.print(e);} }else{ }//end of else try{ %> Class.forName(\"oracle.jdbc.driver.OracleDriver\"); </body> </html> Connection con=DriverManager.getConnection(\"j dbc:oracle:thin:@localhost:1521:xe\",\"system\"\"ora cle\"); 7.4 Handling XML Data using PHP and AJAX, AJAX JSON Files and various databases are useful for storing data, but as they get bigger, they might as well become easier to get lost in them. Finding information that you have to use in some particular moment, manually might take ages. The problem is that when you need something, you usually need it fast. Making PHP read XML file can help you retrieve data quickly. XML is one of the most common formats for keeping data strings. If you prefer it as well, you can use AJAX to read XML files. In other words, AJAX can help you connect with the XML document that holds information and quickly find the exact data. CU IDOL SELF LEARNING MATERIAL (SLM)

138 Advanced Internet Programming Ajax XML Example Using with Ajax we can parser xml from local directory as well as servers, Below example demonstrate how to parser xml with web browser. <html> document.getElementById(\"txtHint\").innerHTM <head> L = xmlhttp.responseText; <script> }} function showCD(str) { if (str == \"\") { xmlhttp.open(\"GET\",\"getcourse.php?q=\"+str,tr document.getElementById(\"txtHint\").innerHTML ue); = \"\"; xmlhttp.send(); } return; </script> </head> <body> } if (window.XMLHttpRequest) { <form> // code for IE7+, Firefox, Chrome, Opera, Safari Select a Course: xmlhttp = new XMLHttpRequest(); <select name = \"cds\" onchange = } else { \"showCD(this.value)\"> // code for IE6, IE5 xmlhttp = new <option value = \"\">Select a course:</option> ActiveXObject(\"Microsoft.XMLHTTP\"); <option value = \"Android\">Android </option> } <option value = \"Html\">HTML</option> xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == <option value = \"Java\">Java</option> 200) { <option value = \"Microsoft\">MS technologies</option> </select> </form> <div id = \"txtHint\"><b>Course info will be listed here...</b></div> </body> </html> The above example will call getcourse.php using with GET method. getcourse.php file loads catalog.xml. getcourse.php is as shown below – <?php }} } $q = $_GET[\"q\"]; $cd = ($y->childNodes); $xmlDoc = new DOMDocument(); $xmlDoc->load(\"catalog.xml\"); for ($i = 0;$i<$cd->length;$i++) { $x = $xmlDoc- if ($cd->item($i)->nodeType == 1) { >getElementsByTagName('COURSE'); echo(\"<b>\" . $cd->item($i)->nodeName . \":</b> for ($i = 0; $i<=$x->length-1; $i++) { \"); if ($x->item($i)->nodeType == 1) { if ($x->item($i)->childNodes->item(0)- echo($cd->item($i)->childNodes->item(0)- >nodeValue); echo(\"<br>\"); CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - II 139 >nodeValue == $q) { } } ?> $y = ($x->item($i)->parentNode); Catalog.xml XML file having list of courses and details. This file is accessed by getcourse.php <CATALOG> <SUBJECT> <SUBJECT> <COURSE>Java</COURSE> <COURSE>Android</COURSE> <COUNTRY>India</COUNTRY> <COUNTRY>India</COUNTRY> <COMPANY>TutorialsPoint</COMPANY> <COMPANY>TutorialsPoint</COMPANY> <PRICE>$20</PRICE> <PRICE>$10</PRICE> <YEAR>2015</YEAR> <YEAR>2015</YEAR> </SUBJECT> </SUBJECT> <SUBJECT> <SUBJECT> <COURSE>Html</COURSE> <COURSE>Microsoft</COURSE> <COUNTRY>India</COUNTRY> <COUNTRY>India</COUNTRY> <COMPANY>TutorialsPoint</COMPANY> <COMPANY>TutorialsPoint</COMPANY> <PRICE>$15</PRICE> <PRICE>$25</PRICE> <YEAR>2015</YEAR> <YEAR>2015</YEAR> </SUBJECT> </SUBJECT> </CATALOG> It will produce the following result − 7.5 Practical Assignment 1. Design a application to Retrieve the content of an ASP file. 2. Design a application to Retrieve the content from database. 7.6 Summary AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. CU IDOL SELF LEARNING MATERIAL (SLM)

140 Advanced Internet Programming Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. 7.7 Key Words/Abbreviations  Quicknet: Quicknet is an Ajax framework (using XMLHttpRequest in JavaScript) designed to develop web applications or websites that use passwords to identify correct users. It uses PHP on the server side, and JavaScript on the client side.  PHP: Hypertext Preprocessor 7.8 Learning Activity 1. List and explain the steps for email finder. ----------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- 2. Explain features of AJAX –PHP framework. ----------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- 7.9 Unit End Questions (MCQs and Descriptive) A. Descriptive Types Questions 1. Explain AJAX architecture. 2. Write note on AJAX request & response objects. 3. Explain AJAX Technologies. 4. Explain XMLHttpRequest. 5. Explain AJAX with Database. B. Multiple Choice/Objective Type Questions 1. AJAX based on__________. (a) JavaScript and XML (b) JavaScript and Java (c) VBScript and XML (d) JavaScript and HTTP requests CU IDOL SELF LEARNING MATERIAL (SLM)

AJAX - II 141 2. What combination of technologies gives AJAX its name? (a) ASP and XAML (b) Asynchronous JavaScript and XML (c) Autonomic Computing and DHTML (d) Atlas and XML 3. What does the tag do? (a) Enclose text to be displayed by non-JavaScript browsers. (b) Prevents scripts on the page from executing. (c) Describes certain low-budget movies. (d) None of the above 4. __________ JavaScript is also called client-side JavaScript. (a) Microsoft (b) Navigator (c) LiveWire (d) Native 5. __________ JavaScript is also called server-side JavaScript (a) Microsoft (b) Navigator (c) LiveWire (d) Native Answers 1. (a), 2. (b), 3. (a), 4. (b), 5. (c) 7.10 References 1. https://www.tutorialspoint.com/ajax/index.htm 2. https://www.enotes.com/topics/ajax 3. Rebecca M..Riordan,” Head First Ajax OREILLY”. CU IDOL SELF LEARNING MATERIAL (SLM)