Introduction to Ajax

Introduction to Ajax
Sang Shin Sang Shin
Java Technology Architect Java Technology Architect
Sun Microsystems, Inc. Sun Microsystems, Inc.
sang.shin@sun.com sang.shin@sun.com
www.javapassion.com www.javapassion.com
2
Agenda
1.What is Rich User Experience?
2.Rich Internet Application (RIA) Technologies
3.AJAX Real!li"e exa#ples $ Usage cases
%.What is an& Wh' AJAX?
(.Technologies )se& in AJAX
*.Anato#' o" AJAX operation
+.X,-.ttpRe/)est ,etho&s $ 0roperties
1.23, A0Is $ Inner.T,-
4.AJAX 5ec)rit'
16.Ja7a5cript &e8)gging tools
3
Topics Covered in Other Presentations
AJAX Tool9its $ :ra#e;or9s
J53< (Ja7a5cript 38=ect <otation)
2o=o Tool9it
2WR (2irect We8 Re#oting)
AJAX!ena8le& J5: >o#ponents
?oogle We8 Tool9it (?WT)
=,a9i
0ho8os (,@>!8ase& ser7er!si&e scripting)
A=ax an& 0ortletA0ortal
Wic9et an& 5hale (as AJAX!a;are We8 applicaion
"ra#e;or9s)
Ja7a5cript 0rogra##ing Best 0ractices

1. Rich User Experience
1. Rich User Experience
for We App!ication
for We App!ication
5
Rich User Experience
Ta9e a loo9 at a t'pical &es9top application
(5prea&sheet appC etc.)
The progra# responses int)iti7el' an& /)ic9l'
The progra# gi7es a )ser #eaning")l "ee&8ac9Ds
instantl'
>
A cell in a sprea&sheet changes color ;hen 'o) ho7er 'o)r
#o)se o7er it
>
Icons light )p as #o)se ho7ers the#
Things happen nat)rall'
>
<o nee& to clic9 a 8)tton or a lin9 to trigger an e7ent
6
Characteristics of Conventiona! We
App!ications "Apps #ithout Ajax$
E>lic9C ;aitC an& re"reshF )ser interaction
>
An' co##)nication ;ith the ser7er "orces a page re"resh
5'nchrono)s Ere/)estAresponseF co##)nication
#o&el
>
The )ser has to ;ait "or the response
0age!&ri7en Wor9"lo; is 8ase& on pages
>
0age!na7igation logic is &eter#ine& 8' the ser7er
7
Issues of Conventiona! We App!ication
Interr)ption o" )ser operation
> Users cannot per"or# an' operation ;hile ;aiting "or a response
-oss o" operational context &)ring re"resh
> -oss o" in"or#ation on the screen
> -oss o" scrolle& position
<o instant "ee&8ac9Ds to )ser acti7ities
> A )ser has to ;ait "or the next page
>onstraine& 8' .T,-
> -ac9 o" )se")l ;i&gets
These are the reasons ;h' Rich Internet Application (RIA)
technologies ;ere 8orn.
%. Rich Internet
%. Rich Internet
App!ication "RIA$
App!ication "RIA$
Techno!ogies
Techno!ogies
9
Rich Internet App!ication "RIA$
Techno!ogies
Applet
,acro#e&ia :lashAAir
Ja7a We85tart
2.T,-
2.T,- ;ith .i&&en I:ra#e
A=ax
5li7erlight (Win&o;s onl')
Ja7a:X (Ja7a 0lat"or#)
10
App!et
0ros
>
>an )se ")ll Ja7a A0Is
>
>)sto# &ata strea#ingC graphic #anip)lationC threa&ingC an&
a&7ance& ?UIs
>
Well!esta8lishe& sche#e
>ons
>
>o&e &o;nloa&ing ti#e co)l& 8e signi"icant
>
Relia8ilit' concern ! a #al!")nctioning applet can crash a
8ro;ser
There is rene;e& interest in appletC ho;e7erC as a
RIA technolog' ;ith Ja7a 5E 16 Up&ate 16
>
5ol7es ol& applet pro8le#s
11
&acro'edia (!ash
2esigne& "or pla'ing interacti7e #o7ies originall'
0rogra##e& ;ith Action5cript
I#ple#entation exa#ples
>
,acro#e&ia :lex
>
-asGlo s)ite (open so)rce)
0ros
>
?oo& "or &ispla'ing 7ector graphics
>ons
>
Bro;ser nee&s a :lash pl)g!in
>
Action5cript is proprietar'
12
)ava We*tart
2es9top application &eli7ere& o7er the net
>
-e7erages the strengths o" &es9top apps an& applet
0ros
>
2es9top experience once loa&e&
>
-e7erages Ja7a technolog' to its ")llest extent
>
2isconnecte& operation is possi8le
>
Application can 8e &igitall' signe&
>
Incre#ental re&eplo'#ent
>ons
>
3l& JRE!8ase& s'ste# &o not ;or9
>
:irst!ti#e &o;nloa& ti#e co)l& 8e still signi"icant
13
+,T&- "+.na'ic ,T&-$
2.T,- H Ja7a5cript I 23, I >55
Use& "or creating interacti7e applications
<o as'nchrono)s co##)nicationC ho;e7er
>
:)ll page re"resh still re/)ire&
>
Reason ;h' it has onl' a li#ite& s)ccess
14
+,T&- #ith ,idden I(ra'e
I:ra#e ;as intro&)ce& as a progra##a8le la'o)t to
a ;e8 page
>
An I:ra#e is represente& as an ele#ent o" a 23, tree
>
Jo) can #o7e itC resiGe itC e7en hi&e it ;hile the page is
7isi8le
An hi&&en I:ra#e can a&& as'nchrono)s 8eha7ior
>
The 7isi8le )ser experience is )ninterr)pte& K operational
context is not lost
It is still a hac9
15
A)A/
2.T,- pl)s As'nchrono)s co##)nication
capa8ilit' thro)gh X,-.ttpRe/)est
0ros
>
E#erges as a 7ia8le RIA technolog'
>
?oo& in&)str' #o#ent)#
>
5e7eral tool9its an& "ra#e;or9s are e#erging
>
<o nee& to &o;nloa& co&e $ no pl)g!in re/)ire&
>ons
>
5till so#e 8ro;ser inco#pati8ilit'
>
Ja7a5cript is har& to #aintain an& &e8)g
AJAX!ena8le& J5: co#ponents ;ill help

