Aplikacja WWW - projekt - serwlety - Java Server Pages - AJAX


Zadanie

1) Dołączyć do projektu serwlet Display_Data

2) Utworzyć stronę startową wyświetlającą dostępne książki

3) Skopiować do katalogu Web plik ajax.js


 SERVLET DISPLAY_DATA
package pss;
 
import java.sql.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
 
 
 
public class Display_Data extends HttpServlet {
 
  public void doGet(HttpServletRequest req, HttpServletResponse res)
    throws ServletException, IOException {
 
    res.setContentType("text/html");
    PrintWriter out = res.getWriter();
 
    out.print("<html><head>");
    out.print("</head><body>");
 
    out.print("<form action=\"");
    out.print( req.getRequestURI() );
    out.print("\" method=\"post\">");
    out.print("<input type=\"submit\" ");
    out.print("value=\" \">  ");
    out.print("Display Records</form>");
 
    out.print("</body></html>");
 
    out.close();
  }
 
  public void doPost(HttpServletRequest req, HttpServletResponse res)
    throws ServletException, IOException {
 
    res.setContentType("text/html");
    PrintWriter out = res.getWriter();
 
    out.print("<html><head>");
    out.print("</head><body>");
 
    out.print("<code><pre>");
    out.print("<font color=green>ID\tFirst ");
    out.println("Name\tLast Name\n</font>");
 
    // debugging info
 
    long time1 = System.currentTimeMillis();
 
    // connecting to database
 
    Connection con = null;
    Statement stmt = null;
    ResultSet rs = null;
 
    try {
      Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
      con = DriverManager.getConnection("jdbc:odbc:a");
 
      stmt = con.createStatement();
      rs = stmt.executeQuery("SELECT * FROM PRODUCTS");
 
//      rs = stmt.executeQuery("SELECT DESCRIPTION FROM PRODUCTS WHERE ID =" + req.getParameter("ID")"");      
      
      // displaying records
 
      while(rs.next()) {
        out.print(rs.getObject(1).toString());
        out.print("\t");
        out.print(rs.getObject(2).toString());
        out.print("\t\t");
        out.print(rs.getObject(3).toString());
        out.print("\n");
      }
 
      
      out.println("Selected object ID = " + req.getParameter("ID"));
  
    } catch (SQLException e) {
      throw new 
      ServletException("Servlet Could not display records.", e);
    } catch (ClassNotFoundException e) {
      throw new 
      ServletException("JDBC Driver not found.", e);
    } finally {
      try {
        if(rs != null) {
          rs.close();
          rs = null;
        }
        if(stmt != null) {
          stmt.close();
          stmt = null;
        }
        if(con != null) {
          con.close();
          con = null;
        }
      } catch (SQLException e) {}
    }
 
    // debugging info
 
    long time2 = System.currentTimeMillis();
 
    out.print("</pre></code>");
 
    out.print("<p>Search took : ");
    out.print( (time2 - time1) );
    out.print(" ms.</p>");
 
    out.print("<p\"><a href=\"");
    out.print( req.getRequestURI() );
    out.print("\">Back</a></p>");
 
    out.print("</body></html>");
    out.close();
  }

STRONA PRODUCT INFO

<%@ page language="java" import="java.util.*" %>
<%@ page import="pss.*" %>
<html> 
<head> 
<style type="text/css">
body{
        background-repeat:no-repeat;
        font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
        font-size:0.9em;
        line-height:130%;
        text-align:center;
        height:100%;
        background-color: #E2EBED;
}
#contentContainer h2{  /* No margins above <h2> tags */
        margin-top:0px;
}
 
 
#mainContainer{
        width:755px;
        margin:0 auto;
        text-align:left;
        padding:5px;
        margin-top:20px;
        border:1px solid #000;
        background-color: #FFF;
}
#contentContainer{
        float:left;
        border:1px solid #000;
        background-color: #E2EBED;
        overflow:auto;
        margin-right:10px;
        padding:10px;
        
        /* CSS HACK */
        width: 497px;  /* IE 5.x */
        width/* */:/**/480px;  /* Other browsers */
        width: /**/480px;
        
        /* CSS HACK */
        height: 412px; /* IE 5.x */
        height/* */:/**/390px; /* Other browsers */
        height: /**/390px;
                       
}
 
 
#contentContainer .openingText{
        color:red;
}
 
