Creating Rich Client Web Applications with AJAX

Creating Rich Client Web Applications with AJAX Jason Beres jasonb@infragistics.com Agenda • Web Apps: Whats good, whats not • What is AJAX and how can AJAX help with the bad? • Creating simple AJAX applications • AJAX endpoints and payloads • Using third-party AJAX libraries • AJAX security • ASP.NET 2.0 client callbacks and Atlas The Good, Bad and Ugly (of Web Applications) Condensed Version • The Good – Centralized control of the application – Easy deployment • The Bad – Locked into the browser sandbox – Loose the “thick-client” experience – One way to get data – the browser postback • The Ugly – Browser compatibility How does AJAX help? • Keep all of the good of thin client • Bring the “thick-client” experience much closer to the thin client • Escape the standard client/server HTTP request communications paradigm (the “postback”) What the heck is AJAX? • Asynchronous JavaScript And XML – No new technologies here, just a new name • Takes advantage of modern uplevel browser features: – A client side XML parser (on Windows this is generally the Microsoft XML parser) • Send data to/receive data from the server outside of the browsers standard communications mechanism (eg the postback) • Parse and enumerate XML formatted data on the client – A rich Document Object Model (DOM) • Powerful interaction points between the different elements of your webpage, the browser and browser plugins The standard web client/server request processing model HTTP/1.1 200 OK GET / HTTP/1.1 Date: Fri, 04 Nov 2005 17:17:37 GMT Browserimage/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, Accept: makes a resource Server: Microsoft-IIS/6.0 application/vnd.ms-excel, application/msword, request to the server application/vnd.ms-powerpoint,PSA PSD TAI TELo OUR*/* CNT COM INT NAV P3P: CP="ALL IND DSP COR ADM CONo CUR CUSo IVAo IVDo SAMo Accept-Language:UNI" en-us ONL PHY PRE PUR HTTP Request Accept-Encoding: gzip, deflate X-Powered-By: ASP.NET User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR X-AspNet-Version: 2.0.50727 Cache-Control: 2.0.50727) private Content-Type: text/html; charset=utf-8 Host: www.microsoft.com Content-Length: 22370 Proxy-Connection: Keep-Alive Cookie: MC1=GUID=5cd2d5ca1a1cc54183c10f4bacaa45fa&HASH=cad5&LV=20059&V=3; A=I&I=AxUFAAAAAABuCAAAzJInmvNBZzRHm8aAr99x0A!!; msresearch=1 HTTP Response and returns a result to the browser