0. A)A/1
0. A)A/1
Rea!2!ife Exa'p!es 3
Rea!2!ife Exa'p!es 3
Usecases
Usecases
17
Rea!2-ife Exa'p!es of A)A/ Apps
?oogle #aps
>
httpAA#aps.google.co#A
?oolgle 5)ggest
>
httpAA;;;.google.co#A;e8hp?co#pleteH1$hlHen
<et:lix
> httpAA;;;.net"lix.co#ABro;se5election?ln9ctrHn#h8s
?#ail
>
httpAAg#ail.co#A
Jahoo ,aps (ne;)
>
httpAA#aps.'ahoo.co#A
,an' #ore are popping e7er';here

A)A/1
A)A/1
+e'o
+e'o
4oog!e &aps5
4oog!e &aps5
6ahoo &aps 7e#
6ahoo &aps 7e#
19
8e. Aspects of 4oog!e &aps
A )ser can &rag the entire #ap 8' )sing the #o)se
>
Instea& o" clic9ing on a 8)tton or so#ething
>
The action that triggers the &o;nloa& o" ne; #ap &ata is not
a speci"ic clic9 on a lin9 8)t a #o7ing the #ap aro)n& ;ith a
#o)se
Behin& the scene ! AJAX is )se&
>
The #ap &ata is re/)este& an& &o;nloa&e& as'nchrono)sl'
in the 8ac9gro)n&
3ther parts o" the page re#ains the sa#e
>
<o loss o" operational context
20
Usage cases for A)A/
Real!ti#e ser7er!si&e inp)t "or# &ata 7ali&ation
>
User I2sC serial n)#8ersC postal co&es
>
Re#o7es the nee& to ha7e 7ali&ation logic at 8oth client si&e
"or )ser responsi7eness an& at ser7er si&e "or sec)rit' an&
other reasons
A)to!co#pletion
>
E#ail a&&ressC na#eC or cit' na#e #a' 8e a)to!co#plete& as
the )ser t'pes
,aster &etail operation
>
Base& on a )ser selectionC #ore &etaile& in"or#ation can 8e
"etche& an& &ispla'e&
21
Usage cases for A)A/
A&7ance& ?UI ;i&gets an& controls
>
>ontrols s)ch as tree controlsC #en)sC an& progress 8ars
#a' 8e pro7i&e& that &o not re/)ire page re"reshes
Re"reshing &ata
>
.T,- pages #a' poll &ata "ro# a ser7er "or )p!to!&ate &ata
s)ch as scoresC stoc9 /)otesC ;eatherC or application!speci"ic
&ata

