Transcript Document

A New Way To Web
Applications Development
Tin Htut Htut Naing Oo
Myanmar Information Technology
Did you use following?
Do you want to develop the Rich Internet
Application (RIA) likes following ?
Agenda
Classic Web Application Model
What is a new way?
What can we do with AJAX?
What is AJAX?
XMLHttpRequest Object
Sample Application with J2EE
Who’s Using AJAX
Conclusion
FAQ
Classic Web Application Model
A classic web application model adopts
– “Click, wait and refresh” user interaction
paradigm
– Synchronous “request/response”
communication model
Classic Web Application Model
Do not work well for some web
applications.
Real time validation.
Loss of operation context during page
refresh.
Excessive server load and bandwidth
consumption due to redundant page
refreshes.
What is a new way?
USING AJAX AT WEB
APPLICATIONS.
Before AJAX, some developers used hidden iframe instead of
AJAX.
What can we do with AJAX?
Data can be manipulated without having to
render the entire page again in the web
browser.
Allows web applications to respond more
quickly to many types of user interaction
and to avoid repeatedly sending
unchanged information back and forth
across the network.
What is AJAX?
Asynchronous JavaScript And XML
AJAX is not a technology itself.
Refers to the use of a group of technologies
together.
– HTML or DHTML and CSS for presentation
information.
– Document Object Model manipulated through
JavaScript to dynamically display and interact with the
information presented.
– XMLHttpRequest object to exchange data
asynchronously with the web server.
AJAX Application Model
AJAX Application Model adopts
– “Partial screen update” replace “click, wait,
and refresh” user interaction model.
– Asynchronous communication replaces
“synchronous request/response model”
Classic Vs AJAX
AJAX Architecture
Use of a client-side engine as an
intermediate between the User Interface
(UI) and the server.
User activity leads to program calls to the
client-side engine instead of a page
request to the server.
XML data transfer between server and the
client-side engine.
XMLHttpRequest Object
Enables JavaScript functions to exchange
HTTP transactions with a remote server
completely in the background.
First implemented by Microsoft in Internet
Explorer 5 for Windows as an ActiveX
object.
Subsequently, developers on the Mozilla
project and Apple's Safari browser
implemented a compatible native object.
Creating the Object
For Safari and Mozilla
var req = new XMLHttpRequest();
For the ActiveX branch
var req = new
ActiveXObject("Microsoft.XMLHTTP");
Object Methods
Method
Description
abort()
Stops the current request.
getAllResponseHeaders()
Returns complete set of headers
(labels and values) as a string
getResponseHeader("headerLabel")
Assigns destination URL, method, and
other optional attributes of a pending
request
open("method", "URL"[, asyncFlag[,
"userName"[, "password"]]])
Assigns destination URL, method, and
other optional attributes of a pending
request
send(content)
Transmits the request, optionally with
postable string or DOM object data
setRequestHeader("label", "value")
Assigns a label/value pair to the
header to be sent with a request
Object Properties
Property
Description
onreadystatechange
Event handler for an event that fires at
every state change
readyState
Object status integer:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
responseText
String version of data returned from server
process
responseXML
DOM-compatible document object of data
returned from server process
status
Numeric code returned by server, such as
404 for "Not Found" or 200 for "OK"
statusText
String message accompanying the status
code
Sample Application with J2EE
Realtime Form Data Validation
Client HTML
<input type="text" size="20" id="userid"
name="id" onkeyup="validate();">
- form element above will call the validate()
each time a key is pressed in the form field.
Initialized the XMLHTTPRequest
var req;
function validate() {
var idField = document.getElementById("idField");
var url = "validate?id=" + escape(idField.value);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
Server Side Servlet
public class ValidationServlet extends HttpServlet {
private ServletContext context;
private HashMap users = new HashMap();
public void init(ServletConfig config) throws ServletException {
this.context = config.getServletContext();
users.put("greg","account data");
users.put("duke","account data");
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !users.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write(“<message>valid</message>");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write(“<message>invalid</message>");
}
}
}
callback() function processes the result.
function callback() {
if (req.readyState == 4) {
if (req.status == 200) {
// update the HTML DOM based on
whether or not message is
valid
}
}
}
Sample Application with J2EE
Who’s Using AJAX
Google is making a huge investment in
developing the Ajax approach.
– Google Groups, Google Suggest, Google
Map and GMail
– Amazon A9 search engine, Amazon A9 map
Google's competitors have recently
released similar Ajax-based websites.
– America Online’s AIM Mail
– Microsoft’s Virtual Earth
Libraries/Scripts with server-side integration
.Net
–
–
–
–
Ajax.NET (free Microsoft .NET Library)
Aspects of Ajax (free Ajax Engine using Ajax base on WebServices and a Blog)
Bitkraft
PowerWEB livecontrols for ASP.NET (Ajax for Visual Studio ASP.NET)
Java
–
–
–
–
AjaxTags (free set of JSP tags that simplify the use of Ajax technology)
DWR (free Java Library)
Echo2 (free Java Ajax library with a thick client API)
JSON-RPC-JAVA
PHP
– NAjax (PHP library that aims to connect JavaScript and PHP.)
– Xajax (PHP Ajax toolkit)
– Html_Ajax
Multiplatform
– Backbase
– WebORB
Browsers which support AJAX
Apple Safari 1.2 and above
Konqueror
Microsoft Internet Explorer 5.0 and above
Mozilla Firefox 1.0 and above
Netscape 7 and above
Opera 7.6 and above
References
www.ajaxmatters.com
www.adaptivepath.com
en.wikipedia.org/wiki/AJAX
www.nextapp.com/products/echo2/
getahead.ltd.uk/dwr/
oss.metaparadigm.com/jsonrpc/
dev2dev.bea.com/pub/a/2005/08/ajax_intr
oduction.html
Conclusion
AJAX represents a generic application
model that would enable more interactive,
more responsive, and smarter Web
applications.
AJAX is not tied to a particular
programming language, data format, or
network object and is defined by two core
attributes: partial screen update and
asynchronous communication.
Thanks for your time.

[email protected]