AJAX- The Web Development Technique

A SEMINAR REPORT ON

Guided by Prepared by
Ms. Niti A. Desai Trivedi Vighnesh K.

Co-Guided by
Mr. Bintu Kadhiwala

Sarvajanik College of Engineering And Technology, Surat

Page 1 of 27
 AJAX- The Web Development Technique

SARVAJANIK COLLEGE OF ENGINEERING AND TECHNOLOGY

Dr. R.K.DESAI ROAD, ATHWALINES,
SURAT-395001

DEPARTMENT OF COMPUTER ENGINEERING

CERTIFICATE

This is to certify that Mr./Ms. TRIVEDI VIGHNESH K. student of

B.E.IV (CO),Semester VII, Roll no. 62 has successfully conducted his/her seminar
on AJAX - The Web Development Technique
in accordance with technical and theoretical specifications under the guidance of
Ms. Niti A. Desai for the year 2006-2007.

Signature of Signature of Signature of

Guide Co-Guide DIC
(Computer Engg. Deptt.)

______________ ______________ _____________

Signature of Jury members:

____________ ____________ _____________ _______________

Page 2 of 27
 AJAX- The Web Development Technique

Acknowledgement

I am very thankful to Ms. Niti A. Desai and Mr. Bintu Khadhiwala who guided me
and suggested me many ideas. I am also thankful to other faculty members of
Computer/Information Technology Department.

I am also thankful to Mr. Keyur Rana, the DIC (Computer Engg. Dept.) of Sarvajanik
College of Engineering and Technology for his unconditional and unbiased support.

I also want to thank to all my friends who helped me a lot during preparation of my
seminar presentation.

Page 3 of 27
 AJAX- The Web Development Technique

Abstract
7
2 005 w il l de f init ely be r emem ber ed as the r i se of A J AX – the n ew
dev el o p ment te chnique tha t m an y be lie ve w il l blur t he l ine betw ee n w eb- b as ed
a nd d es k to p a pplica tions . Thi s m yst ica l acr onym , author e d by A da ptive P ath i n
m id F eb r u a r y, is a la bel f or the r ich, hi ghly r es pons ive and i nter a ctive inte r f aces
of AJ A X- e n able d applic ati ons.

I t s tands f or “A s ynchr onous Java Sc r ipt + X ML ”. A lthough w e ar e ju s t

beg in n i n g to r ea lize its f ull potent ial , the pr oven s ucc ess of f am ous A J AX b as ed
pr o jec ts lik e G oogle M aps s igni f ies that this is not t he jus t a nother m edia h y p e ,
bu t r ath er a pr omis ing tec hnolog y that ma y cha nge w eb- appl ica tions a s w e k n o w
t hem .

AJAX is used by many popular internet companies such as Google Suggests, Google and
Yahoo! maps, Amazon A9 Search, Flickr, BaseCamp, Kayak Yahoo! AJAX library. The future
of AJAX is bright. Think about the possibilities that giving User almost “live” feedback when
they interact with the web application you have Designed and developed.

Page 4 of 27
 AJAX- The Web Development Technique

INDEX

Sr. Topic Page

No. No.
1. Scenario Before AJAX 1

2. Why AJAX Evolves? 2

3. What is AJAX? 3

4. How AJAX Works? 4

5. Benefits of AJAX 6

6. When to use AJAX? 7

7. How to use AJAX? 8

8. What you should know when using AJAX Components 9

9. Challenges with AJAX 10

10. JavaScript Code 11

11. Some AJAX Security Tips: 15

12. Drawbacks of AJAX 16

13. Pioneer of AJAX 19

14. Conclusion 20

15. References 21

Page 5 of 27
 AJAX- The Web Development Technique

AJAX – The Web Development Technique

Scenario Before Ajax

There are mainly two type of Application

Page 6 of 27
 AJAX- The Web Development Technique

• Desktop Application
• Web Application

These are both familiar; desktop applications usually come on a CD (or sometimes are
downloaded from a Web site) and install completely on your computer. They might use the Internet to
download updates, but the code that runs these applications resides on your desktop. Web applications --
and there's no surprise here -- run on a Web server somewhere and you access the application with your
Web browser.
More important than where the code for these applications runs, though, is how the applications
behave and how you interact with them. Desktop applications are usually pretty fast (they're running on
your computer; you're not waiting on an Internet connection), have great user interfaces (usually
interacting with your operating system), and are incredibly dynamic. You can click, point, type, pull up
menus and sub-menus, and cruise around, with almost no waiting around.
On the other hand, Web applications are usually up-to-the-second current and they provide
services you could never get on your desktop (think about Amazon.com and eBay). However, with the
power of the Web comes waiting -- waiting for a server to respond, waiting for a screen to refresh, and
waiting for a request to come back and generate a new page. Thus in the web application it takes much
more time to complete the request and all this time what the user do is just waiting for result to arrive.
So it takes longer time to complete the request.

Why Ajax Evolves?

T he p u r s uit of a devel opment tec hnique li ke A JA X cam e f r om the need f o r

m aki n g we b appli cati ons m uch mor e usabl e and e lim inati ng thei r key dis advant ag es
i n co m p ar is o n w ith t he des ktop pla tf or m:

Page 7 of 27
 AJAX- The Web Development Technique

• P oo r I n t erac t ivit y – we b appli cati ons r e quir e t hat us er s wa it f or f ul l p ag e