+e'o1 A)A/ *a'p!e Apps
+e'o1 A)A/ *a'p!e Apps
javapassion.co'9handson!a
javapassion.co'9handson!a
s9ajaxasics%9:Exercise;1
s9ajaxasics%9:Exercise;1
23
+e'o *cenario
R)n sa#ple AJAX applications ;ithin <etBeans I2E
>
A)to co#pletion
>
2ata 7ali&ation
>
0rogress 8ar
Jo) can tr' this &e#o 'o)rsel"
>
These applications are pro7i&e& as part o" the han&s!on la8.
>
;;;.=a7apassion.co#Ahan&sonla8sA%2(+La=ax8asics2.Gip

<. A)A/1
<. A)A/1
What is and Wh. A)A/=
What is and Wh. A)A/=
25
Wh. A)A/=
Int)iti7e an& nat)ral )ser interaction
>
<o clic9ing re/)ire&
>
,o)se #o7e#ent is a s)""icient e7ent trigger
M0artial screen )p&ateM replaces the Mclic9C ;aitC an&
re"reshM )ser interaction #o&el
>
3nl' )ser inter"ace ele#ents that contain ne; in"or#ation are
)p&ate& as'nchrono)sl' (no interr)ption to )ser operation)
>
The rest o" the )ser inter"ace re#ains &ispla'e& ;itho)t
interr)ption (no loss o" operational context)
2ata!&ri7en (as oppose& to page!&ri7en)
> UI is han&le& in the client ;hile the ser7er pro7i&es &ata
26
Wh. A)A/=
As'nchrono)s co##)nication replaces
Ms'nchrono)s re/)estAresponse #o&el.M
>
A )ser can contin)e to )se the application ;hile the client
progra# re/)ests in"or#ation "ro# the ser7er in the
8ac9gro)n&
>
5eparation o" &ispla'ing "ro# &ata "etching
27
Uninterrupted
user operation
while data is
being fetched
Interrupted user
operation while
the data is being
fetched
28

>. A)A/1
>. A)A/1
Techno!ogies Used
Techno!ogies Used
in A)A/
in A)A/
30
Techno!ogies Used In A)A/
Ja7ascript
> -oosel' t'pe& scripting lang)age
> Ja7a5cript ")nction is calle& ;hen an e7ent in a page occ)rs
> ?l)e "or the ;hole AJAX operation
23,
> Represents the str)ct)re o" X,- an& .T,- &oc)#ents
> A0I "or accessing an& #anip)lating str)ct)re& &oc)#ents
>55
> Allo;s "or a clear separation o" the presentation st'le "ro# the
content an& #a' 8e change& progra##aticall' 8' Ja7a5cript
X,-.ttpRe/)est
> Ja7a5cript o8=ect that per"or#s as'nchrono)s interaction ;ith the
ser7er
31
/&-,ttpRe?uest
Ja7a5cript o8=ect
A&opte& 8' #o&ern 8ro;sers
>
,oGillaNC :ire"oxC 5a"ariC an& 3pera
>o##)nicates ;ith a ser7er 7ia stan&ar& .TT0
?ETA035T
X,-.ttpRe/)est o8=ect ;or9s in the 8ac9gro)n& "or
per"or#ing as'nchrono)s co##)nication ;ith the
8ac9en& ser7er
>
2oes not interr)pt )ser operation
32
*erver2*ide A)A/ Re?uest
Processing
5er7er progra##ing #o&el re#ains the sa#e
>
It recei7es stan&ar& .TT0 ?ETsA035Ts
>
>an )se 5er7letC J50C J5:C ;hate7er ;e8 technologies...
With #inor ca7eats
>
>o)l& ha7e #ore "re/)ent an& "iner!graine& re/)ests "ro#
clients (&esign iss)e)
>
Response content t'pe can 8e
>textAx#l
>textAplain
>textA=son
>textA=a7ascript

@. A)A/1
@. A)A/1
Anato'. Of
Anato'. Of
A)A/ Interaction
A)A/ Interaction
using A+ata Ba!idationC
using A+ata Ba!idationC
*a'p!e App!ication
*a'p!e App!ication

34
Anato'. of an A)A/ Interaction
"+ata Ba!idation Exa'p!e$
35
*teps of A)A/ Operation
1. A client e7ent occ)rs
2. An X,-.ttpRe/)est o8=ect is create&
3. The X,-.ttpRe/)est o8=ect is con"ig)re&
%. The X,-.ttpRe/)est o8=ect #a9es an as'nc. re/)est
(. The @ali&ate5er7let ret)rns an X,- &oc)#ent
containing the res)lt
*. The X,-.ttpRe/)est o8=ect calls the call8ac9() ")nction
an& processes the res)lt
+. The .T,- 23, is )p&ate&
36
1. A C!ient event occurs
A Ja7a5cript ")nction is calle& as the res)lt o" an
e7ent
Exa#ple 7ali&ateUserI&() Ja7a5cript ")nction is
#appe& as a e7ent han&ler to a on9e')p e7ent on
inp)t "or# "iel& ;hose i& is set to E)seri&F
Oinp)t t'peHMtextM
siGeHM26M
i&HM)seri&M
na#eHMi&M
on9e')pHM7ali&ateUserI&()PMQ
37
%. An /&-,ttpRe?uest oject is
created
7ar re/P
")nction initRe/)est() R
i" (;in&o;.X,-.ttpRe/)est) R
re/ H ne; X,-.ttpRe/)est()P
S else i" (;in&o;.Acti7eX38=ect) R
isIE H tr)eP
re/ H ne; Acti7eX38=ect(M,icroso"t.X,-.TT0M)P
S
S
")nction 7ali&ateUserI&() R
initRe/)est()P
re/.onrea&'statechange H processRe/)estP
i" (Ttarget) target H &oc)#ent.getEle#entB'I&(M)seri&M)P
7ar )rl H M7ali&ate?i&HM I escape(target.7al)e)P
re/.open(M?ETMC )rlC tr)e)P
re/.sen&(n)ll)P
S
38
0. An /&-,ttpRe?uest oject is
configured #ith a ca!!acD function
7ar re/P
")nction initRe/)est() R
i" (;in&o;.X,-.ttpRe/)est) R
re/ H ne; X,-.ttpRe/)est()P
S else i" (;in&o;.Acti7eX38=ect) R
isIE H tr)eP
re/ H ne; Acti7eX38=ect(M,icroso"t.X,-.TT0M)P
S
S
")nction 7ali&ateUserI&() R
initRe/)est()P
re/.onrea&'statechange H processRe/)estP AA call8ac9 ")nction
i" (Ttarget) target H &oc)#ent.getEle#entB'I&(M)seri&M)P
7ar )rl H M7ali&ate?i&HM I escape(target.7al)e)P
re/.open(M?ETMC )rlC tr)e)P
re/.sen&(n)ll)P
S
39
<. /&-,ttpRe?uest oject 'aDes an as.nc.
re?uest
")nction initRe/)est() R
i" (;in&o;.X,-.ttpRe/)est) R
re/ H ne; X,-.ttpRe/)est()P
S else i" (;in&o;.Acti7eX38=ect) R
isIE H tr)eP
re/ H ne; Acti7eX38=ect(M,icroso"t.X,-.TT0M)P
S
S
")nction 7ali&ateUserI&() R
initRe/)est()P
re/.onrea&'statechange H processRe/)estP
i" (Ttarget) target H &oc)#ent.getEle#entB'I&(M)seri&M)P
7ar )rl H M7ali&ate?i&HM I escape(target.7al)e)P
re/.open(M?ETMC )rlC tr)e)P
re/.sen&(n)ll)P
S
UR- is set to 7ali&ate?i&Hgreg
40
>. The Ba!idate*erv!et returns an /&-
docu'ent containing the resu!ts "*erver$
p)8lic 7oi& &o?et(.ttp5er7letRe/)est re/)estC .ttp5er7letResponse response)
thro;s I3ExceptionC 5er7letException R

