introduction to ajax and dwr
DESCRIPTION
little introduction to AJAX and DWRTRANSCRIPT
![Page 2: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/2.jpg)
Introduce to AJAX
Introduce to DWR
focus on Reverse AJAX
1
2
3
Contents
![Page 3: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/3.jpg)
What is AJAX ?AJAX is ..
AJAX
AJAX : Asynchronous JavaScript and XML
AJAX was introduced in 18 Feb 2005 by Jesse James Garrett.
Ajax is a technique creating better, faster, and more interactive web applications.
![Page 4: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/4.jpg)
Defining AJAX
data interchange and manipulation using XML and XSLT
Standards - based
presentation using XHTML
and CSS
dynamic display and interaction using the Document Object Model (DOM)
asynchronous data
retrieval using
XMLHttpRequest
JavaScript binding everything together
![Page 5: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/5.jpg)
user operation while data is being fetched
uninterrupted
dynamically
independent
display and interact with the information presented
platform or language, and no plug-in required
AJAX Advantage
![Page 6: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/6.jpg)
browser incompatibilityStill
JavaScript
make
is hard to maintain and debug
AJAX Disadvantage
![Page 7: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/7.jpg)
Compare classic and AJAX web application model
![Page 8: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/8.jpg)
![Page 9: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/9.jpg)
XMLHttpRequest
![Page 10: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/10.jpg)
Creating XMLHttpRequest
var xhr;
function createXMLHttpRequest() {if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();}else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP");}else { alert("XMLHttpRequest not supported");
return null;}
}
native JavaScript Object (Other Browsers)
ActiveX Object (IE)
![Page 11: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/11.jpg)
Use XMLHttpRequestfunction run() {
var req = createXMLHttpRequest(); // สร้�าง Object req.open('GET', ‘abc.isp', true); // กำ�าหนด สถานะกำาร้ทำ�างานของ AJAX req.onreadystatechange = function() { //เหตุ�กำาร้ณ์�เมื่��อมื่�กำาร้ตุอบกำลั�บ if (req.readyState == 4) { if (req.status == 200) { //ได�ร้�บกำาร้ตุอบกำลั�บเร้�ยบร้�อย var data = req.responseText; // ข�อความื่ทำ��ได�มื่าจากำกำาร้ทำ�างานของ abc.jsp document.getElementById("content").innerHTML =
" ข�อความื่ทำ��ตุอบกำลั�บจากำ server ค�อ "+data; //แสดงผลั } } }; req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded"); //Header ทำ��ส#งไป req.send(null); //ทำ�ากำาร้ส#ง};
![Page 12: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/12.jpg)
About readyState propertyValue Status Description
0 Uninitialized The object has been created, but not initialized (the open method has not been called).
1 Loading The object has been created, but the send method has not been called.
2 Loaded The send method has been called. responseText is not available. responseBody is not available.
3 Interactive Some data has been received. responseText is not available. responseBody is not available.
4 Complete All the data has been received. responseText is available. responseBody is available.
![Page 13: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/13.jpg)
Standard XMLHttpRequest Operation
![Page 14: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/14.jpg)
Standard XMLHttpRequest Properties
![Page 15: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/15.jpg)
Processing the Server Response
• XMLHttpRequest object provides two properties that provide access to the server response.– responseText - provides the response
as a string.– responseXML - provides the response
as an XML object
![Page 16: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/16.jpg)
implement basic AJAX
Entering an invalid date
Entering an valid date
![Page 17: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/17.jpg)
17
Date Validation
• Create validation.jsp page
<body> <h1>Ajax Validation Example</h1> Birth date:
<input type="text" size="10" id="birthDate" onchange="validate();"/>
<div id="dateMessage"></div></body>
![Page 18: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/18.jpg)
18
Date Validation
• Create XMLHttpRequest object
var xmlHttp;function createXMLHttpRequest() {
if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }}
![Page 19: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/19.jpg)
19
Date Validation
• Create validate() method
function validate() { createXMLHttpRequest(); var date = document.getElementById("birthDate"); var url = "${pageContext.request.contextPath}/ ValidationServlet?birthDate=" + escape(date.value); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null);}
![Page 20: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/20.jpg)
20
Date Validation
• Create callback() method
function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var mes = xmlHttp.responseXML. getElementsByTagName("message")[0].firstChild.data; var val = xmlHttp.responseXML. getElementsByTagName("passed")[0].firstChild.data; setMessage(mes, val); } }}
![Page 21: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/21.jpg)
Date Validation
• Set output ‘s format for display in jsp page
function setMessage(message, isValid) { var messageArea = document.getElementById("dateMessage"); var fontColor = "red"; if (isValid == "true") { fontColor = "green"; } messageArea.innerHTML = "<font color=" + fontColor + ">" + message + " </font>";}
![Page 22: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/22.jpg)
Date Validation• Create servlet to validate date from jsp page
PrintWriter out = response.getWriter(); try { boolean passed = validateDate(request.getParameter("birthDate")); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); String message = "You have entered an invalid date."; if (passed) { message = "You have entered a valid date."; } out.println("<response>"); out.println("<passed>" + Boolean.toString(passed) + "</passed>"); out.println("<message>" + message + "</message>"); out.println("</response>"); out.close(); } finally { out.close(); }
![Page 23: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/23.jpg)
Date Validationprivate boolean validateDate(String date) { boolean isValid = true; if(date != null) { SimpleDateFormat formatter= new SimpleDateFormat("MM/dd/yyyy"); try { formatter.parse(date); } catch (ParseException pe) { System.out.println(pe.toString()); isValid = false; } } else { isValid = false; } return isValid;}
![Page 24: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/24.jpg)
DWR ( Direct web Remoting)
DWR is a RPC library which makes it easy to call Java functions from JavaScript and to call JavaScript functions from Java (a.k.a Reverse Ajax).
![Page 25: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/25.jpg)
DWR consist ..
DWR consists of two main parts– A Java Servlet running on the server that
processes requests and sends responses back to the browser.
– JavaScript running in the browser that sends requests and can dynamically update the webpage
![Page 26: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/26.jpg)
How it work ? (1)
AJAX Style
![Page 27: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/27.jpg)
How it work ? (2)
Reverse AJAX
![Page 28: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/28.jpg)
Prepare to use DWR
1> We have to download and install DWR.jar to
WEB-INF/lib also requires commons-logging.
2> edit the config files in WEB-INF
2.1> edit web.xml
2.2> create dwr.xml
![Page 29: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/29.jpg)
web.xml
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
The <servlet> section needs to go with the other <servlet> sections, and likewise with the <servlet-mapping> section.
![Page 30: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/30.jpg)
dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN“ "http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
<create creator="new" javascript="EmployeeService">
<param name="class" value="com.dwr.service.EmployeeService"/>
</create>
<convert converter="bean" match="com.dwr.bean.EmployeeBean" />
</allow>
</dwr>
The <servlet> section needs to go with the other <servlet> sections, and likewise with the <servlet-mapping> section.
![Page 31: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/31.jpg)
if everything ok .. start your web server such as Tomcat
then open URL : [YOUR-WEBAPP]/dwr/
e.g. : http://localhost:8084/DwrProject/dwr/
You will got web page like this :
![Page 32: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/32.jpg)
get JavaScript code
DWR will generate JavaScript file for knew JAVA class , you can see by click on class name
it’ll redirect you to page like this :
You must put code in red circle to webpage that want to call java method.
![Page 33: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/33.jpg)
ServiceEmployee.java (1)
package com.dwr.service;
import com.dwr.bean.EmployeeBean;
import java.sql.*;
public class EmployeeService{
public EmployeeService() {}
public EmployeeBean getChange(String id){
EmployeeBean bean = new EmployeeBean();
bean.setId(id);
bean.setName("Not found");
bean.setAddress("Not found");
if(id!=null){
try{
String sql = "select * from employee where employeeid like '"+id+"'";
![Page 34: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/34.jpg)
ServiceEmployee.java (2)
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver").newInstance();
Connection con = DriverManager.getConnection("jdbc:odbc:dwrdb");
Statement stm = con.createStatement();
ResultSet rs = stm.executeQuery(sql);
if(rs.next()) {
bean.setName(rs.getString("employeename"));
bean.setAddress(rs.getString("address"));
}
}catch(Exception ex){ ex.printStackTrace(); }
}
return bean;
}
}
![Page 35: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/35.jpg)
EmployeeBean.javapackage com.dwr.bean;
public class EmployeeBean{
private String id;
private String name;
private String address;
public EmployeeBean() {
}
public String getId() {
return id;
}
public String getName() {
return name;
}
public String getAddress() {
return address;
}
public void setId(String id) { this.id = id; } public void
setName(String name) { this.name = name; } public void
setAddress(String address) {
this.address = address; } }
![Page 36: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/36.jpg)
Test DWR (1)Create employee.jsp like this :
<script type='text/javascript' src='dwr/interface/EmployeeService.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script language="JavaScript">
function getChange() {
EmployeeService.getChange(employeeid.value,loadChange);
}
function loadChange(data) {
EmpField.innerHTML = "ID : "+data.id+"<br>Name : "+data.name+"<br>Address : "+data.address;
}
</script>
![Page 37: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/37.jpg)
Test DWR (2)
<BODY>
<h1>Employee Service</h1>
<table>
<tr>
<td>Employee ID</td>
<td><input type="text" id="employeeid"
onblur="getChange()" ></input></td>
</tr>
</table>
<div id="EmpField"></div>
<div id="LogLayer"></div>
</BODY>
![Page 38: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/38.jpg)
Result :
![Page 39: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/39.jpg)
RESTRICTION
DWR has a few restrictions – Avoid reserved JavaScript words
• Methods named after reserved words are automatically excluded. Most JavaScript reserved words are also Java reserved words, so you won't be having a method called "try()" anyway. However the most common gotcha is "delete()", which has special meaning from JavaScript but not Java
– Avoid overloaded methods • Overloaded methods can be involved in a bit of a lottery as
to which gets called
![Page 40: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/40.jpg)
What is Reverse AJAX
“Reverse Ajax is the biggest new feature in DWR 2.0.
It gives you the ability to asynchronously send data from a web-server to a browser”
DWR supports 3 methods of pushing the data from to the browser: Piggyback, Polling and Comet.
![Page 41: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/41.jpg)
Polling
This is where the browser makes a request of the server at regular and frequent intervals, say every 3 seconds, to see if there has been an update to the page. It's like 5 year old in the back of the car shouting 'are we there yet?' every few seconds.
![Page 42: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/42.jpg)
Comet AKA long lived http, server push
allows the server to start answering the browser's request for information very slowly, and to continue answering on a schedule dictated by the server.
![Page 43: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/43.jpg)
Piggyback ( Passive Mode)
the server, having an update to send, waits for the next time the browser makes a connection and then sends it's update along with the response that the browser was expecting.
![Page 44: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/44.jpg)
Active and Passive Reverse Ajax
DWR can be configured to use Comet/Polling for times when extra load is acceptable, but faster response times are needed. This mode is called active Reverse Ajax. By default DWR starts with active Reverse Ajax turned off, allowing only the piggyback transfer mechanism.
to request active Reverse Ajax in a web page. This begins a Comet/polling cycle. Just call the following as part of the page load event:
dwr.engine.setActiveReverseAjax(true);
![Page 45: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/45.jpg)
Configuring Active Reverse Ajax
Active Reverse Ajax
can be broken down into 3 modes:
• Full Streaming Mode• Early Closing Mode• Polling Mode
![Page 46: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/46.jpg)
Full Streaming Mode
This is the default mode when Active Reverse Ajax is turned on (before 2.0.4 after that using Early Closing).
It has the fastest response characteristics because it closes connections only once every 60 seconds or so to check that the browser is still active
![Page 47: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/47.jpg)
Full Streaming Mode (2)
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param> <param-name>maxWaitAfterWrite</param-name>
<param-value>-1</param-value>
</init-param>
</servlet>
You also need to request Active Reverse Ajax from a web page:
dwr.engine.setActiveReverseAjax(true);
WEB-INF/web.xml
![Page 48: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/48.jpg)
Early Closing Mode
DWR holds connection open as it did in Full Streaming Mode, however it only holds the connection open for 60 seconds if there is no output to the browser. Once output occurs, DWR pauses for some configurable time before closing the connection, forcing proxies to pass any messages on.
![Page 49: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/49.jpg)
Early Closing Mode
<init-param>
<param-name>maxWaitAfterWrite</param-name>
<param-value>500</param-value>
</init-param>
![Page 50: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/50.jpg)
Polling Mode
If it is deemed unwise to hold connections open at all then DWR can use polling mode.
![Page 51: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/51.jpg)
Polling Mode (2)
you should specify the PollingServerLoadMonitor as follows:
<init-param>
<param-name>org.directwebremoting.extend.ServerLoadMonitor</param-name>
<param-value>org.directwebremoting.impl.PollingServerLoadMonitor</param-value>
</init-param>
<init-param>
<param-name>disconnectedTime</param-name>
<param-value>60000</param-value>
</init-param>
![Page 52: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/52.jpg)
Q & A
> <!!
![Page 53: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/53.jpg)
Reference
http://www.adaptivepath.com/ideas/essays/archives/000385.php
http://java.sun.com/developer/technicalArticles/J2EE/AJAX/
https://developer.mozilla.org/en/AJAX
http://www.javaworld.com/javaworld/jw-06-2005/jw-0620-dwr.html
http://directwebremoting.org/dwr/reverse-ajax/index.html
http://directwebremoting.org/dwr/index.html
http://ajaxian.com/archives/reverse-ajax-with-dwr
http://en.wikipedia.org/wiki/Reverse_Ajax
http://en.wikipedia.org/wiki/Ajax_(programming)
http://www.adaptivepath.com/ideas/essays/archives/000385.php
http://msdn.microsoft.com/en-us/library/ms534361(VS.85).aspx
![Page 54: Introduction to AJAX and DWR](https://reader033.vdocuments.net/reader033/viewer/2022061213/5497389cb47959647f8b4575/html5/thumbnails/54.jpg)
L/O/G/Owww.themegallery.com
Thank You!SweNz FiXed