ajax autocomplete example and ajax database application
JohenCorner,France,Professional
Published Date:02-08-2017
Your Website URL(Optional)
Comment
EJB 3.0 Database
Persistence with Ajax in the UI
While EJB 3.0 has facilitated database persistence, Ajax has simplified the user
interface facet of web applications. Asynchronous JavaScript And XML (AJAX) is
a web technique for developing asynchronous web applications using JavaScript,
Document Object Model (DOM) andXMLHttpRequest technologies. AJAX provides
dynamic interaction between a client and a server. In this chapter, we discuss
the following:
• TheXMLHttpRequest object
• Creating an EJB 3.0 application
• Creating a data source in WebLogic Server
• Creating an entity bean
• Creating a wrapper session bean
• Creating a servlet client
• Creating an Ajax user interface
• Deploying the EJB 3 application to WebLogic Server
• Testing the Ajax user interface
aEJB 3.0 Database Persistence with Ajax in the UI
The XMLHttpRequest Object
TheXMLHttpRequest object, which is supported by most browsers, provides
asynchronous communication between a web browser and an underlying server.
Using the object, clients may submit XML data to a server, and retrieve it from the
server, without reloading the page. XML data may be converted to HTML on the
client side, using the DOM API and Extensible Stylesheet Transformations (XSLT).
The implementations ofXMLHttpRequest may vary across browsers. For example,
XMLHttpRequest
an instance of an object is created in IE 6 as follows:
var req = new ActiveXObject("Microsoft.XMLHTTP");
In Internet Explorer 7,XMLHttpRequest is available as a window object property. An
instance of anXMLHttpRequest object in IE 7 is created as follows:
var req = new XMLHttpRequest();
W3C has introduced anXMLHttpRequest object specification ( http://www.w3.org/
TR/XMLHttpRequest/) to standardize implementations of theXMLHttpRequest
object. TheXMLHttpRequest object has various attributes/properties, which are
discussed in the following table, to provide HTTP client functionality.
Property Description
onreadystatechange
Sets the callback method for asynchronous requests.
readyState
Retrieves the current state of a request.
0—XMLHttpRequest object has been created.
1—The object has been created andopen() method has
been invoked.
2—Thesend() method has been called, but the response
has not been received.
3—Some data has been received that is available in the
responseText property.responseXML produces null and
response headers and status are not completely available.
4—Response has been received.
responseText
Retrieves the text of response from server.
responseXML
Retrieves the XML DOM of response from server.
status
Retrieves the HTTP status code of request.
statusText
Retrieves the status text of the HTTP request.
XMLHttpRequest object methods, which are discussed in the following table, are
used to open an HTTP request, send the request, and receive the response.
260
aChapter 8
Method Description
abort()
Aborts the current HTTP request.
getAllResponseHeaders()
Gets all the response headers.
getResponseHeader(string header)
Gets a specified response header.
open(string method, string url,
Opens a HTTP request. Does not send
boolean asynch, string username,
a request. Boolean parameter asynch
string password) specifies if HTTP request is asynchronous;
default value is true. Username and
password are optional.
send(data)
Sends a HTTP request to the server,
including data. Thesend() method
is synchronous or asynchronous
corresponding to the value of the
asynch argument in the open() method.
If synchronous, the method does not
return until the request is completely
loaded and the entire response has been
received. If asynchronous, method returns
immediately.
setRequestHeader(string
Sets HTTP request headers.
headerName, string headerValue)
In this chapter, we create an EJB 3.0 Ajax application in which an input form is
validated using Ajax and persisted using EJB 3.0. The following procedure is
used for a catalog entry form validation and submission:
1. A user inputs a catalog ID in a catalog entry form.
2. The catalog id value is sent to a servletdoGet method. The servlet looks up
the remote component interface of a session bean and invokes avalidate()
method that returns aCatalog entity instance to validate the catalog id.
3. The session beanvalidate() method runs a Java persistence language query
using the catalog id value. If the query returns an empty list, thevalidate()
method returnsnull, else it returns a list with aCatalog entity instance; the
validate() method returns theCatalog entity instance.
4. In the servlet, if thevalidate() method returns null, the servlet constructs
aString consisting of an XML elementvalidtrue/valid, which is
returned to the browser that sent the catalog id value via Ajax.
5. In the catalog entry form, the XML is parsed and if the valid element value
istrue, a validation message that the catalog ID specied i fi s valid gets
displayed. A user may continue to fill the form and submit it to create a new
catalog entry.
261
aEJB 3.0 Database Persistence with Ajax in the UI
6. If thevalidate() method returns aCatalog entity instance, the servlet
constructs aString that consists of an element valid with text set tofalse
and also consists of elements corresponding to theCatalog bean properties
journal,publisher,edition, title, andauthor. TheString is returned to
the browser, which parses theString and n fi ding a false value for the valid
element displays a validation message that the catalog id value specie fi d is
false. The JavaScript in the Catalog entry form JSP also l fi ls the form e fi lds with
the values returned in theString and disables the Submit button.
7. If the catalog id is valid, a user may fill out the form and submit it, which
invokes thedoPost method. In thedoPost method of the servlet, the input
field values are retrieved and the remote business interface of the session
bean is looked up. Thepersist() method of the session bean is invoked
with the input form field values.
8. In thepersist() method of the session bean, a newCatalog entity instance
is created from the input field values and the persist() method of the
EntityManager is invoked to persist the entity instance to the database.
Thus, a user did not have to fill out the form only to find later that a catalog
id is not valid. Ajax validates the catalog id value and displays a
validation message.
Setting the environment
We need to install Oracle Fusion Middleware 11g (http://www.oracle.com/
technology/software/products/middleware/index.html). We need to download
the following two components from the For Development section.
• Oracle WebLogic Server 11g Rel 1 (10.3.2) Net Installer
• Oracle JDeveloper 11g Rel 1 (11.1.1.2.0) (JDeveloper + ADF)
First, install JDeveloper 11g Studio Edition. Also install Oracle database 10g/11g/
XE (including the sample schemas). We shall be using the XE version in this chapter.
Create an Oracle database tableCATALOG with the following SQL script:
CREATE TABLE Catalog(CatalogId VARCHAR(255), Journal VARCHAR(255),
Publisher Varchar(255), Edition VARCHAR(255), Title Varchar(255),
Author Varchar(255));
INSERT INTO Catalog VALUES('catalog1', 'Oracle Magazine', 'Oracle
Publishing', 'September-October 2009','Oracle Fusion Middleware 11g:
The Foundation for Innovation', 'David Baum');
INSERT INTO Catalog VALUES('catalog2', 'Oracle Magazine', 'Oracle
Publishing', 'September-October 2009', 'Put Your Arrays in a Bind',
'Mark Williams');
262
aChapter 8
Installing WebLogic Server
Next, install WebLogic Server 11g. Subsequently, create a WebLogic server domain.
A domain is an administration unit for WebLogic Server instances. Start the Fusion
Middleware Configuration Wizard. Select Create a new WebLogic domain and
click on Next:
In the Domain Source window select Basic WebLogic Server Domain as the
domain to generate. Click on Next:
263
aEJB 3.0 Database Persistence with Ajax in the UI
Specify Domain name as base_domain and select the default Domain location.
Click on Next:
Specify the Administrator User name and User password and click on Next:
264
aChapter 8
Select WebLogic Domain Startup Mode as Development Mode, which is for
developing applications. The development mode supports auto deployment of
applications. Select JDK as Sun JDK 1.6 and click on Next:
In the Select Optional Configuration window, select at least the Administration
Server option and click on Next:
265
aEJB 3.0 Database Persistence with Ajax in the UI
In the Configure the Administration Server window, select the default settings for
server Name, Listen address, and Listen port (7001), and click on Next:
As our domain will only have a single server, skip the following steps :
= Configure Managed Servers
= Configure Clusters
= Configure Machines
In the Configuration Summary window, click on Create:
266
aChapter 8
A WebLogic Server domain gets created. Click on Done:
Creating an EJB 3.0 application in
JDeveloper
In this section, we create an EJB 3 application and project in JDeveloper 11g. Select
New Application in JDeveloper 11g. Specify an Application Name and select Java
EE Web Application as the Application Template. Click on Next. Specify a Project
Name for the view controller project, the default being ViewController. Select EJB
in the Available list and add to the Selected list of Project Technologies. Click on
Next. Select the default Java settings for the view controller project, which include
the package name, source path, and output directory, and click on Next.
267
aEJB 3.0 Database Persistence with Ajax in the UI
Select the default EJB settings; select EJB Version as EJB 3.0, and select the Using
annotations feature. Click on Next. Specify a Project Name for the model project,
the default being Model. Select EJB in the Project Technologies. Click on Next.
Select the default Java settings for the model project, which include the package
name, Java Source Path, and the Output Directory. Click on Next. Select the default
EJB settings; set EJB Version as 3.0 and select the Using annotations feature. Click
on Finish. An EJB 3 application, which includes a view controller project and a
model project, gets created. We shall be creating an EJB 3.0 entity bean in the Model
project. We shall also create an EJB 3.0 session bean and servlet in the Model project.
In the ViewController project, we shall create a JSP for the Ajax user interface.
268
aChapter 8
Creating a database connection
We need to create a database connection to the Oracle database for generating an
EJB 3.0 entity bean from theCATALOG table, which we created in the Setting the
environment section. In the Database Navigator, right-click on EJB3Ajax and select
New Connection. In the Create Database Connection, specify a Connection Name,
and select Connection Type as Oracle (JDBC). Specify Username as OE and the
Password for the OE schema. Select Driver Type as thin, Host Name as localhost,
and SID as XE. Click on Test Connection to test the connection. If a connection gets
established, click on OK.
269
aEJB 3.0 Database Persistence with Ajax in the UI
A JDBC connection gets added to the Database Navigator.
AnOracleDBConnection-jdbc.xml congu fi ration file gets created in the src/
META-INF directory. The configuration file specifies the connection settings such as
the driver class and the connection URL. The cong fi uration file also specie fi s a JNDI
data source,jdbc/OracleDBConnectionDS, which gets created when the JDBC
connectionOracleDBConnection is created. The cong fi uration file is listed next:
?xml version = '1.0' encoding = 'windows-1252'?
jdbc-data-source xmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance"
xsi:schemaLocation="http://www.bea.com/ns/weblogic/jdbc-data-
source http://www.bea.com/ns/weblogic/jdbc-data-source/1.0/jdbc-data-
source.xsd"
xmlns="http://www.bea.com/ns/weblogic/jdbc-data-source"
nameOracleDBConnection/name
jdbc-driver-params
urljdbc:oracle:thin:localhost:1521:XE/url
driver-nameoracle.jdbc.OracleDriver/driver-name
properties
property
nameuser/name
valueOE/value
/property
property
nameservername/name
valuelocalhost/value
/property
property
270
aChapter 8
nameportnumber/name
value1521/value
/property
property
namesid/name
valueXE/value
/property
/properties
password-encrypted46969068B219FCC29EC5B6B5A9B8F846D62D1A19
DF561D1E/password-encrypted
/jdbc-driver-params
jdbc-connection-pool-params
test-table-namedual/test-table-name
/jdbc-connection-pool-params
jdbc-data-source-params
jndi-namejdbc/OracleDBConnectionDS/jndi-name
scopeApplication/scope
/jdbc-data-source-params
/jdbc-data-source
Creating a data source in WebLogic Server
As we shall be deploying the EJB 3.0 Ajax application to WebLogic Server, we need to
create a data source in WebLogic Server for the Oracle database. The data source JNDI
name should correspond to the data source JNDI name used in thepersistence.
xml cong fi uration l fi e for the entity bean, which we shall create in the next section. We
shall be using a data source with JNDI namejdbc/OracleDBConnectionDS; therefore,
create a data source with JNDI namejdbc/OracleDBConnectionDS in WebLogic
Server. Start the WebLogic Server and log in to the Administration Console.
271
aEJB 3.0 Database Persistence with Ajax in the UI
Select the base_domainServicesJDBCData Sources node. To create a new data
source, click on New in the Data Sources table as shown in the following screenshot:
In the Create a New JDBC Data Source window, specify a data source Name, and
specify JNDI Name for the data source as jdbc/OracleDBConnectionDS. Select
Database Type as Oracle and select Database Driver as Oracle's Driver (Thin XA).
Click on Next:
272
aChapter 8
As we selected the XA JDBC driver, the driver will support global transactions and
the Two-Phase Commit transaction protocol. Click on Next in Transaction Options:
273
aEJB 3.0 Database Persistence with Ajax in the UI
In the Connection Properties window, specify Database Name as XE, Host Name
as localhost, Port as 1521, and Database User Name as OE. Specify the Password for
the OE user and click on Next:
In the Test Database Connection window, the Driver Class Name and the
connection URL are specified. Click on Test Configuration to test the data source
connection. If a connection gets established, click on Finish:
274
aChapter 8
A data source with JNDI namejdbc/OracleDBConnectionDS gets added to the
Data Sources table.
Click on the data source in the Data Sources table. The settings for the data source
get displayed. Select the Targets tab and select the AdminServer as the target server.
Click on Save. The target server settings get applied.
275
aEJB 3.0 Database Persistence with Ajax in the UI
Click on the Monitoring tab and click on the Testing tab. Click on Test Data Source.
If the test is successful, a message gets displayed as in the following screenshot:
Creating an entity bean
In this section, we create an entity bean from the database tableCATALOG. Select
the Model project node in the Application navigator. Select FileNew. In the New
Gallery window select Business TierEJB in the Categories and select Entities from
Tables in Items. Click on OK.
276
aChapter 8
As discussed in some of the earlier chapters, in the Persistence Unit window,
click on New to create a new persistence unit. Specify the persistence unit Name
as em and specify JTA Data Source Name as jdbc/OracleDBConnectionDS.
Select WebLogic Server 10 as the Server Platform. Click on OK. Click on Next in
the Persistence Unit window. In the Type of Connection window, select Online
Database Connection and click on Next. In Database Connection Details, select the
OracleDBConnection and click on Next. In Select Tables, select the OE Schema and
select the Auto Query checkbox. Shift the CATALOG table from the Available to
the Selected list and click on Next. In General Options, specify the Package Name
(default being model), and select the default Entity Class options. Click on Next.
In Specify Entity Details, select Table Name as OE.CATALOG. Specify Entity
Name as Catalog and Entity Class as model.Entity. Click on Next. In the Summary
page, click on Finish. An entity class model.Catalog gets created. An entity bean
configuration file persistence.xml also gets created in the META-INF directory.
277
aEJB 3.0 Database Persistence with Ajax in the UI
Right-click on the Model project and select the Project Properties for the Model
project. In the Project Properties window, select Libraries and Classpath. The
libraries in the EJB 3.0 project get displayed. The libraries include the TopLink
library, as the entity bean uses the TopLink persistence provider.
Select the EJB Module node. The EJB Module displays the default data source JNDI
name, the EJB Version, the connection, and the annotated entity bean class.
Click on OK:
278
a