5tring targetI& H re/)est.get0ara#eter(Mi&M)P
i" ((targetI& TH n)ll) $$ Tacco)nts.containsUe'(targetI&.tri#())) R
response.set>ontentT'pe(MtextAx#lM)P
response.set.ea&er(M>ache!>ontrolMC Mno!cacheM)P
response.getWriter().;rite(MO7ali&Qtr)eOA7ali&QM)P
S else R
response.set>ontentT'pe(MtextAx#lM)P
response.set.ea&er(M>ache!>ontrolMC Mno!cacheM)P
response.getWriter().;rite(MO7ali&Q"alseOA7ali&QM)P
S
S
41
@. /&-,ttpRe?uest oject ca!!s ca!!acD"$
function and processes the resu!t
The X,-.ttpRe/)est o8=ect ;as con"ig)re& to call
the processRe/)est() ")nction ;hen there is a state
change to the rea&'5tate o" the X,-.ttpRe/)est
o8=ect
")nction processRe/)est() R
i" (re/.rea&'5tate HH %) R
i" (re/.stat)s HH 266) R
7ar #essage H ...P


...
42
E. The ,T&- +O& is updated
Ja7a5cript technolog' gets a re"erence to an'
ele#ent in a page )sing 23, A0I
The reco##en&e& ;a' to gain a re"erence to an
ele#ent is to call
>
&oc)#ent.getEle#entB'I&(M)serI&,essageM)C ;here
M)serI&,essageM is the I2 attri8)te o" an ele#ent appearing in
the .T,- &oc)#ent
Ja7a5cript technolog' #a' no; 8e )se& to #o&i"'
the ele#entDs attri8)tesP #o&i"' the ele#entDs st'le
propertiesP or a&&C re#o7eC or #o&i"' chil& ele#ents
43
1. Oscript t'peHMtextA=a7ascriptMQ
2. ")nction set,essageUsing23,(#essage) R
3. 7ar )ser,essageEle#ent H &oc)#ent.getEle#entB'I&(M)serI&,essageM)P
%. 7ar #essageTextP
(. i" (#essage HH M"alseM) R
*. )ser,essageEle#ent.st'le.color H Mre&MP
+. #essageText H MIn7ali& User I&MP
1. S else R
4. )ser,essageEle#ent.st'le.color H MgreenMP
16. #essageText H M@ali& User I&MP
11. S
12. 7ar #essageBo&' H &oc)#ent.createText<o&e(#essageText)P
13. AA i" the #essageBo&' ele#ent has 8een create& si#ple replace it other;ise
1%. AA appen& the ne; ele#ent
1(. i" ()ser,essageEle#ent.chil&<o&esV6W) R
1*. )ser,essageEle#ent.replace>hil&(#essageBo&'C
1+. )ser,essageEle#ent.chil&<o&esV6W)P
11. S else R
14. )ser,essageEle#ent.appen&>hil&(#essageBo&')P
26. S
21.S
22.OAscriptQ
23.O8o&'Q
2%. O&i7 i&HM)serI&,essageMQOA&i7Q
2(.OA8o&'Q

E. A)A/1
E. A)A/1
/&-,ttpRe?uest
/&-,ttpRe?uest
&ethods 3 Properties
&ethods 3 Properties
45
/&-,ttpRe?uest &ethods
open(E.TT0 #etho&FC EUR-FC s'nAas'n)
>
Assigns .TT0 #etho&C &estination UR-C #o&e
sen&(content)
>
5en&s re/)est incl)&ing string or 23, o8=ect &ata
a8ort()
>
Ter#inates c)rrent re/)est
getAllResponse.ea&ers()
>
Ret)rns hea&ers (la8els I 7al)es) as a string
getResponse.ea&er(Ehea&erF)
>
Ret)rns 7al)e o" a gi7en hea&er
setRe/)est.ea&er(Ela8elFCF7al)eF)
>
5ets Re/)est .ea&ers 8e"ore sen&ing
46
/&-,ttpRe?uest Properties
onrea&'statechange
> 5et ;ith an Ja7a5cript e7ent han&ler that "ires at each state
change
rea&'5tate K c)rrent stat)s o" re/)est
> 6 H )ninitialiGe&
> 1 H loa&ing
> 2 H loa&e&
> 3 H interacti7e (so#e &ata has 8een ret)rne&)
> % H co#plete
stat)s
>
.TT0 5tat)s ret)rne& "ro# ser7er 266 H 3U
47
/&-,ttpRe?uest Properties
responseText
>
5tring 7ersion o" &ata ret)rne& "ro# the ser7er
responseX,-
>
X,- &oc)#ent o" &ata ret)rne& "ro# the ser7er
stat)sText
>
5tat)s text ret)rne& "ro# ser7er