r elo a d s af te r ea ch i nter a ction w ith the s er ver . Dur i ng the loa ding tim e t h ey
h av e to st ar e at a bl ank scr e en, w hic h t r emendous ly dis tur bs t he w h o le
e xp er i ence. A lt hough br oadband i nter net connect ions ar e be comin g a
s tan d ar d, w eb appl ica tions ar e a ls o becom ing incr e as ingly c omplex a n d
" h eav y " s o the over all wa iti ng tim e r ema ins r ela tivel y the s am e.
• U nre sp on s iven es s – c las si c w eb appl icat ions tr ans f er t he compl ete f or m d ata
t o th e se r ver , w hich in t ur n r ender s and s ends back t he f ull HT ML mar k u p o f
t he p ag e to the br ows er . Th i s happens dur i ng ea ch pos t back and in mo s t
c as es i s highl y ine f f ici ent, si nce only a s mal l par t of t he i nter f ac e i s act u all y
c han g e d. H owe ver , l ots of bandw idth is c onsum ed a nd the per f or m an ce is
s ig n if ic antl y hinder ed. T his lea ves user s w ith t he ide a that we b appli cati o n s
a re s lo w by nat ur e. Even w or s e, the user w il l of te n f ind the page has s cr o ll ed
t o a d i f f er ent posi tion, ca usi ng dis or ient ati on.
• S im p lis t ic In t erf ac es – the r e quir em ent f or f ull page pos t ba ck whe nev er t h e
u se r i n ter f ac e ha s to be c hanged impos es he f ty l imi tat ions on the degr ee o f
s op h i st ica tion of w eb us er int er f ac es. R i ch and s moot h inte r f aces w ith o n -
d ema n d updat e c ould only be im plem ente d us ing Fl as h te chnology. Th is
a pp r o ac h, howeve r , is impr a cti cal f or ge ner al us e s inc e it is ver y compl ex an d
r eq u ir e s a much dif f e r ent s et of ski lls than t hose poss es s ed by the t ypica l w eb
d ev el o p er . I t ca n als o caus e e nd- use r is sues as a pl ug- in is of te n r equir ed .
• L o w U sab il it y – i f a w eb a pplica tion r eloa ds the w hole page becaus e o f t h e
u se r made a new se lect ion on a f or m , they w il l get conf use d. I t is of te n th e
c as e t h at w eb appl icat ions wor k i n a conf us ing a nd esot er ic wa y becau s e t h e
w eb ap p l ica tion has bee n b ui lt ar ound t he st andar d, si mple vie w o f t h e
I n ter n e t pr otoc ols .

What is Ajax?

Of Adaptive Path made a good case for using Asynchronous JavaScript and XML and coined the
acronym "AJAX" to represent that notion. It is similar to the Remote IFrame technique in that things are
handled on the client side, but as we shall see differs in significant ways.

Page 8 of 27
 AJAX- The Web Development Technique

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming
together in powerful new ways. Ajax incorporates:
• Standards-based presentation using XHTML and CSS

• Dynamic display and interaction using the Document Object Model

• Data interchange and manipulation using XML and XSLT

• Asynchronous data retrieval using XMLHttpRequest

• JavaScript binding everything together.

W h at' s int er es ting to know is t hat AJ A X is not a ctual ly that new a s a

t ec h n o lo g y . It ha s bee n f ir s t u s ed af t er Mi cr os of t im plem ented M ic r o so f t .
X MLH TT P C O M objec ts t hat wa s par t of t he M ic r osof t ® X M L P ar s er dis tr i b u tiv e.
A s an A ct iv eX obj ect in I nter ne t Explor er 5, i t wa s use d to cr ea te the f amo u s
O ut lo o k We b Ac ces s. Y ou have pr obably s een A J AX in a ction f or qui te l ong in th e
M SD N D oc u ment ati on t ree view naviga tion. W hat i s new ac tual ly is the n a me
A JA X, w h ic h wa s w ide ly acc epted i n 2005. Ot her la bels f or the s am e te chn o lo g y
a re L o ad o n D emand, A s ynchr onous R eques ts , C all backs , O ut- of - band C al ls , etc .

W h at' s even mor e int er es ting is t hat A JA X is actua lly not a t echnol ogy. I t is
m or e l ik e a developm ent t echnique that util izes in a unique w ay a num b er o f
a lr e ad y mat u r e te chnologi es:

H TM L/ XH TM L, XM L, D HT ML , the X ml Ht tpR eques t objec t, and J avaS cr i p t.

F o r th e p u r p os es of si mpli cit y w e wi ll r ef er to it as te chnology as i t i s w id ely
a cc ep ted a s s uch and pr ovi des a u s ef ul L anguage t o dis cus s t he char a cter i st ics o f
t he s ig n i f ica n t tr end i t r epr e se nts

How Ajax Works?

The classic web application model works like this: Most user actions in the interface trigger an
HTTP request back to a web server. The server does some processing — retrieving data, crunching

Page 9 of 27
 AJAX- The Web Development Technique

numbers, talking to various legacy systems — and then returns an HTML page to the client. It’s a model
adapted from the Web’s original use as a hypertext medium, but as fans of The Elements of User
Experience know, what makes the Web good for hypertext doesn’t necessarily make it good for
software applications.

