Ronen Cooper

1
AJAX

• Ronen Cooper
• Roy Ben-Ami

2
Contents

• Whats Ajax?
• Classic Model Vs. Ajax Model
• Defining Ajax
• XHTML, DOM, XML, XMLHttpRequest, JavaScript
• Advantages Disadvantages
• Ajax Alternatives
• XUL, XAML, Applets, Flash, SVG
• Enhanced Ajax
• DWR, Xajax, Ajax.Net
• Examples Demo

3
Whats Ajax

• Ajax may sound familiar
• Washing Machine powder
• Dutch soccer team

4
Whats 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!

5
Whats Ajax
Google Suggest
Microsoft Live
Examples From the Web
Writely
Google Maps
Gmail
6
Whats Ajax

• Ajax isnt 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

7
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

8
Classic Model

• This approach makes a lot of technical sense, but
  it doesnt make for a great user experience.
• At every step in a task, the user waits.
• The user sees the application go to the server

9
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 users interaction
  with the application to happen asynchronously,
  independent of communication with the server

10
Ajax Model

• Every user action that normally would generate an
  HTTP request takes the form of a JavaScript call
  to the Ajax engine

11
Ajax Model

• Any response to a user action that doesnt
  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 its submitting data for
  processing, loading additional interface code, or
  retrieving new data the engine makes those
  requests asynchronously, usually using XML,
  without stalling a users 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.

12
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.

13
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.

14
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

15
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

16
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.

17
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!

18
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.

19
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)

20
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.

21
Small Example
if (window.XMLHttpRequest) http_request
new XMLHttpRequest() else if (window.ActiveXObjec
t) http_request new ActiveXObject(Microsof
t.XMLHTTP)
http_request.onreadystatechange
alertContents http_request.open(GET, url,
true) http_request.send(null)
if (http_request.readyState 4) if
(http_request.status 200)
alert(http_request.responseText)
lta href onclickmakeRequest(test.html)gt
Make a request lt/agt
22
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.

23
Ajax Disadvantages

• Client Side
• Poor compatibility with very old or obscure
  browsers, and many mobile devices.
• Limited Capabilities like multimedia, interaction
  with web-cams 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.

24
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?

25
Ajax Alternatives

• XUL
• Pronounced "zool", XUL is a high performance
  markup language for creating rich dynamic user
  interfaces
• Its 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.

26
Ajax Alternatives

• XAML
• XAML is a high performance markup language for
  creating rich dynamic user interfaces.
• Its part of Avalon, Microsofts 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.

27
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.

28
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.

29
Ajax Alternatives
Ajax Applets Flash SVG XAML XUL
Desktop-like UI
Platform Independence
Vendor Independence
Skill Set Transferrance
30
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
  request-response 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.

31
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

32
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(pop
ulateList)
public class Data public String
getOptions() return new
String1,2,3
function populateList(data)
DWRUtil.addOptions(listid,data)
33
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

34
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.

35
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 dont 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)

36
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
• localhost8080

37
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).

38
Installation

• Now add these lines to the WEB-INF/web.xml file.
• The ltservletgt section needs to go with the other
  ltservletgt sections, and likewise with the
  ltservlet-mappinggt section.

ltservletgt ltservlet-namegtdwr-invokerlt/servlet-na
megt ltdisplay-namegtDWR Servletlt/display-namegt
ltservlet-classgtuk.ltd.getahead.dwr.DWRServletlt/se
rvlet-classgt ltinit-paramgt
ltparam-namegtdebuglt/param-namegt
ltparam-valuegttruelt/param-valuegt lt/init-paramgt
lt/servletgt ltservlet-mappinggt
ltservlet-namegtdwr-invokerlt/servlet-namegt
lturl-patterngt/dwr/lt/url-patterngt
lt/servlet-mappinggt
39
Installation

• Thats it!!! Its 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.

40
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 clients
  data to the Java Class (Bean) and back.
• A DHTMLJavaScript 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

41
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

42
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 clients 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.

43
Raw XMLHttpRequest

• The Java Bean (VoteSystem.java)

package myajax public class VoteSystem
private static int linux0 private static int
windows0 private static int solaris0 private
static int cares0
public String vote(int number)
switch(number) case 1 linux break
case 2 windows break case 3
return new Stringlinux"",windows"",sol
aris"",cares""
public VoteSystem()
44
Raw XMLHttpRequest