F. A)A/1 +O& API 3
F. A)A/1 +O& API 3
Inner,T&-
Inner,T&-
49
Gro#ser and +O&
Bro;sers #aintain an o8=ect representation o" the
&oc)#ents 8eing &ispla'e&
>
In the "or# o" 2oc)#ent 38=ect ,o&el (23,)
>
It is rea&il' a7aila8le as &oc)#ent Ja7a5cript o8=ect
A0Is are a7aila8le that allo; Ja7a5cript co&e to
#o&i"' the 23, progra##aticall'
50
+O& APIs vs. inner,T&-
23, A0Is pro7i&e a #eans "or Ja7a5cript co&e to
na7igateA#o&i"' the content in a page
")nction set,essageUsing23,(#essage) R
7ar )ser,essageEle#ent H &oc)#ent.getEle#entB'I&(M)serI&,essageM)P
7ar #essageTextP
i" (#essage HH M"alseM) R
)ser,essageEle#ent.st'le.color H Mre&MP
#essageText H MIn7ali& User I&MP
S else R
)ser,essageEle#ent.st'le.color H MgreenMP
#essageText H M@ali& User I&MP
S
7ar #essageBo&' H &oc)#ent.createText<o&e(#essageText)P
i" ()ser,essageEle#ent.chil&<o&esV6W) R
)ser,essageEle#ent.replace>hil&(#essageBo&'C
)ser,essageEle#ent.chil&<o&esV6W)P
S else R
)ser,essageEle#ent.appen&>hil&(#essageBo&')P
S
S
51
+O& APIs vs. inner,T&-
Using inner.T,- is easier 5ets or retrie7es the .T,-
8et;een the start an& en& tags o" the o8=ect
")nction set,essageUsing23,(#essage) R
7ar )ser,essageEle#ent H &oc)#ent.getEle#entB'I&(M)serI&,essageM)P
7ar #essageTextP
i" (#essage HH M"alseM) R
)ser,essageEle#ent.st'le.color H Mre&MP
#essageText H MIn7ali& User I&MP
S else R
)ser,essageEle#ent.st'le.color H MgreenMP
#essageText H M@ali& User I&MP
S
)ser,essageEle#ent.inner.T,- H #essageTextP
S

+o I ,ave To Use
+o I ,ave To Use
/'!,ttpRe?uest to
/'!,ttpRe?uest to
Write Ajax app!ication=
Write Ajax app!ication=
53
Ajax (ra'e#orDs and Too!Dits
In generalC 'o) are going to )se A=ax "ra#e;or9s
an& tool9its
These tool9its pro7i&e higher!le7el A0IC ;hich hi&es
the co#plexit' o" X#l.ttpRe/)est
H. A)A/ *ecurit.
H. A)A/ *ecurit.
55
A)A/ *ecurit.1 *erver *ide
AJAX!8ase& We8 applications )se the sa#e ser7er!
si&e sec)rit' sche#es o" reg)lar We8 applications
>
Jo) speci"' a)thenticationC a)thoriGationC an& &ata protection
re/)ire#ents in 'o)r ;e8.x#l "ile (&eclarati7e) or in 'o)r
progra# (progra#atic)
AJAX!8ase& We8 applications are s)8=ect to the
sa#e sec)rit' threats as reg)lar We8 applications
>
>ross!site scripting
>
In=ection "la;
56
A)A/ *ecurit.1 C!ient *ide
Ja7a5cript co&e is 7isi8le to a )serAhac9er
>
.ac9er can )se the Ja7a5cript co&e "or in"erring ser7er si&e
;ea9nesses
>
38")stication or co#pression can 8e )se&
Ja7a5cript co&e is &o;nloa&e& "ro# the ser7er an&
exec)te& (Ee7alF) at the client
>
>an co#pro#ise the client 8' #al!inten&e& co&e
2o;nloa&e& Ja7a5cript co&e is constraine& 8'
san&!8ox sec)rit' #o&el
>
>an 8e relaxe& "or signe& Ja7a5cript
57
Reco''endations fro' OWA*P
Use .innerText instea& o" .inner.t#l
2onDt )se e7al
Enco&e &ata 8e"ore its )se
A7oi& serialiGation
A7oi& 8)il&ing X,- &'na#icall'
1I. )ava*cript +eve!op'ent
1I. )ava*cript +eve!op'ent
Too!s "Tr. these too!s #ith
Too!s "Tr. these too!s #ith
AA)A/ Gasics 3 +ev.
AA)A/ Gasics 3 +ev.
Too!sC ,ands2on -a$
Too!sC ,ands2on -a$
59
+eve!op'ent Too!s for 7etGeans I+E
B)il&ing AJAX Applications o7er <etBeans is not that
#)ch &i""erent "ro# 8)il&ing reg)lar We8 applications
<etBeans s)pports Ja7a5cript e&itor an& &e8)gger
60
+eve!op'ent Too!s on &oJi!!a
Gro#ser
,oGilla :ireB)g &e8)gger (a&&!on)
>
This is the #ost co#prehensi7e an& #ost )se")l Ja7a5cript
&e8)gger
>
This tool &oes things all other tools &o an& #ore
,oGilla Ja7a5cript console
,oGilla 23, inspector (co#es ;ith :ire"ox pac9age)
,oGilla @en9#an Ja7a5cript &e8)gger (a&&!on)
,oGilla -i7e.TT0.ea&ers .TT0 #onitor (si#ilar to
<etBeans .TT0 #onitor)
61
&oJi!!a (ireGug +eugger
5p' on X,-.ttpRe/)est tra""ic
Ja7a5cript &e8)gger "or stepping thro)gh co&e one line at
a ti#e
Inspect .T,- so)rceC co#p)te& st'leC e7entsC la'o)t an&
the 23,
5tat)s 8ar icon sho;s 'o) ;hen there is an error in a ;e8
page
A console that sho;s errors "ro# Ja7a5cript an& >55
-og #essages "ro# Ja7a5cript in 'o)r ;e8 page to the
console (8'e 8'e Malert &e8)ggingM)
An Ja7a5cript co##an& line (no #ore M=a7ascriptM in the
UR- 8ar)

