Making Progress Making Progress With AjaxWith Ajax
Peter van Dam
2
Agenda Item 1 Introduction The XMLHttpRequest object Calling Progress:
• WebSpeed
• Web services Ajax Frameworks
Agenda
Making Progress With Ajax
3 Making Progress With Ajax
What is Ajax?
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.
Asynchronous JavaScript and XML
4 Making Progress With Ajax
What is Ajax? (2)
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
The bottom line
5 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)
6
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 (!)
Making Progress With Ajax
7
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
JavaScript
Making Progress With Ajax
8
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
CSS
Making Progress With Ajax
9
CSS (2)
Making Progress With Ajax
10
XML
Making Progress With Ajax
11
The following code works in all modern browsers*:
The XMLHttpRequest object
The magic of Ajax is in the XMLHttpRequest object
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; }
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; }
Making Progress With Ajax
* IE 6- requires additional code
12
The XMLHttpRequest object
Methods
Making Progress With Ajax
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.
13
The XMLHttpRequest object
Properties
Making Progress With Ajax
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:
0 = uninitialized
1 = open
2 = sent
3 = receiving
4 = loaded
Onreadystatechange This is a reference to an event handler for an event that fires at every change of readyState.
status Returns the HTTP status code as a number (e.g. 404 for "Not Found" and 200 for "OK").
statusText Returns the status as a string (e.g. "Not Found" or "OK").
14 Making Progress With Ajax
Demo reading file: ajax1.html
15
Calling Progress Using WebSpeed
Ajax Architecture
Making Progress With Ajax
Ajax
Engine
Ajax
Engine
Browser ClientBrowser Client
User
Interface
(HTML)
User
Interface
(HTML)
Web Server
Web Server
DocumentsDocuments
16
Calling Progress
WebSpeed Web Services
There are two major ways to call Progress from JavaScript
Making Progress With Ajax
17 Making Progress With Ajax
Demo calling Progress: ajax3.html
18
Calling Progress Using WebSpeed
WebSpeed Ajax Architecture
Making Progress With Ajax
Ajax
Engine
Ajax
Engine
Browser ClientBrowser Client
User
Interface
(HTML)
User
Interface
(HTML)
WebSpeed
Agent
WebSpeed
Agent
DatabaseDatabase
Web Server
Web Server
DocumentsDocuments
19
GET or POST?
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
function callServer(url, targetContainer) { var myRequest = createRequest(); var myTarget = document.getElementById(targetContainer); myRequest.open("GET", url, false); myRequest.send(null); myTarget.innerHTML = myRequest.responseText; }
20
Switching from GET to POST
Making Progress With Ajax
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
21 Making Progress With Ajax
Calling Progress using POST: ajax4.html
22
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;
Making Progress With Ajax
23 Making Progress With Ajax
Calling Progress using XML: ajax5.html
24
Ajax Using Web Services
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
Making Progress With Ajax
Advantages of Web services over WebSpeed
25
Web Services and SOAP
Making Progress With Ajax
A SOAP message is XML payload in an Envelope
Envelope
Body
HeaderHeader Entry
…
BodyEntry
BodyEntry
Header Entry
…
26
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
Making Progress With Ajax
27 Making Progress With Ajax
Example Using Web services: ajaxsoap.html
28
Drawbacks of the Web Services Approach
Uploading Files• Is possible, but difficult
Streaming data• Not possible, you still need WebSpeed for this
Making Progress With Ajax
29
Ajax Frameworks
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
Why use an Ajax framework?
30
Examples of Ajax Frameworks
Dojo YUI BackBase SmartClient
Making Progress With Ajax
Commonly used Ajax JavaScript Frameworks
31
Dojo
http://dojotoolkit.org Open Source product Very popular Great widgets Not very well documented Prefers JSON over XML
Making Progress With Ajax
32
Yahoo! UI library
http://developer.yahoo.com/yui Open Source product Well documented Very large installed base Easy to get started
Making Progress With Ajax
33
Backbase
www.backbase.com Commercial product You can start with the Open Source version Pretty well documented Very powerful Complex
Making Progress With Ajax
34
SmartClient
www.smartclient.com Commercial product Well documented Easy to get started
Making Progress With Ajax
35
Questions?Making Progress With Ajax
37
Thank You
Making Progress With Ajax