Figure 1: The traditional model for web applications (left) compared to the Ajax model (right).

This approach makes a lot of technical sense, but it doesn’t make for a great user experience.
While the server is doing its thing, what’s the user doing? That’s right, waiting. And at every step in a
task, the user waits some more.

Page 10 of 27
 AJAX- The Web Development Technique

Obviously, if we were designing the Web from scratch for applications, we wouldn’t make users
wait around. Once an interface is loaded, why should the user interaction come to a halt every time the
application needs something from the server? In fact, why should the user see the application go to the
server at all?

An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by

introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding
a layer to the application would make it less responsive, but the opposite is true.

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine —
written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both
rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax
engine allows the user’s interaction with the application to happen asynchronously — independent of
communication with the server. So the user is never staring at a blank browser window and an hourglass
icon, waiting around for the server to do something.

Page 11 of 27
 AJAX- The Web Development Technique

Figure 2: The synchronous interaction pattern of a traditional web application (top) compared with the
asynchronous pattern of an Ajax application (bottom).

Every user action that normally would generate an HTTP request takes the form of a JavaScript
call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the
server — such as simple data validation, editing data in memory, and even some navigation — the
engine handles on its own. If the engine needs something from the server in order to respond — if it’s
submitting data for processing, loading additional interface code, or retrieving new data — the engine
makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the
application.

Benefits of Ajax

T he ad vant ages of A JA X - enable d appl ica tions t o cl as si c one s can be

s um mar i zed as f oll ows :
• B et t er Perf o r m anc e an d E f f i cie nc y – t he key adva ntage of A J AX appl ica tio n s is
t he s ig n if i cantl y hi gher pe r f or mance , w hich is a r es ult of the sm all am ount o f d at a
t ran s f er r e d f r om the s er ve r . This ma kes t he A JA X tec hnique es pec iall y benef i cial
f o r d a ta- in t en s ive appli cat ions ( e.g. dis playi ng r i ch r e por ts , br ow si ng t hr ough la r g e
d ata st r u ctu r es ) as w ell as f or low - b andwi dth net wor ks .
• M ore Res p o n si ve I nt e rf aces – the i mpr oved pe r f or mance leads to m uch mo r e
r es p o n si v e int er f ace s, w hic h cr eat e the i llus ion t hat upda tes ar e ha pp en in g
i ns tan t ly . As a r es ult t he A J AX w eb appli cat ions appe ar t o beha ve m uch like th e ir
d es k to p co u n t er par ts .
• R edu ce d o r E lim i nat e d " Wait in g" T im e – i n A JA X - bas ed a pplic ati ons on ly th e
r ele v an t p ag e ele ments ar e updates , wi th t he r est of the page r ema ining unchan g e d .
T his ap p r o a ch eli mina tes the whi te s cr ee n ( or page f li cker on f as te r connect io n s )
a nd s ig n if i cant ly decr e as es t he idl e w ait ing ti me.
• I ncr ea s ed U sab i lit y – a s t he w eb appli cati on i s mor e ef f ic ient thr ough the u s e o f
A JA X, a n d the c lient can c ommuni cate wi th the ser ve r wi thout pa ge- load s , it
b eco m es p o ss ibl e to buil d som e w onder f ul us er i nter f ac es that f i t muc h bett er w ith
u se r s’ n e ed s and expec tati ons.

Page 12 of 27
 AJAX- The Web Development Technique

• U ser s Ca n W o rk w it h t h e R es t of t he Page – many A JA X - base d appl ica tions a llo w

y o u t o co n t in ue wor ki ng w it h the r es t of t he page, whi le data is be ing tr ans f er r ed in
t he b ack g r o u n d. Thi s f ur ther adds t o the unint er r upte d ma nner of the en d - u s er
e xp er i en ce. S o me comm er cia l comp onent s ( li ke t e le r ik r .a .d. c all bac k) all ow y o u t o
c al l a n u mb e r of AJ A X c allba cks si mult aneous ly .
• V alid a tio n ch ec king on compl ex input f iel ds can be per f or med by t he s er v e r ,
w ith o u t r e lo adi ng the page .

When to use Ajax?

T he f o l low ing ar e sce nar ios w her e it ’ s m or e li kely t o be benef i cia l to u s e

