leejeok

The Remarkable Everyday

Ajax and JSTL

Posted by leejeok on August 7, 2007

Simple Web Application using AJAX and JSTL

Description: By having the clickable link, result will be publish on the same site without reloading the site. Result was retrieving from the database.

Technology Coverage: AJAX , JSTL, and MYSQL

Tools: NetBeans 5.5, MySQL 4.1 and MySQL Administrator

View code here

1. Program the index.jsp

– Ajax script will be code here.

– Here are the code:

<html>
<body>

<script language=”Javascript” type=”text/javascript”>
<!–

function createRequestObject() {
    var tmpXmlHttpObject;
   
//depending on what the browser supports,
//use the right way to create the XMLHttpRequest object
    if (window.XMLHttpRequest) {
        // Mozilla, Safari would use this method …
        tmpXmlHttpObject = new XMLHttpRequest();
 
    } else if (window.ActiveXObject) {
        // IE would use this method …
        tmpXmlHttpObject = new ActiveXObject(“Microsoft.XMLHTTP”);
    }
   
    return tmpXmlHttpObject;
}

//call the above function to create the XMLHttpRequest object
var http = createRequestObject();

function makeGetRequest(wordId) {
//make a connection to the server …
//specifying that you intend to make a GET request
    //to the server. Specifiy the page name and the URL parameters to send
    http.open(‘get’, ‘view.jsp?id=’ + wordId);
 
    //assign a handler for the response
    http.onreadystatechange = processResponse;
 
    //actually send the request to the server
    http.send(null);
}

function processResponse() {
    //check if the response has been received from the server
    if(http.readyState == 4){
 
        //read and assign the response from the server
        var response = http.responseText;
  
        //do additional parsing of the response, if needed
  
        //in this case simply assign the response
//to the contents of the <div> on the page.
        document.getElementById(‘description’).innerHTML = response;
  
        //If the server returned an error message like a 404 error,
//that message would be shown within the div tag!!.
        //So it may be worth doing some basic error before
//setting the contents of the <div>
    }
}

–>
</script>

<h1>Have you heard these books before?</h1>
<p>
Professional Apache Tomcat 6  <a href=”javascript:makeGetRequest(1)” mce_href=”javascript:makeGetRequest(1)”>More</a><br>
Beginning SharePoint 2007 Administration: Windows SharePoint Services 3.0 and Microsoft Office  <a href=”javascript:makeGetRequest(2)” mce_href=”javascript:makeGetRequest(2)”>More</a><br>
Expert Access 2007 Programming <a href=”javascript:makeGetRequest(3)” mce_href=”javascript:makeGetRequest(3)”>More</a><br>
</p>

<div id=”description”></div>
   
</body>
</html>


2. Program the view.jsp

– JSTL script will be code here. 

– Display the actual result which retrieving data from mysql database.

– Here are the code:

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

<sql:setDataSource dataSource=”jdbc/bookstoreDB” />

<sql:query var=”qryItems” >
    SELECT title, author, publisher, description
    FROM bookdetail
    WHERE id = ‘${param.id}’
</sql:query>

<c:forEach var=”row” items=”${qryItems.rows}”>
    Title: <c:out value=”${row.title}” /><br>
    Author: <c:out value=”${row.author}” /><br>
    Publisher: <c:out value=”${row.publisher}” /><br><br>
    Description: <c:out value=”${row.description}” /><br>
</c:forEach>
 

3. Result

bookstore

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: