Transcript Ajax

AJAX
Ronen Cooper
Roy Ben-Ami
AJAX
1
Contents



What’s Ajax?
Classic Model Vs. Ajax Model
Defining Ajax



Advantages & Disadvantages
Ajax Alternatives


XUL, XAML, Applets, Flash, SVG
Enhanced Ajax


XHTML, DOM, XML, XMLHttpRequest, JavaScript
DWR, Xajax, Ajax.Net
Examples + Demo
AJAX
2
What’s Ajax

Ajax may sound familiar…


Washing Machine powder
Dutch soccer team
AJAX
3
What’s Ajax





Ajax is the buzzword of the moment among web
developers
It Stands for Asynchronous JavaScript And XML
Jesse James Garrett invented this bad acronym
in Feb 2005 to describe its use by Google.
Most of the Ajax world is focused on the client
side, and "ooooh ahhhh" effects 
Lets see some of these effects!
AJAX
4
What’s Ajax
Google Suggest
Microsoft Live
Examples
From the
Web
Writely
Google Maps
AJAX
Gmail
5
What’s Ajax

Ajax isn’t a technology
 Ajax is an approach to Web application
development that uses client-side scripting to
exchange data with the Web server
 Ajax is also more of a pattern -- a way to identify
and describe a useful design technique
 Ajax is new in the sense that many developers
are just beginning to be aware of it, but all of the
components that implement an Ajax application
have existed for several years
AJAX
6
Classic Model

The classic web application
model works like this:



Most user actions in the
interface trigger an HTTP
request back to a web server.
The server does some
processing — retrieves data,
crunches numbers, talks to
various legacy systems
And then returns an HTML
page to the client
AJAX
7
Classic Model

This approach makes a lot of technical sense, but it
doesn’t make for a great user experience.


At every step in a task, the user waits.
The user sees the application go to the server
AJAX
8
Ajax Model

An Ajax application eliminates the
start-stop-start-stop nature of
interaction on the Web



It introduces an intermediary, an Ajax
engine, between the user and the server.
Instead of loading a webpage, at the
start of the session, the browser loads
an Ajax engine, written in JavaScript and
usually tucked away in a hidden frame.
The Ajax engine allows the user’s
interaction with the application to happen
asynchronously, independent of
communication with the server
AJAX
9
Ajax Model

Every user action that normally would generate an HTTP
request takes the form of a JavaScript call to the Ajax engine
AJAX
10
Ajax Model

Any response to a user action that doesn’t require a trip
back to the server — such as simple data validation,
editing data in memory, and even some navigation —
the engine handles on its own.
 If the engine needs something from the server in order to
respond — if it’s submitting data for processing, loading
additional interface code, or retrieving new data — the
engine makes those requests asynchronously, usually
using XML, without stalling a user’s interaction with the
application.
 The user is never staring at a blank browser window and
an hourglass icon, waiting around for the server to do
something.
AJAX
11
Defining Ajax

Ajax incorporates several technologies, each
flourishing in its own right, coming together in
powerful new ways.

standards-based presentation using XHTML, CSS
dynamic display and interaction using DOM
data interchange and manipulation using XML, XSLT
asynchronous data retrieval using XMLHttpRequest

and JavaScript binding everything together.



AJAX
12
XHTML, CSS

XHTML stands for EXtensible HyperText
Markup Language


It consists of all the elements in HTML 4.01
combined with the syntax of XML.
CSS stands for Cascading Style Sheets

It is used to describe the presentation of a
document written in HTML or XML.
AJAX
13
DOM

The HTML DOM is the Document Object Model
for HTML .



DOM provides a standard set of objects for
representing HTML and XML documents, and a
standard interface for accessing and manipulating
them.
Essentially, it connects web pages to scripts or
programming languages.
It defines an HTML document as a collection of
objects that have properties and methods and that
can respond to events
AJAX
14
XML, XSLT

XML stands for EXtensible Markup Language



