1 The Heart of AJAX AJAX in action '(&52$ - - PDF document

1

• Last time

!"

#$% %$&$!"

%$'

%$#())% !" *'&(!"

Today

+%,

• ,'&

The AJAX model

$'(('

%$&%# %(%

*&.!".% %,'/0

((%&% . %%%

%# .

• %&

Defining AJAX

, %%$& !" , %%$12$%$

3%$ ( &(%

&1 %$* !"1-%#4

%!"

Why AJAX?

((%$%&%'%

&%$#

*'(%3%&&&(%

%%

%$ %%(%,

2

AJAX in action

The Heart of AJAX

'(&52$ 6571$(8

*&(, ((% %%'3%%%

• %$(% &

5&(4%!" *'(%

*$&&%,(('9%%

:.!%;((<#%4.*#.&.

Static page model AJAX Writing AJAX

+%&%&&(% *867

#$% 5$($%%96!"7

(86*&7

= '(&52$ %9%((

• !"($

=&&%$-!

On the server side

#$%

&%$(,

5$%9&&%&

#%'

3

Returning XML

$% >

$!"%$'

$'>%$&$+!" >.$*'% #%!"&

?%8,&?

%#,& $!" %$'

6?%8,&14<4'(?7@

XML web service

AB& & 6?%8,&14<4'(?7@ << $>' C'DC)5:E=:*+F?'?G@ <<%$&$? ((%.'H?!" %?A&%I((%. C'HA<&%I?@ BI

On the client side

• %&#%'

2$. &#%' #%((%&

J

• ##$%% (

&%

• #$%% 2$
• 2$%(3%$%
• + 2$, %%$@

&%. #$%((

J

&%

• =&&

Client-side concerns

(('9%%$&&%

'(&52$

%H-##%$&&%5

##(,

!%;((.$(8 :K.'%%(.

• ##' %%

*%($%1=*&(,

&%$%'%8%%

>(($(,((%%,&

Using prototype.js

%%,&(, &%$'%#

#$%'3&%'',

>((%(,$ .$>% 3%$

($&%%,&9 ,%$+!"#(

A&,&D?4<9&? D?&%%,&9?IA<&I

=&&#%,%$&H

= 9452$%9%((

%9 (#$% $%(((( 3%$ (#$%$ $

Javascript/HTML skeleton

A '(I A I A(I(A<(I A&,&D?4<9&? D?&%%,&9?IA<&I A&,&D?4<9&?I #$%9452$67LM N #$% (945&%6&%7 LM N A<&I A< I A%,I A&$,&D?$%?($D?/%? %(3D?9452$67?<I A<%,I A< '(I

4

Handling the XHR response

• ##$%% ( 5

&%

$% %$(3%&'.

• #$%+%5&%6&%7L

<<( $(%# (( (6&%&%+47@

N

Calling AJAX.Request

52$%9

=5" '%#

(#$%

#$%52$67L $( D ? &1<<#$(, %$<(%<#%<+% !"& &?@ $( OD?BD0?@ $( OD?PDJ?@ 94 D9452$6$(.L%%'&(1 +%5&% N7@ N

Parsing result values

2$$.

%%'&( #$%4$

&% %9.

%%'&%&%&

&%+4 Q 4%# &% &%!" Q &%

!"-!

$&% 3%#

%$%$

Web service output format

$$'%#

#%'

(4 Q $&%+4 %'((,

:,#%(($.#%%'&(4

!" Q $&%!".$-!

=#$(.$$(, !$$($3,*!"%%(

+!" Q $&%+4.(,%

%$'

:,% (.$%&%$

Scenario

+% %

$'

&((

&' J

• $(

#%'

(##(,&%

#%'

Handling plain text

$?J?

#$%+%5&%6&%7L

<<( $(%# (( (6&%&%+47@

N

5

Handling XML

5$

A&%I A#IA<#I A%IJA<%I A%&%I&($A<%&%I A$(IJRA<$(I A<&%I

=#%$(,.%*'&(!" #%*

%$ -!%!" %$':('S,67 %$':('S,+'67

Parsing the XML

!"($$

%$':('S,+'

(3 %$ !"@'

:4'&(1%($%##?$(?#(.

$

%$':('S,+'6?$(?7FG# (% T($ #$%%'3 << (' &#' #$%T($6('.'.47L $ (':('S,+'6'7F4G # (%T($@ N

XML example

=T($ % ( !"

#$%+%5&%6&%7L

<< !"%9 4'(D&%&%!"@ << ($%# ?$(?$ $'DT($64'(.?$(?.7@ (6?*$'?O$'7@

N

One more thing: method success

*%''#$%

',$%#(&% %'%%

='&%

%<%(%&

$&$

%#($' !" &%

5&%&&%&(,

Success or failure

*$'

A&%I

• A#IA<#I

A%IJA<%I A%&%I&($A<%&%I A$(IJRA<$(I A<&%I

($'

A&%I

• A<&%I

Handling error cases

#$%+%5&% :%6&%7L << !"%9 4'(D&%&%!"@ << 3#%%' !" #

• $

% (L<<%% << ($%# ?$(?$ $'DT($64'(.?$(?.7@ (6?*$'?O$'7@

N N

6

AJAX limitations

*%1%%(,

% ' %(&

&%%'>%

S

%%' &%4, %$

#%'%%%

=(,(,%1

+ %(%,%#$((,$&&%,(( %

(%.'%(% T%% (% %$(#((3%%8' %

Now you try it

%%#,%$

(#%'+$,

%#%&.%&

'3(( &%%&

Briefly: Web 2.0

What is Web 2.0?

*%'&%&( $ '

&'() % ?4 %?%#&&(%

'%((,%'#%' '%#

'38(%#

%&,.$.

(%.$&%&(

&%#

Who is Web 2.0? Web 2.0 buzz

Web 2.0 isn't a thing… it's a state of mind. –Andy Budd

Ajax, democracy, and not dissing users. –Paul Graham

Web 2.0 is a marketing concept used by venture capitalists and conference promoters to try to call another bubble into

• existence. –Dave Winer

Simply put, Web 2.0 is a perceived transition of the web to web applications. Web 2.0 is the next generation of technology solutions where interactive content is the norm. –Sharon Housley Web 2.0 is all about remixing, not about

• designing. The best metaphor for web 2.0

is the DJ, not the composer. Web 2.0 is a product of remix culture. – Jonathan Boutelle Web 2.0 is giving up control. It is setting the data free. – DeWitt Clinton

7

O'Reilly's definition

%3&(#%'. &((%@ &&(% % '3 '% %# %# &(#%'1(%# %$((,8$& '%&%&($.%$' '4#%''$(&(%$. ($$($. (&% %#%' ((%'4,% . %3## %$ ? $ %#&&%.?%,% &'& %%#J%( $4&

Technology of Web 2.0

5 .&%&&(%

=%'3&&(3

3%&&&

& $#%

((%,'%%'

?' $&?

*8

T(+!".**

Web 2.0 as social movement

%$%%(%%

*%(%3%''$,

$(

* %%3'3.& %%.%

/$%%%3#%,%$

+,' =8&%$%

Is Web 2.0 a fad?

• #(,H

S$ %# &

%#&&(%

*%'

,&