making progress with ajax
DESCRIPTION
Making Progress With Ajax. Peter van Dam. Agenda. Agenda Item 1 Introduction The XMLHttpRequest object Calling Progress: WebSpeed Web services Ajax Frameworks. What is Ajax?. Asynchronous JavaScript and XML. Standards-based presentation using XHTML and CSS; - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/1.jpg)
Making Progress Making Progress With AjaxWith Ajax
Peter van Dam
![Page 2: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/2.jpg)
2
Agenda Item 1 Introduction The XMLHttpRequest object Calling Progress:
• WebSpeed
• Web services Ajax Frameworks
Agenda
Making Progress With Ajax
![Page 3: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/3.jpg)
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
![Page 4: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/4.jpg)
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
![Page 5: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/5.jpg)
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)
![Page 6: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/6.jpg)
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
![Page 7: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/7.jpg)
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
![Page 8: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/8.jpg)
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
![Page 9: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/9.jpg)
9
CSS (2)
Making Progress With Ajax
![Page 10: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/10.jpg)
10
XML
Making Progress With Ajax
![Page 11: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/11.jpg)
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
![Page 12: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/12.jpg)
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.
![Page 13: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/13.jpg)
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").
![Page 14: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/14.jpg)
14 Making Progress With Ajax
Demo reading file: ajax1.html
![Page 15: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/15.jpg)
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
![Page 16: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/16.jpg)
16
Calling Progress
WebSpeed Web Services
There are two major ways to call Progress from JavaScript
Making Progress With Ajax
![Page 17: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/17.jpg)
17 Making Progress With Ajax
Demo calling Progress: ajax3.html
![Page 18: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/18.jpg)
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
![Page 19: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/19.jpg)
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; }
![Page 20: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/20.jpg)
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
![Page 21: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/21.jpg)
21 Making Progress With Ajax
Calling Progress using POST: ajax4.html
![Page 22: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/22.jpg)
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
![Page 23: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/23.jpg)
23 Making Progress With Ajax
Calling Progress using XML: ajax5.html
![Page 24: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/24.jpg)
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
![Page 25: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/25.jpg)
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
…
![Page 26: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/26.jpg)
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
![Page 27: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/27.jpg)
27 Making Progress With Ajax
Example Using Web services: ajaxsoap.html
![Page 28: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/28.jpg)
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
![Page 29: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/29.jpg)
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?
![Page 30: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/30.jpg)
30
Examples of Ajax Frameworks
Dojo YUI BackBase SmartClient
Making Progress With Ajax
Commonly used Ajax JavaScript Frameworks
![Page 31: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/31.jpg)
31
Dojo
http://dojotoolkit.org Open Source product Very popular Great widgets Not very well documented Prefers JSON over XML
Making Progress With Ajax
![Page 32: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/32.jpg)
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
![Page 33: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/33.jpg)
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
![Page 34: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/34.jpg)
34
SmartClient
www.smartclient.com Commercial product Well documented Easy to get started
Making Progress With Ajax
![Page 35: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/35.jpg)
35
Questions?Making Progress With Ajax
![Page 37: Making Progress With Ajax](https://reader035.vdocuments.us/reader035/viewer/2022062500/56815563550346895dc32d48/html5/thumbnails/37.jpg)
37
Thank You
Making Progress With Ajax