XML was designed to describe data and to focus on
what data is (unlike HTML which was designed to display
data and to focus on how data looks)
It is a general-purpose markup language for creating
special-purpose markup languages that carry data.
XSL stands for EXtensible Stylesheet Language


XSLT stands for XSL Transformations
XSLT is used to transform an XML document into another
XML document, or another type of document that is
recognized by a browser, like HTML and XHTML
AJAX
15
XMLHttpRequest

The kernel of Ajax is the XmlHttpRequest
 The XMLHttpRequest object allows client-side
JavaScript to make HTTP requests (both GET and
POST) to the server without reloading pages in the
browser and without blocking the user
 This JavaScript object was originally introduced in
Internet Explorer 5 by Microsoft (Gasp!, yes they actually
invented something), and it is the enabling technology
that allows asynchronous requests
 Despite its name, you can use the XMLHttpRequest
object with more than just XML. You can use it to
request or send any kind of data.
AJAX
16
XMLHttpRequest

By performing screen updates on the client, you
have a great amount of flexibility when it comes
to creating your Web site :




Eliminate page refreshes every time there is user
input
Edit data directly in place, without requiring the user
to navigate to a new page to edit the data
Increase site performance by reducing the amount of
data downloaded from the server
The possibilities are endless!
AJAX
17
JavaScript

JavaScript is one of the world's most popular
programming languages


Its popularity is due entirely to its role as the scripting
language of the WWW along with VBScript
JavaScript has a syntax similar to Java but:



It is not a real programming language (it is script)
It was developed at Netscape and not Sun.
It was originally called LiveScript, but that name
wasn't confusing enough.
AJAX
18
JavaScript

JavaScript binds all the mentioned technologies together
to create the Ajax “pattern”.




When a user clicks a button, you can use JavaScript and
XHTML to immediately update the UI
Then you spawn an asynchronous request to the server
using the XMLHttpRequest object via JavaScript to
perform an update or query a database.
When the request returns as XML, you can then use
JavaScript, CSS, XSLT and DOM to update your UI
accordingly without refreshing the entire page.
Most importantly, users don't even know your code is
communicating with the server: the Web site feels like it's
instantly responding ("desktop-like" usability)
AJAX
19
Small Example

In this example we have an HTML page:




In it we have a link
When we press it, it goes to another html page.
Reads its content from the server.
And pops an alert box with the content as a string.
AJAX
20
Small Example
if (window.XMLHttpRequest)
http_request = new XMLHttpRequest();
http_request.onreadystatechange=
alertContents;
else
if (window.ActiveXObject)
http_request.open(‘GET’,
url, true);
http_request = new ActiveXObject(“Microsoft.XMLHTTP”);
http_request.send(null);
if (http_request.readyState == 4)
if (http_request.status == 200)
alert(http_request.responseText);
<a href=“#” onclick=“makeRequest(‘test.html’)”> Make a request </a>
AJAX
21
Ajax Advantages

Client Side




Can produce smooth, uninterrupted user workflow.
Saves bandwidth by only transmitting new information
Creates possibility of entirely new types of user interfaces
not possible in traditional model.
Developer Side




Provides a Middle-of-the-Road approach between
sophisticated web design (Java applets and Flash) to
simple web design (HTML).
Doesn't require 3rd party software like Java or Flash
Fits into normal code flow
Most developers already know JavaScript.
AJAX
22
Ajax Disadvantages

Client Side





Poor compatibility with very old or obscure browsers, and
many mobile devices.
Limited Capabilities like multimedia, interaction with webcams and printers, local data storage and real time
graphics.
The first-time long wait for Ajax sites.
Problem with back/forward buttons and bookmarks.
Developer Side



Easily Abused by “bad” programmers.
Not everyone have JavaScript enabled.
Too much code makes the browser slow.
AJAX
23
Ajax Alternatives

As a new technology moves through the hype
curve, people emerge to raise the inevitable
question "Why not something else?“


Now we have AJAX –
an admittedly powerful
approach to web development
is that because it's really
the best option for the job?
AJAX
24
Ajax Alternatives

XUL





