Download Catch Me If You Can

Making Progress
With Ajax
Peter van Dam
Agenda




Agenda Item 1
Introduction
The XMLHttpRequest object
Calling Progress:
• WebSpeed
• Web services
 Ajax Frameworks
2
Making Progress With Ajax
What is Ajax?
Asynchronous JavaScript and XML
 Standards-based presentation using XHTML
and CSS;
 Dynamic display and interaction using the
Document Object Model;
 Data interchange and manipulation using
XML;
 (A)synchronous data retrieval using
XMLHttpRequest;
 and JavaScript binding everything together.
3
Making Progress With Ajax
What is Ajax? (2)
The bottom line
 A way to create web applications that behave
like desktop applications (Rich Internet
Application – RIA)
 Zero footprint
 Single Page Interface
 Almost as rich as the desktop
 But not a replacement for the desktop
4
Making Progress With Ajax
HTML, XHTML, DHTML




HTML development ceased in 1999 (4.01)
Followed by XHTML (W3C standard)
No more browser-specific dialects
XHTML is like HTML 4.0 but enforces tag
rules stricter (e.g. close tags required:
<P></P> and <BR />)
 DHTML allows the dynamic manipulation of
web pages at runtime (see DOM)
5
Making Progress With Ajax
DOM
 The Document Object Model is a standard
API for accessing all objects in a web page
(document)
 An example language that implements the
DOM is JavaScript
 The DOM allows to query, create, modify and
delete elements in a web page at run time
 Examples: rendering, refreshing content (!)
6
Making Progress With Ajax
JavaScript
 JavaScript is a client-side programming
language that runs in the browser
 Standardized by ECMA
 Minor differences (additions) still exist, but it
is not a nightmare anymore
 As long as you stick to ECMAScript for
manipulating the DOM you are OK
 JavaScript is not difficult to learn
7
Making Progress With Ajax
CSS
 Cascading Style Sheets allow the separation
of presentation and data by defining Styles
 Look-and-feel is provided by CSS
 CSS offers more details than HTML
 Styles can be set by JavaScript as well, e.g.
field width in pixels
8
Making Progress With Ajax
CSS (2)
9
Making Progress With Ajax
XML
10
Making Progress With Ajax
The XMLHttpRequest object
The magic of Ajax is in the XMLHttpRequest object
The following code works in all modern browsers*:
function callServer(dataFile, target) {
var myRequest = new XMLHttpRequest();
var myTarget = document.getElementById(target);
myRequest.open("GET", dataFile, false);
myRequest.send(null);
myTarget.innerHTML = myRequest.responseText;
}
* IE 6- requires additional code
11
Making Progress With Ajax
The XMLHttpRequest object
Methods
12
Method
Description
open(method, URL, async)
Specifies the method, URL and
optional “async” parameter.
setRequestHeader(label, value)
Adds a label/value pair to the
HTTP header to be sent.
send(content)
Sends the request.
Making Progress With Ajax
The XMLHttpRequest object
Properties
Property
Description
responseText
Returns the response as a string.
responseXML
Returns the response as XML. You can parse this DOM
tree with JavaScript.
readyState
Returns the state of the object as follows:
Onreadystatechange
status
statusText
13
Making Progress With Ajax

0 = uninitialized

1 = open

2 = sent

3 = receiving

4 = loaded
This is a reference to an event handler for an event that
fires at every change of readyState.
Returns the HTTP status code as a number (e.g. 404 for
"Not Found" and 200 for "OK").
Returns the status as a string (e.g. "Not Found" or "OK").
Demo reading file: ajax1.html
14
Making Progress With Ajax
Calling Progress Using WebSpeed
Ajax Architecture
Browser Client
Web
User
Ajax
Interface
Engine
Server
(HTML)
Documents
15
Making Progress With Ajax
Calling Progress
There are two major ways to call Progress from JavaScript
 WebSpeed
 Web Services