11. A)A/1
11. A)A/1
Current Issues 3 (utures
Current Issues 3 (utures
63
Current Issues of A)A/
>o#plexit' is increase&
>
5er7er si&e &e7elopers ;ill nee& to )n&erstan& that
presentation logic ;ill 8e re/)ire& in the .T,- client pages as
;ell as in the ser7er!si&e logic
>
0age &e7elopers #)st ha7e Ja7a5cript technolog' s9ills
AJAX!8ase& applications can 8e &i""ic)lt
to &e8)gC testC an& #aintain
>
Ja7a5cript is har& to test ! a)to#atic testing is har&
>
Wea9 #o&)larit' in Ja7a5cript ! na#espace collision possi8le
>
-ac9 o" &esign patterns or 8est practice g)i&elines 'et
Tool9itsA:ra#e;or9s still #at)ring
64
Current Issues of A)A/
<o stan&ar&iGation o" the X,-.ttpRe/)est 'et
>
:)t)re 7ersion o" IE ;ill a&&ress this
<o s)pport o" X,-.ttpRe/)est in ol& 8ro;sers
>
I"ra#e ;ill help
Ja7a5cript technolog' &epen&enc' $ inco#pati8ilit'
>
,)st 8e ena8le& "or applications to ")nction
>
5till so#e 8ro;ser inco#pati8ilities
Ja7a5cript co&e is 7isi8le to a hac9er
>
0oorl' &esigne& Ja7a5cript co&e can in7ite sec)rit' pro8le#
65
Gro#sers Which *upport
/&-,ttpRe?uest
,oGilla :ire"ox 1.6 an& a8o7e
<etscape 7ersion +.1 an& a8o7e
Apple 5a"ari 1.2 an& a8o7e.
,icroso"t Internet Exporer ( an& a8o7e
Uon/)eror
3pera +.* an& a8o7e
66
A)A/ (utures
AJAX!ena8le& J5: >o#ponent li8raries
5tan&ar&iGation o" X,-.ttpRe/)est
Better 8ro;ser s)pport
Better an& 5tan&ar&iGe& :ra#e;or9 s)pport
,ore 8est practice g)i&elines in the progra##ing
#o&el

A)A/ Gasics
A)A/ Gasics
Sang Shin Sang Shin
Java Technology Architect Java Technology Architect
Sun Microsystems, Inc. Sun Microsystems, Inc.
sang.shin@sun.com sang.shin@sun.com
www.javapassion.com www.javapassion.com