Pronounced "zool", XUL is a high performance markup
language for creating rich dynamic user interfaces
It’s part of the Mozilla browser and related applications
and is available in Mozilla browsers (like Firefox).
XUL is comprised mainly of a set of high-performance
widgets that can be combined together
Advantages: high performance, fast, works with
JavaScript, based on XML
Disadvantages: Only compatible with Mozilla browsers.
AJAX
25
Ajax Alternatives

XAML




XAML is a high performance markup language for
creating rich dynamic user interfaces.
It’s part of Avalon, Microsoft’s next generation UI
technology (will be supported in IE 7).
Advantages: high performance, robust, highly
configurable.
Disadvantages: Microsoft-only technology and will be
available only when Vista is released.
AJAX
26
Ajax Alternatives

Java Applets




An Applet is a program written in JAVA that can be
included on a web page.
Advantages: Fast. Supported on most platforms (with the
Java plugin).
Disadvantages: Requires the Sun Java plugin and takes
a while to load.
Macromedia Flash & Shockwave (or the new FLEX)



These are powerful presentation-layer frameworks.
Advantages: Browser and platform compatibility. Speed
and flexibility. Increasingly powerful development tools.
Disadvantages: General distrust from enterprise
software developers. Rare skillset required.
AJAX
27
Ajax Alternatives

SVG (Scalable Vector Graphics)




A text based graphics language that describes images
with vector shapes, text, and embedded raster graphics.
It has good interoperability with CSS and JavaScript
Advantages: Speed and flexibility.
Disadvantages: Requires proprietary plugins that many
firms will not allow users to install. Rare skillset required
to do development. This language is still somewhat
immature and developing.
AJAX
28
Ajax Alternatives
XUL XAML SVG Flash Applets Ajax
Desktop-like
UI
Platform
Independence
Vendor
Independence
Skill Set
Transferrance
AJAX
29
Enhanced Ajax

Raw Ajax - using the XmlHttpRequest directly for
creating asynchronous requests is cumbersome.



It is verbose in the JavaScript code and hard to debug.
You must consider the server-side work needed to
marshal the results back to the browser
Using different engines/frameworks you can
eliminate all of the machinery of the Ajax requestresponse cycle from your application code.


This means your client-side code never has to deal with
an XMLHttpRequest object directly.
You don't need to write object serialization code or use
third-party tools to turn your objects into XML.
AJAX
30
Enhanced Ajax

DWR – Direct Web Remoting





It is a Java framework that you can easily plug into your
Web applications to allow your JavaScript code to call
services on the server.
DWR is deployed as a servlet within your Web application
DWR dynamically generates JavaScript to include in your
Web page for each exposed class
The generated JavaScript contains stub functions that
represent the corresponding methods on the Java class
and also performs XMLHttpRequests behind the scenes.
The DWR invokes those methods and sends the method's
return value back to the client side in its servlet response,
encoded into JavaScript
AJAX
31
Enhanced Ajax

This method of remoting functions from Java to JavaScript
gives DWR users a feel much like conventional RPC
mechanisms like RMI or SOAP, with the benefit that it runs
over the web without requiring web-browser plug-ins.
function eventHandler() {
Data.getOptions(populateList);
}
function populateList(data) {
DWRUtil.addOptions(“listid”,data);
}
AJAX
public class Data {
public String[] getOptions() {
return new String[]{“1”,”2”,”3”};
}
}
32
Enhanced Ajax

There are many more such frameworks for Java
and other languages:





Xajax - an open source PHP class library for ajax
Ajax.net – Ajax library for .Net (not by microsoft)
AjaxAnywhere - designed to turn any set of existing
JSP or JSF components into AJAX-aware
components
Dojo - an Open Source toolkit that allows you to
easily build dynamic capabilities into web pages
Bindows - object-oriented platform and IDE for
developing Ajax applications
AJAX
33
Demo

The demo contains 2 identical examples for using Ajax.



First example will use the raw XMLHttpRequest.
Second example will use the DWR.
The examples show a way for creating the “next
generation” voting system.




