8/19/2019 WebII Presentation

1/13

Qudrat (6180)

Nasir Zaman(6199)

8/19/2019 WebII Presentation

2/13

Intro to AJAX

•

AJAX is short for Asynchronous JavaScript And XML.• The term "Aja" !as pu#ic#y stated on $% &eruary '(()  Jesse James +arrett in an artic#e tit#ed "Aja, A Ne! Approach to -e App#ications" ased on techused on +oo0#e pa0es.

• AJAX is actua##y not a techno#o0y ut a set of di1erent tech

•  2TML and 3SS can e used in comination to mar4 up aninformation. The 56M is accessed !ith JavaScript to dynamdisp#ay 7 and a##o! the user to interact !ith 7 the informatpresented. JavaScript and the XML2ttp8e/uest oject provmethod for echan0in0 data asynchronous#y et!een ro!server to avoid fu## pa0e re#oads.

https://en.wikipedia.org/wiki/Jesse_James_Garretthttp://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/https://en.wikipedia.org/wiki/Jesse_James_Garrett

8/19/2019 WebII Presentation

3/13

Classic Web Application ModelVS 

AJAX Web Application Model

• &or understandin0 AJAX #et9s understand c#asapp#ication mode# and AJAX !e app#ication mod

• The 3#assica# !e app#ication is Synchronous.

• -hi#e AJAX !e app#ication mode# is Asynchrono

8/19/2019 WebII Presentation

4/13

Syncrono!s (Classical Web Application

•  A synchronous re/uest #oc4s the c#ient unti# ocomp#etes.

•   ;n such case the javascript en0ine of the r#oc4ed.

•  i.e. ro!ser is not responsive

8/19/2019 WebII Presentation

5/13

 Syncrono!s

As you can see in the aove ima0e fu## pa0e isrefreshed at re/uest time and user is #oc4edunti# re/uest comp#etes.

8/19/2019 WebII Presentation

6/13

8/19/2019 WebII Presentation

7/13

Asyncrono!s (AJAX WebApplication Model)

As you can see in the aove ima0e fu## pa0e isnot refreshed at re/uest time and user 0etsresponse from the aja en0ine.

8/19/2019 WebII Presentation

8/13

"et#s a&e a loo' anoter $too

8/19/2019 WebII Presentation

9/13

AJAX 8?Q@?ST• AJAX ro!ser is one of the #ar0est hurd#es for aspirin0 Aja pro0ramme

• A## the avai#a#e ro!sers cannot support AJAX. 2ere is a #ist of major that support AJAX.

• Moi##a &irefo $.( and aove Netscape version B.$ and aove App#e Sand aove Microsoft ;nternet ?p#orer ) and aove Con/ueror 6pera Baove.

• ;t !ou#d e nice if a## the !e ro!sers re/uired the same Javascript coAja ut actua##y it isn9t so.

• So to so#ve this !e need to create an important Aja oject !e are 0oito use a specia# pro0rammin0 techni/ue 4no!n as "try and catch".

•

8/19/2019 WebII Presentation

10/13

•

;n the fo##o!in0 code !e are 0oin0 to "try" threedi1erent !ays to ma4e a ne! XML2ttp8e/uest o?very time !e fai# and 0et an error !e !i## catcherror and try the net a di1erent command.

•  ;f our "try" is successfu# then the "catch" code !

e run ecause it is on#y used !hen there is an e

8/19/2019 WebII Presentation

11/13

8/19/2019 WebII Presentation

12/13

• ;n the aove JavaScript code !e try three times to ma4e ourXML2ttp8e/uest oject.

• 6ur :rst attempt, ajaxRequest = new XMLHttpRequest();

• ;t is for 6pera %.(E &irefo and Safari ro!sers. ;f it fai#s !e trytimes to ma4e the correct oject for an ;nternet ?p#orer ro!se

  ajaxRequest = new ActiveXObject("Msxml2XMLH!!");

  ajaxRequest = new ActiveXObject("Mic#$s$%tXMLH!!");• ;f it doesnFt !or4 then !e can use a very outdated ro!ser that

support XMLHttpRequest  !hich a#so means it doesnFt support A

• Most #i4e#y thou0h our varia#e ajaxRequest  !i## no! e set to!hatever XMLHttpRequest  standard the ro!ser uses and !e casendin0 data to the server.

8/19/2019 WebII Presentation

13/13

XML2ttp8e/uest Methods

• abort()

3ance#s the current re/uest.

• etAll*esponse+eaders()

  8eturns the comp#ete set of 2TT> headers as a strin0.

• et*esponse+eader( eader,a-e )

• 8eturns the va#ue of the speci:ed 2TT> header.

• open( -etod. /*" )

• open( -etod. /*". async )

• open( -etod. /*". async. !ser,a-e )

• open( -etod. /*". async. !ser,a-e. pass$ord )

• Speci:es the method @8L and other optiona# attriutes of a re/