A JA X f u n c tio na lit y:
• H igh l y in t era ct i ve ap pl icat i ons – w her e a n appli cati on is highly i nter a cti v e, it
m ay p r o v id e benef i ts t o us e AJ A X to allow the inte r acti vity w ithout the t ime co s t
o f p ag e r e lo ads . A good e xampl e of a highl y inte r act ive w eb s ite is Googl e M ap s.
• A p a rt o f p a ges – A JAX is bes t us ed in ke y place s t hr oughout a w eb s ite wh e r e it
a dd s si g n if ic ant val ue. The r e is li ttl e or no value in us ing A JA X to pr ovid e th e
m aj o r ity o f your pa ge conte nt – you ma y los e br ow ser c ompat ibil ity m ake th e
a pp li cat io n o v er ly c omple x and caus e pr obl ems w ith t he si te be ing inde xed in
s ear ch en g i n es .
• I nt ra n et s – on an inter na l web s ite the bandw idt h i s much higher s o mor e A JA X
u sa g e can b e suc ces sf ul . I t’ s of ten t he cas e t hat i ntr anet s i nvolve w or king w it h
d ata , an d th i s i s of t en a good appl icat ion f or A JA X .
• O nli ne w iza r ds – line ar us er int er f ace s that col lec t a la r ge s er i es of data ar e a
w ell- k n o w n chall enge in web appl icat ions , and can be impl eme nted usi ng A JA X i n
a w ay w h er e the use r f eels mor e in cont r ol and t he appli cat ion is mor e r e spons iv e .
• D at a in p u t & valid at ion – be f or e A J AX i t wa s har d t o bui ld a nything r es emb l in g
r ich d ata i n p ut f or m s that gi ve c lear and accur a te f eedba ck t o us er s . Wi th AJ A X it’ s
p o ss ib l e to v a lida te the data the u s er enter s , whi le they ar e ente r ing i t. They can
t hen r e ceiv e f eedbac k ( usi ng the s er ver ’ s int ell igenc e) wi thout t he page b ein g
p o st ed b ac k . For e xample an em ail va lida tion f i eld coul d chec k the em ail addr es s i s
v ali d u si n g th e D N S, w it hout the use r knowi ng.
• D at a v is u a liz at ion – vis uali zing lar ge dat as ets on the w eb c an be dif f i cult bec au s e
t her e ’ s b een no e asy w ay t o pul l i n m or e da ta as the us er needs i t. W ith AJ A X it ’ s

Page 13 of 27
 AJAX- The Web Development Technique

p o ss ib l e to s how a vie w on t he da ta, and s im ply load mor e in as neede d. A g ain ,

G oog l e M ap s is a gr eat exam ple.

How to use Ajax?

H er e ar e s o me top ti ps f or t hings yo u shoul d cons ider w hen us ing A JA X :
• G ive v i su a l f eed b ack - When a user cl icks on som ethi ng i n the A JA X u s er
i nte r f ace, th e y nee d im medi ate vis ual f ee dback, jus t l ike whe n a butt on pr es s es in
o n a s tan d a r d f or m. I mm ediat e f e edback hel ps use r s, and makes them mo r e
e ff ic ien t .
• K ee p t h e B a c k b u t t on – make sur e that t he B ac k button i n your applic ati o n
f u ncti o n s o n e ver y page of t he s ite .
• U se l in k s f o r n avi gat ion – avoid t he te mptat ion to us e l inks as an int er f ace on y o u r
A JA X a p p lic ati on to change the s tat e of your appl icat ion. U se r s ha ve been t r ain e d
o v er te n y ear s to expe ct a l ink to “ take ” them som ew her e, s o give t hem w hat th ey
e xp ec t.
• L im it t h e s co p e of vi su al ch an ges – w hen an A J AX call r e sul ts in one or mo r e
c han g e s t o wh at the us er s ees , kee p the cha nges local to the plac e whe r e the u ser
w oul d ex p ec t them to be.
• U se h u m a n - read ab le l in ks – pe ople li ke to pa ss the addr es se s of us ef ul web p a g es
t o each o th er . M ake sur e your applic ati on s uppor ts U R Ls t hat people ca n s h ar e
e as il y , so n o t too long or c omplex.
• D on ’ t bl o a t t h e cod e – make s ur e that your a pplic ati on us es as lit tle cl ien t- s id e
s cr ip ti n g as p oss ibl e. T his r educ es dow nload ti me f or the page and al so r educes th e
p r oces s o r r eq ui r eme nts on the cli ent br ows er , so r es ults in a f as te r br o w s er
e xp er i en ce.
• F oll o w U I co n ven t ion s – A J AX is a w or ld of pos s ibil iti es, but whe n it c omes to
u se r in te r f ace t he bes t i s i nvar iabl y the f a mil iar . I f you’ r e c r eati ng a us er int er f ace
f o r a s p eci f ic f eatur e , t he pl ace to st ar t is by r epli cat ing a n exi st ing succ es sf u l
i nte r f ace an d looking at w hat your cl ient s expec t. A ls o r emem ber that al tho u g h i t
m ay b e co o l t o impl ement dr ag- and- dr op, f ew peopl e ma y r eali ze t he inte r f ace
r eli es o n it.
• D on ‘ t s cro l l – use r s l ike t o f eel i n contr ol , so i f they ha ve moved t he s cr oll bar to a
s pe cif i c p lac e, don’ t m ove the pa ge s omew her e e ls e.

Page 14 of 27
 AJAX- The Web Development Technique

• R edu ce p a g e load s – do as m uch a s you ca n t o r educ e t he num ber of page loa d s th e

u se r h as to d o to a chieve thei r goal.

What you should know when using AJAX Components

A c o mmon m is under s tandi ng is that you c an put a n AJ A X w r apper / con ta in er

a rou n d y o u r cont r ols and s uddenly your w hole a pplic ations w ill st ar t w or kin g l ik e
O ut lo o k Web Ac ces s. I t is qui te eas y t o s impl y r e nder a n A SP .N ET cont r ol a f ter a
c al lb ack r e q u es t. H owe ver , this is w her e t he s tor y begins . Whe n choo s in g
c omm er ci al component s tha t a dd s o me A JA X f ea tur es t o your we b appl icat io n y o u
h av e t o mak e s ur e t hat t hey s atis f y the f ollow ing f unc tiona l r equir e ment s:

• M ain t a in s t h e Page V iew S t at e B et w een Cal lb ack s – this is the bi ggest ob s ta cle
w he n u si n g AJ A X. S inc e no pos t backs ar e per f or med, w eb c ontr ols w ill n o t
m ai n tai n th ei r Vi ew S t ate a utoma tica lly. I t is up to the develope r or the c ommer c ial
A JA X c o mp o nent to ens ur e tha t the Vi ew St ate of a ll c ontr ols on the page r ef l ects
t hei r cu r r en t st ate. I f t his is not tr u e , your appli cati on wi ll not wor k pr ope r ly.
• P re se rv e t he N orm al Page L if ec ycle – mos t we b appl icat ions ne ed t o us e a m ix o f
A JA X cal lb ac ks and r egular pos t b a cks . A s a r es ult you have t o ma ke s ur e th at t h e
A JA X c o mp o n ent s you c hoose w il l pr oper l y subm it on pos t ba ck the c or r ect f o r m
d ata to th e ser ve r af te r numer ous cal lback upda tes have be en ma de.
• R ef lec t s C o n t rol S t at e on t h e S erver – in r ea l- li f e s cenar i os t her e is no u s e o f
s imp ly r en d er i ng c ontr ols on the page. Y ou w ill a ls o nee d to get the val ues of in p u t
c on tr o l s ( i . e. get the val ue of a t extbox or the checke d st ate of a chec kbo x ) f o r
s er v er - s id e p r oces s ing, a s we ll as t o s et the val ues w hen t he r e spons e is f o r m ed .
T her e f o r e, th e A J AX com ponents you choos e mus t be able to pr oper ly r e f lec t o n th e
s er v er t h e cu r r ent s tate of all w eb contr ols , jus t l ike thi s is done dur ing r egula r p o s t
b ack s .
• U pd a t e 3 rd P art y Con t rol s w it h C om p lex JavaS cri p t – due to t he f act that man y
A SP . N ET a p plica tion us e c ommer c ial 3r d par ty cont r ols ( e.g. pow er f ul da ta g r id s ,
t ree v ie ws , WYS I WY G e ditor s , e tc.) , your A J AX c omponent s mus t be a b le to
p r op er ly u p d a te s uch cont r ols . The bi gges t pr oblem her e i s t hat 3r d par t y co n tr o l s
o f ten use c omplex J avaS cr ipt , w hic h is damage d by univer s al A JA X

Page 15 of 27
 AJAX- The Web Development Technique

w ra p p er s /co n t ainer s . Thi s dr a wba ck make s s uch w r apper s pr ac tica lly unus abl e f o r
t he m ajo r i ty of mode r n AS P .NE T appl icat ions .
• C ro ss - B ro w s er Su p p ort – w r it ing c r oss - br ow se r com pati ble AJ A X compone n ts i s a
b ig ch a lle n g e due to t he dif f e r ent im plem enta tion of t he Xm lH ttpR e ques t o b je ct.
T her e f o r e, y o u s hould make sur e that all A J AX com ponents you choos e op er a te
p r op er ly o n v a r ious br ows er s and pla tf or ms .
• P rop er Op er at ion w h en C ook ies ar e d is ab led – anothe r r equi r eme nt r e lat ed t o
w id e ap p l icat ion com pati bili ty is the suppor t f or cookie l es s s es s ions .

Challenges with AJAX

T he b enef i ts of the AJ A X devel opment t echnique ma y l ook ver y att r act iv e,

b u t it s p r a cti cal i mple ment ati on f r om s cr atc h is usua lly a c omple x tas k, w hich o n ly
a dv an c ed d ev el oper s can under t ake. A mong the pitf a lls you w ill f ace a r e:

• Writ i ng and Mai nt ai ni ng C om p lex JavaS cr ip t – bui lding A J AX - en ab l ed

a pp li cat io n s r equi r es s ubst anti al Ja vaS cr ipt s kill s, w hich may tur n to be a pr o b lem
a la r g e n u mb er of .N et devel oper s. F ur t her mor e, t he la ck of good debugging t o o ls
f o r cli en t- s id e scr i pt ma kes the pr oce ss eve n mor e com plic ated.
• V iew St a t e Man agem en t – A S P.N ET we b contr ol s pr ope r ly mai ntai n thei r Vi ew
S tate b et we en pos t backs . The sa me, howe ver , doe s not apply f or A J AX c all b ack s .
A s a r e su l t, d evel oper s need t o f igur e a w ay f or t he pr oper ma nagem ent of the p ag e
V iew St ate .
• B rea k in g t h e Page Parad igm – A JA X r e quir es a di f f er ent w ay of t hinking a b o u t a
w eb - si te, si n ce the conce pt of a " Pa ge" i s no l onger valid. I n f a ct, AJ A X
a pp li cat io n s ma y be cons ider e d as clos er to t he de skt op- appli cati ons devel o p men t
a pp r o ac h . Th e f ac t t hat a Pa ge no longer holds c onst ant data le ads to tw o i mpo r ta n t
c on s eq u en ce s – t he B a ck but ton and book mar ki ng w il l no longe r w or k as exp ect ed .
T her e f o r e, d e veloper s need to i mple ment s peci f ic mec hanis ms f or over com ing t h es e
t wo is su e s.
• A cces s ib ili t y – the A JA X deve lopment t echnique f undam enta lly viola tes t h e
r equ ir e men t s f or ac ces s ibil ity. Si nce the page conte nt is bei ng updat ed dyna mic all y ,
t he ch an g e s may not be de tec ted by ac ces si bili ty tools l ike s cr een r ead e r s.