#articleListContainer{ /* <ul> container for article list */
        float:left;
        height:410px;
        overflow:auto; 
        width:240px;
        border:1px solid #000;
        background-color:#FFF; 
}
.articleList{
        margin:0px;
        padding:2px;
}
.articleList li{       /* General layout article in list */
        list-style-type:none;
        border:1px solid #999;
        background-color:#EEE;
        height:50px;
        margin:1px;
        padding:2px;
        color:#333;
        cursor:pointer;
}
.articleList li.articleMouseOver{     /* Mouse over article in list - layout */
        border:1px solid #000;
        color:#000;
}
.articleList li.articleClick{  /* Active article in list - layout */
        border:1px solid #000;
        color:#000;
        background-color:#317082;
        color:#FFF;
}
 
.keyText{      /* Just a column I use for key text inside articles - the one with the light blue bg and dotted border */
        background-color:#FFF;
        border:1px dotted #000;
        float:right;
        margin-top:5px;
        margin-left:5px;
        margin-bottom:5px;
        width:150px;
        padding:3px
}
.clear{
        clear:both;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
 
 
/************************************************************************************************************
Ajax dynamic articles 
************************************************************************************************************/       
var ajax = new does();
var articleListObj;
var activeArticle = false;
var clickedArticle = false;
var contentObj // Reference to article content <div>
 
function mouseoverArticle()    // Highlight article
{
        if(this==clickedArticle)return;
        if(activeArticle && activeArticle!=this){
               if(activeArticle==clickedArticle)
                       activeArticle.className='articleClick';
               else
                       activeArticle.className='';
               
        }
        this.className='articleMouseOver';
        activeArticle = this;  // Storing reference to this article
}
 
function showContent() // Displaying content in the content <div>
{
        contentObj.innerHTML = ajax.response; // ajax.response is a variable that contains the content of the external file      
}
 
function showWaitMessage()
{
        contentObj.innerHTML = 'Finding article.....<br>Please wait';
}
function getAjaxFile(fileName)
{
        ajax.requestFile = fileName;   // Specifying which file to get
        ajax.onCompletion = showContent;      // Specify function that will be executed after file has been found
        ajax.onLoading = showWaitMessage;     // Action when AJAX is loading the file
        ajax.runAJAX();        // Execute AJAX function       
}
 
function selectArticle()       // User have clicked on an article
{
        /*getAjaxFile('http://localhost:8080//PSS_Project//Display_Data');   */
        if(clickedArticle && clickedArticle!=this)clickedArticle.className='articleMouseOver';
        this.className='articleClick';
        clickedArticle = this;
        var E = this.getElementsByTagName('BUTTON');
        getAjaxFile('http://localhost:8080//PSS_Project//Display_Data?ID='+ E[0].id);               
}
 
 
function initAjaxProcedure()
{
        articles = document.getElementsByName('articleList');
        for(var no=0;no<articles.length;no++){
               articles[no].onmouseover = mouseoverArticle;
               articles[no].onclick = selectArticle;
        }       
        
        contentObj = document.getElementById('contentContainer');
}
window.onload = initAjaxProcedure;
</script>
    
    
   <title>Book list page</title>
    </head>
     <body> 
     <table border="1"> 
     <tbody> <tr> 
     <td>ID</td> 
     <td>Author</td> 
     <td>Book name</td>
      <td>Available</td>
       <td>&nbsp;</td>
        <td>&nbsp;</td> 
        </tr> 
     <%                 
 
                HttpSession S = request.getSession();
 
               ArrayList arrayList = (ArrayList)S.getAttribute("bookDB");                
 
                int i = 0;
                
                if(arrayList != null)
                for (Iterator iter = arrayList.iterator(); iter.hasNext();)
                {
                    Book element = (Book) iter.next();
                    
                    out.println("<tr id=articleList>");      
                    out.println("<td>" + element.getId()+ "</td>");  
                    out.println("<td>" + element.getAuthor() + "</td>");    
                    out.println("<td>" + element.getTitle() + "</td>");     
                    if(element.isAvailable()) 
                        out.println("<td><input type=checkbox name=available value=true disabled checked></td>");
                            else      
                        out.println("<td><input type=checkbox name=available value=true disabled></td>");
                        out.println("<td><a href=BookEdit?do=edit&id=" + element.getId() + ">Edit</a></td>");             
                        out.println("<td> <a href=BookEdit?do=delete&id=" + element.getId() + ">Delete</a></td>");
                        out.println("<td> <button  id=" + i + ">This is PRODUCT</button></td>");                                                             
                        out.println("</tr>"); 
                        
                        i++;
                    }   
 
        %>
 </tbody>
  </table> 
<div id="mainContainer">
        <div id="header">
               <img src="/images/heading3.gif">
        </div>
        <div id="contentContainer">
               <h2 class="openingText">Wcisnij przycisk myszy na jednym z opisow produktu.</h2>
               <p>Opis produktu zostanie wyswietlony w ponizszej sekcji DIV</p>
        </div>
        <div class="clear"></div>
</div>  <br>
 <a href="BookEdit?do=add" method=post>Add a new book</a>
 </body></html>

/* Simple AJAX Code-Kit*/
 
function does(file) {
        this.xmlhttp = null;
 
        this.resetData = function() {
               this.method = "POST";
               this.queryStringSeparator = "?";
               this.argumentSeparator = "&";
               this.URLString = "";
               this.encodeURIString = true;
               this.execute = false;
               this.element = null;
               this.elementObj = null;
               this.requestFile = file;
               this.vars = new Object();
               this.responseStatus = new Array(2);
        };
 
        this.resetFunctions = function() {
               this.onLoading = function() { };
               this.onLoaded = function() { };
               this.onInteractive = function() { };
               this.onCompletion = function() { };
               this.onError = function() { };
               this.onFail = function() { };
        };
 
        this.reset = function() {
               this.resetFunctions();
               this.resetData();
        };
 
        this.createAJAX = function() {
               try {
                       this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e1) {
                       try {
                               this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                       } catch (e2) {
                               this.xmlhttp = null;
                       }
               }
 
               if (! this.xmlhttp) {
                       if (typeof XMLHttpRequest != "undefined") {
                               this.xmlhttp = new XMLHttpRequest();
                       } else {
                               this.failed = true;
                       }
               }
        };
 
        this.setVar = function(name, value){
               this.vars[name] = Array(value, false);
        };
 
        this.encVar = function(name, value, returnvars) {
               if (true == returnvars) {
                       return Array(encodeURIComponent(name), encodeURIComponent(value));
               } else {
                       this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
               }
        }
 
        this.runResponse = function() {
               eval(this.response);
        }
 
        this.runAJAX = function(urlstring) {
               if (this.failed) {
                       this.onFail();
               } else {
                        this.urlString=urlstring;
                       if (this.element) {
                               this.elementObj = document.getElementById(this.element);
                       }
                       if (this.xmlhttp) {
                               var self = this;
                               if (this.method == "GET") {
                                      totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
                                      this.xmlhttp.open(this.method, totalurlstring, true);
                               } else {
                                      this.xmlhttp.open(this.method, this.requestFile, true);
                                      try {
                                              this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
                                       } catch (e) { }
                               }
 
                               this.xmlhttp.onreadystatechange = function() {
                                      switch (self.xmlhttp.readyState) {
                                              case 1:
                                                     self.onLoading();
                                                     break;
                                              case 2:
                                                     self.onLoaded();
                                                     break;
                                              case 3:
                                                     self.onInteractive();
                                                     break;
                                              case 4:
                                                     self.response = self.xmlhttp.responseText;
                                                     self.responseXML = self.xmlhttp.responseXML;
                                                     self.responseStatus[0] = self.xmlhttp.status;
                                                     self.responseStatus[1] = self.xmlhttp.statusText;
 
                                                     if (self.execute) {
                                                             self.runResponse();
                                                     }
 
                                                     if (self.elementObj) {
                                                             elemNodeName = self.elementObj.nodeName;
                                                             elemNodeName.toLowerCase();
                                                             if (elemNodeName == "input"
                                                             || elemNodeName == "select"
                                                             || elemNodeName == "option"
                                                             || elemNodeName == "textarea") {
                                                                     self.elementObj.value = self.response;
                                                             } else {
                                                                     self.elementObj.innerHTML = self.response;
                                                             }
                                                     }
                                                     if (self.responseStatus[0] == "200") {
                                                             self.onCompletion();
                                                     } else {
                                                             self.onError();
                                                     }
 
                                                     self.URLString = "";
                                                     break;
                                      }
                               };
 
                               this.xmlhttp.send(this.URLString);
                       }
               }
        };
 
        this.reset();
        this.createAJAX();
}

 

 


 

Zadanie:

Na podstawie opracowanego kodu, wyświetlić informacje (opis produktu) z tabeli PRODUCT.

Utworzyć nowe pole DESCRIPTION w tabeli PRODUCT

Plik AJAX