Chris Pinski

 History  What is Ajax  Who uses Ajax  Underlying Technologies  SE Aspect  Common Problems  Conclusion

 Static pages  Slow connections speeds  Maintenance nightmare  Old example Old example  New Example New Example

 Not the program or script that is executed  Interface used to connect the browser and the server

 Most server side implementations in perl or C  Perl  PHP  Undescriptive errors  500 Internal Server Error

 IFrame hack  Hide IFrame  GET or POST calls to web service  Extract hidden data and inject into DOM  POST would require hidden form  Unexpected results ▪ “Phantom click” ▪ Clicking sound each request ▪ “throbber of doom” ▪ Throbber animated forever during IFrame load

 Asynchronous JavaScript and XML  Group of technologies  Request formed client side then sent to server  Server returns processed data  Makes dynamic web what it is today

 Facebook Facebook  Google Google  Myself Myself

 From web pages to mobile phones  Main technology for Ajax  Built into all major browsers  Can make Ajax calls as well as update the DOM

 Makes JavaScript easier to use  JavaScript  jQuery

 Building blocks of web pages  Info displayed upon use of tags

 Presents HTML in different forms  Mainly makes page easier for user to interpret

 Not designed to be alternative to HTML  Used to store transported data  Create own tags  Easy to parse  Heavyweight compared to other formats

 Represents objects nicely  Independent of all languages  Objects begin/end with curly braces  Array of objects enclosed in square brackets  Colons follow names  Each name/value pair separated with comma

 Actual request to retrieve data from URL  No new document necessary  An object in JavaScript  Standardized by W3C (World Wide Web Consortium)W3C

 Synchronous  Only recommended when you are doing thousands of requests in a row

 Asynchronous  Callback registered to requests readyState  Request complete and “OK”

 Client side vs. server side  Client side ▪ Higher end machines can do more ▪ Less secure  Server side ▪ Saves user from waiting long to process data ▪ Server load greater ▪ Higher costs ▪ More scalable

 Loading indicator on browser not triggered  Solution: Place loading icon near DOM element that is loading  XSS  Solution:

 Big reason why Internet is what it is today  Up to the minute data

 Brock, A. (n.d.). demosthenes.info – The Client-Server Model. demosthenes.info – blog. Retrieved October 24, 2012, from Client-Server-Model  Empire Burlesque. (n.d.). W3Schools Online Web Tutorials. Retrieved October 24, 2012, from  IFrame Call. (n.d.). Main Page - Ajax Patterns. Retrieved October 23, 2012, from  JSON. (n.d.). JSON. Retrieved October 23, 2012, from  Solutions to 5 Common Ajax Problems | Webdesigner Depot. (n.d.). Web Design Blog - Webdesigner Depot. Retrieved October 25, 2012, from problems/  Synchronous and asynchronous requests. (n.d.). Mozilla Developer Network. Retrieved October 25, 2012, from US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests  The Power of jQuery with Ajax. (n.d.). Six Revisions - Web Design Articles, News, Tutorials. Retrieved October 21, 2012, from power-of-jquery-with-ajax/  XML Introduction - What is XML?. (n.d.). W3Schools Online Web Tutorials. Retrieved October 24, 2012, from