Page 16 of 27
 AJAX- The Web Development Technique

F u r th er mo r e , s ome acc es si bili ty s ta ndar ds pr ohibi t the use of Ja vaS cr ipt al togeth e r ,
w hi ch p r ac tica lly e lim inat es t he pos si bili ty f or us ing A JA X .
• N ew U I In t er act ivi t y Req u ir es L e arn in g – the U I r ic hnes s of A J AX - enab l ed
a pp li cat io n i ntr oduce s pr es ents us er s w it h ne w and une xpect ed f unc tion al ity .
A lth o u g h th i s i s t he ma in r eas on f or us ing A JA X in the f ir s t pla ce, it may r e q u ir e
s om e le ar n in g.

JavaScript Code

The AjaxScript.js file includes the required AJAX script. When the selected value of the country
drop-down list changes, the CountryListOnChange function is called. Now we will talk about how the
asynchronous request to the server in the CountryListOnChange function works.

1. Form the request URL with the selected country in the query string.
2. The CreateXmlHttp function (this function is explained in the earlier section, Creating an Instance of
an XMLHTTPRequest Object) creates an instance of an XMLHTTP request object. If the browser does
not support the XMLHTTP object, the XmlHttp variable will be set to null and the AJAX code will not
be executed. If the browser supports the XMLHTTP object, an asynchronous request is submitted to the
server using the XMLHTTP object.
3. The onreadystatechange property of the XMLHTTP object is used to set the response handler for the
asynchronous request. This response handler gets called for every change of readyState property of the
XMLHTTP object. In our code we set the HandleResponse function as the response handler.
4. The open method is called to initialize the request. The first parameter of the open method takes
a method definition (GET, POST, etc.), in our case its GET. The second parameter takes the request
URL. The third parameter takes a Boolean value indicating whether the request submitted is
synchronous or asynchronous. In our sample its asynchronous, so the third parameter is set to true.
Other parameters are optional; we do not use them in our application.
5. The send method submits the request to the server. The send method's behavior is determined by the
third parameter of the open method. In our case it is true, so the send function behaves as an
asynchronous function, which means that the browser calls the send function and does not wait for the
response to come back from the server.

When the response comes back from the server, the HandleResponse function (Listing 6) gets
called. In fact, the HandleResponse function is called for every change of the readyState property of the
XMLHTTP object. The readyState property can take a value from 0 to 4 (0=UNINITIALIZED,
Page 17 of 27
 AJAX- The Web Development Technique

1=LOADING, 2=LOADED, 3=INTERACTIVE, 4=COMPLETED). A value of 4 (i.e., COMPLETED)

means that receiving the response from the server is completed and the response data is available
through properties of the XMLHTTP object. For the readyState property to reach the value of 4, this
property changes the value four times (i.e., from LOADING to COMPLETED), so the HandleResponse
function gets called four times for each response. To make sure that the data is available in the
XMLHTTP object, the XmlHttp.readyState property is compared to the value of 4 in the
HandleResponse function (Listing 6).

If the readyState of the XMLHTTP instance has a value of 4, we then need to check its status
property to make sure that a valid response was received. The status property holds the HTTP status
code returned from the server. A value of 200 means that data received in the request is OK. Some of
the other popular HTTP status codes, with which most developers are familiar, are 404 (page not found),
403 (access forbidden), and 500 (internal server error). We check that the XmlHttp.status property is
200 to make sure that the response received has a status of OK. The responseXML property of the
XMLHTTP object returns an XML document. This property is useful only when the response from the
server is in XML format. In our sample, the response is a list of states in XML format. If both conditions
are satisfied (readyState is 4 and status is 200), we call the function ClearAndSetStateListItems with the
XML document as an input parameter.

JavaScript

var AjaxServerPageName;
AjaxServerPageName = "AjaxServer.aspx";

//Global XMLHTTP Request object

var XmlHttp;

//Creating and setting the instance of appropriate XMLHTTP Request object to a “XmlHttp”
variable
function CreateXmlHttp()
{
//Creating object of XMLHTTP in IE
try
{
XmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
Page 18 of 27
 AJAX- The Web Development Technique

XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");

}
catch(oc)
{
XmlHttp = null;
}
}
//Creating object of XMLHTTP in Mozilla and Safari
if(!XmlHttp && typeof XMLHttpRequest != "undefined")
{
XmlHttp = new XMLHttpRequest();
}
}

//Gets called when country combo box selection changes

