37
Making Progress Making Progress With Ajax With Ajax Peter van Dam

Making Progress With Ajax

  • Upload
    yitta

  • View
    35

  • Download
    0

Embed Size (px)

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 Presentation

Citation preview

Page 1: Making Progress With Ajax

Making Progress Making Progress With AjaxWith Ajax

Peter van Dam

Page 2: Making Progress With Ajax

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

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

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

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

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

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

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

9

CSS (2)

Making Progress With Ajax

Page 10: Making Progress With Ajax

10

XML

Making Progress With Ajax

Page 11: 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

Page 12: Making Progress With Ajax

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

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

14 Making Progress With Ajax

Demo reading file: ajax1.html

Page 15: Making Progress With Ajax

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

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

17 Making Progress With Ajax

Demo calling Progress: ajax3.html

Page 18: Making Progress With Ajax

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

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

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

21 Making Progress With Ajax

Calling Progress using POST: ajax4.html

Page 22: Making Progress With Ajax

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

23 Making Progress With Ajax

Calling Progress using XML: ajax5.html

Page 24: Making Progress With Ajax

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

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

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

27 Making Progress With Ajax

Example Using Web services: ajaxsoap.html

Page 28: Making Progress With Ajax

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

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

30

Examples of Ajax Frameworks

Dojo YUI BackBase SmartClient

Making Progress With Ajax

Commonly used Ajax JavaScript Frameworks

Page 31: Making Progress With Ajax

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

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

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

34

SmartClient

www.smartclient.com Commercial product Well documented Easy to get started

Making Progress With Ajax

Page 35: Making Progress With Ajax

35

Questions?Making Progress With Ajax

Page 36: Making Progress With Ajax

36

www.futureproofsoftware.com

[email protected]

Making Progress With Ajax

Page 37: Making Progress With Ajax

37

Thank You

Making Progress With Ajax