1. Ronen Cooper Roy Ben-Ami
AJAX
Ronen Cooper
Roy Ben-Ami
AJAX

2. Contents What’s 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
AJAX

3. What’s Ajax Ajax may sound familiar… Washing Machine powder
Dutch soccer team
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

4. 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!
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

5. What’s Ajax Google Suggest Microsoft Live Examples From the Web
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
Writely
Google Maps
Gmail
AJAX

6. 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
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

8. 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
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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 user’s interaction with the application to happen asynchronously, independent of communication with the server
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

10. Ajax Model
Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

11. 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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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!
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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)
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

21. Small Example if (window.XMLHttpRequest)
http_request = new XMLHttpRequest();
else if (window.ActiveXObject)
http_request = new ActiveXObject(“Microsoft.XMLHTTP”);
http_request.onreadystatechange= alertContents;
http_request.open(‘GET’, url, true);
http_request.send(null);
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
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

22. Ajax Advantages Client Side Developer 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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

23. Ajax Disadvantages Client Side Developer 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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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?
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

25. 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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

26. 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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

29. Ajax Alternatives Desktop-like UI Platform Independence
Applets
Flash
SVG
XAML
XUL
Desktop-like UI
Platform Independence
Vendor Independence
Skill Set Transferrance
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
function eventHandler() {
Data.getOptions(populateList); }
public class Data {
public String[] getOptions() {
return new String[]{“1”,”2”,”3”}; }
function populateList(data) {
DWRUtil.addOptions(“listid”,data); }
AJAX

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
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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 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)
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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:
localhost:8080
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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).
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

38. 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>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

39. 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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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 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
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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 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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

43. Raw XMLHttpRequest The Java Bean (VoteSystem.java) package myajax;
public class VoteSystem {
private static int linux=0;
private static int windows=0;
private static int solaris=0;
private static int cares=0;
public String[] vote(int number) {
switch(number) {
case 1:
linux++;
break;
case 2:
windows++;
case 3: … } …
return new String[]{linux+"",windows+"",solaris+"",cares+""};
public VoteSystem() {}
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

44. 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");
%>
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
<%="<vote>"+
"<linux>"+reply[0]+"</linux>"+
"<windows>"+reply[1]+"</windows>"+
"<solaris>"+reply[2]+"</solaris>"+
"<cares>"+reply[3]+"</cares>"+
"</vote>"
%>
AJAX

45. 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"," true);
req.send(null);
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
if (req.readyState == 4) {
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;
function handleResponse()
AJAX

46. 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:
At the Vote form we link the links to the functions in the JavaScript file:
<script type="text/javascript" src="voteRaw.js"></script>
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
<tr>
<td class="sidemenuitem" width="134" align="center">
<a href="#" onclick="castVote(1); return false;">
Penguin Guy</a></td>
</tr>
AJAX

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 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
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

48. 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.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

49. Direct Web Remoting We will now need to change a few things…
The dwr.xml file we will use
We will now need to change a few things…
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"
<dwr>
<allow>
<create creator="new" javascript="JSVoteSystem">
<param name="class" value="myajax.VoteSystem" />
</create>
</allow>
</dwr>
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

50. Direct Web Remoting The new JavaScript File (voteDWR.js)
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.
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>';
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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:
For every function we exported, we will be able to test and see how it works remotely – really cool feature!
<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>
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX

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 class=“draggable” to anything that you want to drag.
You need to give a fixed size to those objects in order for it to work.
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
<script type="text/javascript" src="genlibsubset_draggable.js"></script>
<script type="text/javascript" src="draggable.js"></script> …
<div class="draggable" style="position:absolute; left:10px; top:300px;" >
</div>
AJAX

53. Thank You
The END!
Stat with: Who doesn’t own a cellphone? Say that it is different than anything we knew until today.
AJAX