function CountryListOnChange()
{
var countryList = document.getElementById("countryList");
//Getting the selected country from country combo box.
var selectedCountry = countryList.options[countryList.selectedIndex].value;

// URL to get states for a given country

var requestUrl = AjaxServerPageName + "?SelectedCountry=" +
encodeURIComponent(selectedCountry);
CreateXmlHttp();

// If browser supports XMLHTTPRequest object

if(XmlHttp)
{
//Setting the event handler for the response
XmlHttp.onreadystatechange = HandleResponse;

//Initializes the request object with GET (METHOD of posting),

//Request URL and sets the request as asynchronous.
XmlHttp.open("GET", requestUrl, true);

//Sends the request to server

XmlHttp.send(null);
}
}
//Called when response comes back from server
function HandleResponse()
{
// To make sure receiving response data from server is completed
if(XmlHttp.readyState == 4)
{
// To make sure valid response is received from the server, 200
means response received is OK
if(XmlHttp.status == 200)
{
ClearAndSetStateListItems
Page 19 of 27
 AJAX- The Web Development Technique

(XmlHttp.responseXML.documentElement);
}
else
{
alert("There was a problem retrieving data from the
server." );
}
}
}

//Clears the contents of state combo box and adds the states of currently selected country
function ClearAndSetStateListItems(countryNode)
{
var stateList = document.getElementById("stateList");
//Clears the state combo box contents.
for (var count = stateList.options.length-1; count >-1; count--)
{
stateList.options[count] = null;
}

var stateNodes = countryNode.getElementsByTagName('state');

var textValue;
var optionItem;
//Add new states list to the state combo box.
for (var count = 0; count < stateNodes.length; count++)
{
textValue = GetInnerText(stateNodes[count]);
optionItem = new Option( textValue, textValue, false, false);
stateList.options[stateList.length] = optionItem;
}
}

//Returns the node text value

function GetInnerText (node)
{
return (node.textContent || node.innerText || node.text) ;
}

When the page loads for the first time, this method populates the Country and State
DropDownList controls using the GetCountryList and GetStateList methods of CountryStateXml class.

private void Page_Load(object sender, System.EventArgs e)

{
CountryStateXml countryStateXml = new CountryStateXml();
//Getting the list of countries in an ArrayList
ArrayList countries = countryStateXml.GetCountryList();
//Populating country combo box
for(int index = 0; index < countries.Count; index++)
Page 20 of 27
 AJAX- The Web Development Technique

{
countryList.Items.Add(countries[index].ToString());
}
//Getting the list of states for a given in an ArrayList
ArrayList states = countryStateXml.GetStateList(countries[0].ToString()) ;

//Populating states combo box

for(int index = 0; index < states.Count; index++)
{
stateList.Items.Add(states[index].ToString());
}
}

Some AJAX Security Tips:

To succeed - you must start with good planning. Efforts should be focused on reducing
and simplifying the AJAX calls, and creating a standard format for responses that follows
convention (ideally XML) where possible.

Follow best practice from sites such as the Open Web Application Security Project.
This especially includes checking for Access Control and Input Validation flaws, whilst ensuring
sensitive information travels over SSL rather than in the clear.

Never assume that Server Side AJAX checks for Access Control or User Input
Validation will replace the need for final re-checking at the Server. Adding AJAX controls will
never reduce your validation workload, they will only increase it.

Never assume that Client Side obfuscation (making the JavaScript difficult to read or
decode) will protect your most important commercial secrets. Using JavaScript is a poor way to
hide programming tricks and advances from your competitors.

You must be prepared to exercise a tight reign over your development team. Wonderful
ideas using AJAX may sound compelling, but you should consider saving them for version 2,
whilst you focus on building a rock-solid version 1.

Page 21 of 27
 AJAX- The Web Development Technique

Drawbacks of Ajax

• Javascript has to be enabled. This rule out some browsing devices such as certain mobile terminals and
Lynx.
• The browser has to support the XMLHttpRequest object (or similar). Currently this is available in
Mozilla, Fire fox, Internet Explorer and Safari. Rumour has it that Opera will introduce it soon.
• Sure Ajax is cool, and developers love to play with cool technology, but Ajax is a tool not a toy. A lot of
the new Ajax applications are really just little toys, not developed for any real purpose, just experiments
in what Ajax can do or trying to fit Ajax somewhere where it isn’t needed. Toys might be fun for a little
while, but toys are not useful applications.
• The back button is a great feature of standard web site user interfaces. Unfortunately, the back button
doesn’t mesh very well with Javascript. Keeping back button functionality is a major reason not to go
with a pure Javascript web app.
• Not giving immediate visual cues for clicking widgets

If something I’m clicking on is triggering Ajax actions, you have to give me a visual cue that
something is going on. An example of this is GMail loading button that is in the top right. Whenever I
do something in GMail, a little red box in the top right indicates that the page is loading, to make up for
the fact that Ajax doesn’t trigger the normal web UI for new page loading.

• Sending sensitive information in the clear Posted 6 Jun

The security of AJAX applications is subject to the same rules as any web application, except
that once you can talk asynchronously to the server, you may tend to write code that is a very chatty in a
potentially insecure way. All traffic must be vetted to make sure security is not compromised.

• Too much code makes the browser slow

Ajax introduces a way to make much more interesting javascript applications, unfortunately
interesting often means more code running. More code running means more work for the browser,
which means that for some javascript intensive websites, especially poorly coded ones, you need to have
a powerful CPU to keep the functionality zippy. The CPU problem has actually been a limit on
javascript functionality in the past, and just because computers have gotten faster doesn’t mean the
problem has disappeared.

Page 22 of 27
 AJAX- The Web Development Technique

• Not having a plan for those who do not enable or have JavaScript

According to the w3c browser usage staticts, which if anything are skewed towared advanced
browsers, 11% of all visitors don’t have javascript. So if your web application is wholly dependent on
javascript, you have immediately cut a tenth of your audience.

• Inventing new UI conventions

A major mistake that is easy to make with Ajax is: ‘click on this non obvious thing to drive this
other non obvious result’. Sure, users who use an application for a while may learn that if you click and
hold down the mouse on this div that you can then drag it and permanently move it to this other place,
but since that’s not in the common user experience, you increase the time and difficulty of learning your
application, which is a major negative for any application.

• Changing state with links (GET requests)

As I’ve referenced in a previous posting, Ajax applications introduce lots of problems for users
who assume GET operations don’t change state. Not only do state changing links cause problems for
robots, users who are accustomed to having links drive navigation can become confused when links are
used to drive application state changes.

• Blinking and changing parts of the page unexpectedly

The first A in Ajax stands for asynchronous. The problem with asynchronous messages is that
they can be quite confusing when they are pop in unexpectedly. Asynchronous page changes should
only ever occur in narrowly defined places and should be used judiciously, flashing and blinking in
messages in areas I don’t want to concentrate on harkens back to days of the html blink tag.

• Not using links I can pass to friends or bookmark

Another great feature of websites is that I can pass URLs to other people and they can see the
same thing that I’m seeing. I can also bookmark an index into my site navigation and come back to it
later. Javascript, and thus Ajax applications, can cause huge problems for this model of use. Since the
Javascript is dynamically generating the page instead of the server, the URL is cut out of the loop and
can no longer be used as an index into navigation. This is a very unfortunate feature to lose, many Ajax
webapps thoughtfully include specially constructed permalinks for this exact reason.

Page 23 of 27
 AJAX- The Web Development Technique

• Not cascading local changes to other parts of the page

Since Ajax/Javascript gives you such specific control over page content, it’s easy to get too
focused on a single area of content and miss the overall integrated picture. An example of this is the
Backpackit title. If you change a Backpackit page title, they immediately replace the title, they even
remember to replace the title on the right, but they don’t replace the head title tag with the new page
title. With Ajax you have to think about the whole picture even with localized changes.

• Asynchronously performing batch operations

Sure with Ajax you can make edits to a lot of form fields happen immediately, but that can cause
a lot of problems. For example if I check off a lot of check boxes that are each sent asynchronously to
the server, I lose my ability to keep track of the overall state of checkbox changes and the flood of
checkbox change indications will be annoying and disconcerting.

• Scrolling the page and making me lose my place

Another problem with popping text into a running page is that it can effect the page scroll. I may
be happily reading an article or paging through a long list, and an asynchronous javascript request will
decide to cut out a paragraph way above where I’m reading, cutting my reading flow off. This is
obviously annoying and it wastes my time trying to figure out my place.

• Blocking Spidering

Ajax applications that load large amounts of text without a reload can cause a big problem for
search engines. This goes back to the URL problem. If users can come in through search engines, the
text of the application needs to be somewhat static so that the spiders can read it.

Page 24 of 27
 AJAX- The Web Development Technique

Pioneer of AJAX:

Now I describe you the websites that has implemented the AJAX in their web application:

1. Google Maps is one of the starters of implementing the ajax today most of the google
products are using ajax.

2. Websites providing email services like Gmail, Microsoft out look express also implements
ajax.

3. telerik has been recognized at the leading vendor of UI and data components for ASP.NET ,
providing professional developers with a comprehensive selection of tools for building rich
and highly interactive web applications. in telerik products like r.a.d.combobox and r.a.d.
grid were developed with internal support for AJAX. With the release of r.a.d. controls Q3
2005 and the introduction of the r.a.d. callback suite (part of r.a.d. controls). AJAX support
has been implemented across the full product line of ASP.NET components.

4. Microsoft has also released product Microsoft’s Atlas AJAX Web Development kit will have
an updated license allowing customers to run Web applications built Atlas.

5. virtual map has also implemented the AJAX,

6. DotNetNuke, the component which is built in vb.net enable to develop the websites of
enterprise level, has also implemented ajax in its new version DotNetNuke 3.4.0

Page 25 of 27
 AJAX- The Web Development Technique

Conclusion

Over the years, desktop applications tried to a specific operating system have become entrenched as
the main way to work on a computer. AJAX, a set of development techniques standardized over the
past eight years, could change all that by bringing sophisticated interfaces to Web applications. With
that, backers are hoping it can open a crack in the domains of desktop software like Microsoft’s
Office, the undisputed market leader “. Zimbra is one of a growing number of companies that are
betting that AJAX, which stands for Asynchronous JavaScript + XML, will turn out to be more than
just a catchy abbreviation. In the development style, programmers use a number of standards – based
Web entrepreneurs and established software providers are hoping that AJAX can reinviogorate the
PC software buisness by marrying the graphical user interfaces of desktop computers with the
benefits of the Web.

AJAX frees Web pages from the clukiness they suffer from by making then more interactive and so
more functional , Web developers say.

From this we can surely say that use of ajax is going to be more and more and it will change the
apporch of Web development. No doubt, there will be modification in the ajax to enhance its power
but its usage will grow more and more as time goes on.

So I can say, AJAX is without a doubt the future of the web.

Page 26 of 27
 AJAX- The Web Development Technique

Bibliography

http://www.telerik.com

http://adaptivepath.com

http://en.wikipedia.org/wiki/AJAX

http://www.ajaxseminar.com

http://www.doublecode.com/ajax-examples

http://www.clearnova.com/ajax/

Page 27 of 27