16
Making Progress With Ajax
Demo calling Progress: ajax3.html
17
Making Progress With Ajax
Calling Progress Using WebSpeed
WebSpeed Ajax Architecture
Browser Client
Web
User
Ajax
Interface
Engine
Server
WebSpeed
Agent
(HTML)
Documents
18
Making Progress With Ajax
Database
GET or POST?
function callServer(url, targetContainer) {
var myRequest = createRequest();
var myTarget = document.getElementById(targetContainer);
myRequest.open("GET", url, false);
myRequest.send(null);
myTarget.innerHTML = myRequest.responseText;
}




19
This example sends the request using GET
The parameters are appended to the URL
There is a limit of 512 bytes
In addition GET is prone to caching
Making Progress With Ajax
Switching from GET to POST
function callServer(url, data, targetContainer) {
var myRequest = createRequest();
var myTarget = document.getElementById(targetContainer);
myRequest.open("POST", url, false);
myRequest.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
myRequest.send(data);
myTarget.innerHTML = myRequest.responseText;
}
 Change the method to POST
 Set the requestHeader to url-encoded
 Send the parameters as data
20
Making Progress With Ajax
Calling Progress using POST: ajax4.html
21
Making Progress With Ajax
Switching to XML
 Sending XML from JavaScript client:
setRequestHeader("Content-Type","text/xml");
 Receiving XML on WebSpeed server:
hDoc = WEB-CONTEXT:X-DOCUMENT.
 Sending XML from WebSpeed:
RUN outputContentType IN web-utilities-hdl
("text/xml":U).
 Receiving XML on JavaScript Client:
responseXML.firstChild.firstChild.nodeValue;
22
Making Progress With Ajax
Calling Progress using XML: ajax5.html
23
Making Progress With Ajax
Ajax Using Web Services
Advantages of Web services over WebSpeed
 Web services can be used instead of
WebSpeed
 The biggest advantage is automatic XML
conversion
 You can create Web service proxies using
ProxyGen for any .r file
 The Web Services Adapter (WSA) takes care
of the rest
 Now you have XML communication between
client and server
24
Making Progress With Ajax
Web Services and SOAP
A SOAP message is XML payload in an Envelope
Envelope
Header
Header Entry
Header Entry
…
Body
Body Entry
Body Entry
…
25
Making Progress With Ajax
Demo stuff
 You have probably seen ProxyGen demos
several times
 Instead let us have a look at the generated
WSDL file
 You can install an Eclipse plug-in called Eclipse
Web Tools to help you out with Ajax
development including XML and WSDL
manipulation
26
Making Progress With Ajax
Example Using Web services: ajaxsoap.html
27
Making Progress With Ajax
Drawbacks of the Web Services Approach
 Uploading Files
• Is possible, but difficult
 Streaming data
• Not possible, you still need WebSpeed for this
28
Making Progress With Ajax
Ajax Frameworks
Why use an Ajax framework?







29
Save a lot of time and effort
Do not reinvent the wheel
Mature user interface
Better quality by using a proven product
Cross-browser support
Access to widget and code libraries
Get Help and Support
Making Progress With Ajax
Examples of Ajax Frameworks
Commonly used Ajax JavaScript Frameworks




30
Dojo
YUI
BackBase
SmartClient
Making Progress With Ajax
Dojo




http://dojotoolkit.org
Open Source product
Very popular
Great widgets
 Not very well documented
 Prefers JSON over XML
31
Making Progress With Ajax
Yahoo! UI library
 http://developer.yahoo.com/yui
 Open Source product
 Well documented
 Very large installed base
 Easy to get started
32
Making Progress With Ajax
Backbase
 www.backbase.com
 Commercial product
 You can start with the Open Source version
 Pretty well documented
 Very powerful
 Complex
33
Making Progress With Ajax
SmartClient
 www.smartclient.com
 Commercial product
 Well documented
 Easy to get started
34
Making Progress With Ajax
?
Questions
35
Making Progress With Ajax
www.futureproofsoftware.com
peter@futureproofsoftware.com
36
Making Progress With Ajax
Thank You
37
Making Progress With Ajax