ajax

AJAX



Ronen Cooper

Roy Ben-Ami









AJAX 1

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 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 Gmail









AJAX 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);







Make a request



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



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





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); public class Data {

} public String[] getOptions() {

return new String[]{―1‖,‖2‖,‖3‖};

function populateList(data) { }

DWRUtil.addOptions(―listid‖,data); }

}









AJAX 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 section needs to go with the other

sections, and likewise with the section.



dwr-invoker

DWR Servlet

uk.ltd.getahead.dwr.DWRServlet



debug

true







dwr-invoker

/dwr/*





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[] vote(int number) {

private static 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)





"+

""+reply[0]+""+

""+reply[1]+""+

""+reply[2]+""+

""+reply[3]+""+

""

%>





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 == 4) {

req.send(null); function handleResponse()

if (req.status == 200) {

response = req.responseXML.documentElement;

table=document.getElementById("votes");

linux='Linux: '+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 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:









Penguin Guy











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

























 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: '+data[0]+'';

$("votes").rows[2].cells[0].innerHTML='Windows: '+data[1]+'';

…





 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













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





…

anything that you want to drag.



…

 You need to give a fixed size to those objects in order

it to work.

for







AJAX 52

Thank You









The END!





AJAX 53