Old system is used in sites like walla, ynet and more…
Currently, when you vote the entire page is
refreshed/resent.
Ajax can make the user experience more pleasant by
providing a more responsive UI and eliminating the flicker
of the page refresh.
It also saves bandwidth since we can send only the results
back, instead of the whole page.
AJAX
34
Installation

All we need to run Ajax is a compatible browser!


Explorer, Mozilla or FireFox will do fine.
But to develop and test our examples we also
need a Web Server.


We will use Tomcat 5.5 which can be found here
We will need Java SDK 1.5 (5.0) – get here

In general, you will also need a DB, but for
simplicity we don’t use one in our examples.
 Lastly, for the DWR example, you need to d/l the
dwr.jar from here (version 1.0 or 1.1 beta)
AJAX
35
Installation

Install Tomcat by running the binary file (after JDK 1.5)
 Start the tomcat web server by clicking the “Configure
Tomcat” program.
 Press the Start.
 Wait until the service
status says Started.
 Open your browser.
 Enter the address:
localhost:8080
AJAX
36
Installation

Make sure you have this page now in the browser

Now place the dwr.jar in the WEB-INF/lib directory of
your web app (default is
TOMCAT_HOME/webapps/ROOT/ WEB-INF/lib).
AJAX
37
Installation

Now add these lines to the WEB-INF/web.xml file.

The <servlet> section needs to go with the other <servlet>
sections, and likewise with the <servlet-mapping> section.
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<servlet-class>uk.ltd.getahead.dwr.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>
AJAX
38
Installation





That’s it!!! It’s that simple.
Notice that Tomcat also supports JSP files and
servlets (the Java equivalent to ASP.NET).
All we need now is a Text Editor such as
notepad or something else free to write the code
down.
Later we will go back to configure the DWR
correctly for our example.
But for right now, lets jump to the 1st example.
AJAX
39
Raw XMLHttpRequest

To make our example, we need to program 3 files




A Java Class (Bean) that will do the voting calculations.
A JSP page on the server to transfer the client’s data to
the Java Class (Bean) and back.
A DHTML+JavaScript page that the client will see & use
We will create 4 files:




VoteSystem.java – The Java Bean
voteRaw.html - The DHTML file
voteRaw.js – The JavaScript file we will put in the HTML
calcVotes.jsp – The JSP server file
AJAX
40
Raw XMLHttpRequest
All the “Web” files go into your main web app
directory in tomcat (i.e webapps/ROOT)
 The Java Bean file goes into the relevant
package in webapps/ROOT/WEB-INF/classes
(in our case the package is myajax)
 In the demo, we will give you a zip file which you
open in the webapps directory.
 It will contain all the files in their correct places

AJAX
41
Raw XMLHttpRequest

Basically the client will see a voting box in his page





He will click his choice
Using JavaScript and the XMLHttpRequest it will make a
request to the server (the JSP file)
The JSP file will then call the Java Bean, and give him the
client’s data.
The bean will return the answers to the JSP who will
transform them to XML and send them to the client.
The client will receive the answers asynchronously and
display them.
AJAX
42
Raw XMLHttpRequest
 The