• The JSP File (calcVotes.jsp)

lt_at_ page import"myajax." gt
lt String rank(String)request.getParameter("rank
") VoteSystem voteSystemnew VoteSystem() int
rankNumInteger.parseInt(rank) String
replyvoteSystem.vote(rankNum) response.setCon
tentType("text/xml") gt
lt"ltvotegt" "ltlinuxgt"reply0"lt/linuxgt"
"ltwindowsgt"reply1"lt/windowsgt"
"ltsolarisgt"reply2"lt/solarisgt"
"ltcaresgt"reply3"lt/caresgt" "lt/votegt" gt
45
Raw XMLHttpRequest

• The JavaScript File (voteRaw.js)

function castVote(rank)
req window.XMLHttpRequest ? new
XMLHttpRequest() new ActiveXObject("Microsoft.XM
LHTTP") req.onreadystatechange
handleResponse req.open("GET","http//127.0.0.18
080/calcVotes.jsp?rank"rank, true) req.send(nul
l)
if (req.readyState 4) if (req.status
200) response req.responseXML.documentEleme
nt tabledocument.getElementById("votes")
linux'Linuxltbgt 'response.getElementsByTagName('
linux')0.firstChild.data table.rows1.cells
0.innerHTMLlinux table.rows2.cells0.innerH
TMLwindows
function handleResponse()
46
Raw XMLHttpRequest

• The HTML File Pretty long boring HTML Stuff
• Only 2 related things
• At the ltheadgt section we put a link to the file
  we created
• At the Vote form we link the links to the
  functions in the JavaScript file

ltscript type"text/javascript" src"voteRaw.js"gtlt/
scriptgt
lttrgt lttd class"sidemenuitem" width"134"
align"center"gt lta href"" onclick"castVote(1)
return false"gt Penguin Guylt/agtlt/tdgt lt/trgt
47
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 dont 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
  dont need to do anything).
• Lets see example 2

48
Direct Web Remoting

• DWR makes our lives much simpler but its 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.

49
Direct Web Remoting

• The dwr.xml file we will use
• We will now need to change a few things

lt?xml version"1.0" encoding"UTF-8"?gt lt!DOCTYPE
dwr PUBLIC "-//GetAhead Limited//DTD Direct
Web Remoting 1.0//EN" "http//www.getahead.ltd
.uk/dwr/dwr10.dtd"gt ltdwrgt ltallowgt ltcreate
creator"new" javascript"JSVoteSystem"gt
ltparam name"class" value"myajax.VoteSystem" /gt
lt/creategt lt/allowgt lt/dwrgt
50
Direct Web Remoting

• The new JavaScript File (voteDWR.js)
• Notice how much simpler the functions are! And we
  dont even need the JSP file!
• All that is left is to add 3 lines to the HTML
  file.

function castVote(rank) JSVoteSystem.vote(rank,
handleResponse)
function handleResponse(data) ("votes").rows
1.cells0.innerHTML'Linuxltbgt
'data0'lt/bgt' ("votes").rows2.cells0.inne
rHTML'Windowsltbgt 'data1'lt/bgt'
51
Direct Web Remoting

• We add 3 lines to the HTML file
• 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//localhost8080/dwr/
• For every function we exported, we will be able
  to test and see how it works remotely really
  cool feature!

ltscript type'text/javascript' src'/dwr/interface
/JSVoteSystem.js'gtlt/scriptgt ltscript
type'text/javascript' src'/dwr/engine.js'gtlt/scri
ptgt ltscript type'text/javascript'
src'/dwr/util.js'gtlt/scriptgt
52
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.
• All you need to do is to include those 2 scripts
  in your file and add the attribute
  classdraggable to anything that you want to
  drag.
• You need to give a fixed size to those objects in
  order for it to work.

ltscript type"text/javascript" src"genlibsubset_d
raggable.js"gtlt/scriptgt ltscript type"text/javascri
pt" src"draggable.js"gtlt/scriptgt ltdiv
class"draggable" style"positionabsolute
left10px top300px" gt lt/divgt
53
Thank You

• The END!