www.uttarainfo.

com
Ajax How To
Preface
The purpose of this document is to assist in integrating AJAX functionality into an application.

Introduction
AJAX is an acronym for - Asynchronous JavaScript and XML.
It is used for exchanging data asynchronously between browser and server to avoid full page reloads (behind the scenes and in parallel).

Technical details
AJAX request-response cycle consists of the following phases called readyState!s". They are o o o o o # $ %&S'&T $ The o()ect has (een constructed * $ +,'&'- $ Server connection esta(lished . $ /'A-'0S10'2'34'- $5inal request headers received 6including redirects7 8 $ L+A-3&9 $ The response entity (ody is (eing received. : $-+&' $ The data transfer has (een completed or something went wrong during the transfer

The possi(le /TT, request status codes are $ o o o o *;; - 3nformational .;; - Successful 8;; - 0edirection :;; - 2lient 'rror

<;; - Server 'rror

Sample Code An e;ample that ma=es an AJAX request to a static page and em(eds the response directly to a >div! within the /TML page is given (elow. 3n order to run the given e;ample? place the following files in a directory 6for e;ample >a)a;!7 within a we( application? launch the we( application and navigate to the following %0L. http@AABserver-(aseCABconte;t-rootCAa)a;Aa)a;-request.html 2lic= on the Send A)a; 0equest" method. A >HelloWorld message should (e shown (elow the (utton. /ere Bserver-(aseC is the server name along with the port if not the default. The Bconte;t-rootC is the root of the we( application. 5or e;ample @ http@AAe;ample.comA/owTo-ocAa)a;Aa)a;-request.html http@AAlocalhost@D#D#A/owTo-ocAa)a;Aa)a;-request.html

The file paths including the directory are $ a)a;Aa)a;-request.html a)a;Aa)a;-response.t;t a)a;Aa)a;-script.)s

ajax-request.html

BE-+2TF,' html ,%GL32 H-AAI82AA-T- /TML :.#* TransitionalAA'&H [email protected]:Aloose.dtdHC BhtmlC BheadC Bmeta http-equivJ"Content-Type" contentJ"text/html; charset=ISO-885 -!"C BtitleCA)a; - /owTo - 0equestBAtitleC Bscript typeJ"text/"a#ascr$pt" srcJ"a"ax-scr$pt%"s"CBAscriptC Bscript typeJ"text/"a#ascr$pt"C function send0equest67 K AL L %0LMs that (egin with MhttpM 6protocol7 are a(solute %0LMs L and need to (e specified in full. L 5or e;ample @ http@AAlocalhost@D#D#Aa)a;Aa)a;-response.t;t L L %0LMs that (egin with MAM are relative to the L server-root-address and are appended to it. L 5or e;ample @ Mhttp@AAlocalhost@D#D#M is prefi;ed to MAa)a;Aa)a;-response.t;tM L L +ther %0LMs are )ust appended to the last MAM with respect to the %0L of page L 5or e;ample @ Mhttp@AAlocalhost@D#D#Aa)a;AM is prefi;ed to Ma)a;-response.t;tM LA handleA)a;0equest6Ha)a;-response.t;tH? a)a;2allGac=/andler7N O

ajax-request.html Continued

AL L This function will (e passed as the Mcall(ac=M function. L 3n this case? the call(ac= is invo=ed each time the ready state changes. LA function a)a;2allGac=/andler6;ml/ttp0eq+()7 K document.get'lementGy3d6Ha)a;0esponse2ontainerH7.inner/TML J ;ml/ttp0eq+().readyStateN AL L 'ven though this function is called on each and every change to the L ready state? this function only handles the com(ination of the following L request sent and response received 6readyState-:7 and the result of the request L (eing successful 6Status-.##7 L L Gesides the H.##-+PH status? the other common http-request states include L H:#:-&ot foundH and H<##-3nternal server errorH. L L /ere Minner/TMLM is used to assign the response contents directly inside the L element represented (y the id Ma)a;0esponse2ontainerM which is a div element. LA if6 ;ml/ttp0eq+().readyState JJ : 7 K if6;ml/ttp0eq+().status JJ .##7 K document.get'lementGy3d6Ha)a;0esponse2ontainerH7.inner/TML J ;ml/ttp0eq+().responseTe;tN O O O BAscriptC BAheadC B(odyC BdivC B(utton onclic=JHsend0equest67HC Send A)a; 0equest BA(uttonC BAdivC Bdiv idJ"a"ax&esponseConta$ner"C BAdivC BA(odyC BAhtmlC

ajax-response.txt
BiC/elloIorldBAiC

ajax-script.js

function o(tainA)a;0eq+()67 K var ;ml/ttp0eq+()N try K if 6window.XML/ttp0equest7 K AA code for 3'QR? 5irefo;? 2hrome? +pera? Safari ;ml/ttp0eq+()Jnew XML/ttp0equest67N O else K AA code for 3'S? 3'< ;ml/ttp0eq+()Jnew ActiveX+()ect6HMicrosoft.XML/TT,H7N O Ocatch6e7 K AA (rowser may not support a)a; E O return ;ml/ttp0eq+()N O

ajax-script.js Continued

AL L A generic function that invo=es a function passed as L an argument (y the user and passes the XML-/TT,-+()ect as L an argument to that function. L L The userMs call(ac= function is e;pected to 6must7 accept the L XML-/TT,-+()ect as argument. LA function a)a;0eadyState2all(ac=6;ml/ttp0eq+()? call(ac=5unction7 K try K call(ac=5unction6;ml/ttp0eq+()7N Ocatch6e7K AA log e;ception using some mechanism 6li=e fire(ug7 if desired... ON O

AL L /elper function that wraps the actual a)a; call L for convenience. LA function handleA)a;0equest6url? call(ac=5unction 7 K var ;ml/ttp0eq+() J o(tainA)a;0eq+()67N ;ml/ttp0eq+().onreadystatechange J function67 K a)a;0eadyState2all(ac=6;ml/ttp0eq+()? call(ac=5unction7 ON AL L open6http-method? url? is-async7 L L /ere the (elow function will always ma=e a L 9'T request to the given %0L and also the L request will always (e sent in an asynchronous L manner 6in the (ac=end without (loc=ing other processes L for the given page and ma=ing the user wait7 LA ;ml/ttp0eq+().open6H9'TH?url?true7N ;ml/ttp0eq+().send67N O