Java
Bean
package
myajax;
(VoteSystem.java)
private static int linux=0;
private static int windows=0;
public class VoteSystem {
private static int solaris=0;
public
String[]
number) {
private
static vote(int
int cares=0;
switch(number) {
public VoteSystem()
{} 1:
case
linux++;
break;
case 2:
windows++;
break;
case 3: …
}
…
return new String[]{linux+"",windows+"",solaris+"",cares+""};
…
AJAX
43
Raw XMLHttpRequest

The JSP File (calcVotes.jsp)
<%@ page import="myajax.*" %>
<%
String rank=(String)request.getParameter("rank");
VoteSystem voteSystem=new VoteSystem();
int rankNum=Integer.parseInt(rank);
String reply[]=voteSystem.vote(rankNum);
response.setContentType("text/xml");
%><%="<vote>"+
"<linux>"+reply[0]+"</linux>"+
"<windows>"+reply[1]+"</windows>"+
"<solaris>"+reply[2]+"</solaris>"+
"<cares>"+reply[3]+"</cares>"+
"</vote>"
%>
AJAX
44
Raw XMLHttpRequest

The JavaScript File (voteRaw.js)
function castVote(rank)
req = window.XMLHttpRequest ?
new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = handleResponse;
req.open("GET","http://127.0.0.1:8080/calcVotes.jsp?rank="+rank, true);
if (req.readyState
function
== 4) handleResponse()
{
req.send(null);
if (req.status == 200) {
response = req.responseXML.documentElement;
table=document.getElementById("votes");
linux='Linux:<b> '+response.getElementsByTagName('linux')[0].firstChild.data
…
…
table.rows[1].cells[0].innerHTML=linux;
table.rows[2].cells[0].innerHTML=windows;
…
AJAX
45
Raw XMLHttpRequest

The HTML File – Pretty long boring HTML Stuff…


Only 2 related things:
At the <head> section we put a link to the file we created:
<script type="text/javascript" src="voteRaw.js"></script>

At the Vote form we link the links to the functions in the
JavaScript file:
<tr>
<td class="sidemenuitem" width="134" align="center">
<a href="#" onclick="castVote(1); return false;">
Penguin Guy</a></td>
</tr>
AJAX
46
Raw XMLHttpRequest





As you can see, this is a lengthy process but it
works! 
In order to improve that, we can use the DWR.
Now we don’t need the JSP page anymore, and we
can call directly the Java Bean ourselves from the
HTML page.
The DWR will take care of transferring all the data
between the client and the java class (we don’t need
to do anything).
Let’s see example 2
AJAX
47
Direct Web Remoting


DWR makes our lives much simpler but it’s a bit
slower that regular AJAX, and also still buggy
(getting better all the time).
To use DWR we need to do the following:



We need to tell the DWR engine what classes and
methods we want it to “export” for us.
We need to create a dwr.xml file and put it inside our
TOMCAT_HOME/webapps/ROOT/ WEB-INF
In the dwr.xml we will specify our Java Class, and will give
it a JavaScript name that we can use in the HTML pages.
AJAX
48
Direct Web Remoting

The dwr.xml file we will use
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="JSVoteSystem">
<param name="class" value="myajax.VoteSystem" />
</create>
</allow>
</dwr>

We will now need to change a few things…
AJAX
49
Direct Web Remoting

The new JavaScript File (voteDWR.js)
function castVote(rank) {
JSVoteSystem.vote(rank,handleResponse);
}
function handleResponse(data) {
…
$("votes").rows[1].cells[0].innerHTML='Linux:<b> '+data[0]+'</b>';
$("votes").rows[2].cells[0].innerHTML='Windows:<b> '+data[1]+'</b>';
…


Notice how much simpler the functions are! And we don’t
even need the JSP file!
All that is left is to add 3 lines to the HTML file.
AJAX
50
Direct Web Remoting

We add 3 lines to the HTML file
<script type='text/javascript' src='/dwr/interface/JSVoteSystem.js'></script>
<script type='text/javascript' src='/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr/util.js'></script>

The util.js that DWR provides contains a lot of useful
methods to use the DOM such as

setValue(), getValue() and more…

The built-in Debug mode in DWR allows us to test our
classes in here: http://localhost:8080/dwr/
 For every function we exported, we will be able to test
and see how it works remotely – really cool feature!
AJAX
51
Bonus

We added 2 more JavaScript files to demo
genlibsubset_draggable.js & draggable.js
 These enable you to drag around stuff in your HTML
file – a cool thing to do.
<script
All you
need to do issrc="genlibsubset_draggable.js"></script>
to include those 2 scripts in your
type="text/javascript"
<script
type="text/javascript"
src="draggable.js"></script>
file and
add the attribute
class=“draggable” to
…
anything that you want to drag.
<div class="draggable" style="position:absolute; left:10px; top:300px;" >
…You need to give a fixed size to those objects in order
</div>
for it to work.

AJAX
52
Thank You
The END!
AJAX
53