AjaxChris Pinski

Outline

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

The Beginning of the Web

Static pages Slow connections speeds Maintenance nightmare Old example New Example

Common Gateway Interface (CGI)

Not the program or script that is executed

Interface used to connect the browser and the server

Cons of CGI

Most server side implementations in perl or C Perl

PHP

Undescriptive errors 500 Internal Server Error

Dynamic data before AJAX

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

What is Ajax

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

Who uses Ajax?

Facebook Google Myself

JavaScript

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

jQuery

Makes JavaScript easier to use JavaScript

jQuery

HTML

Building blocks of web pages Info displayed upon use of tags

CSS

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

interpret

XML

Not designed to be alternative to HTML

Used to store transported data Create own tags Easy to parse Heavyweight compared to other

formats

JSON

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

XMLHttpRequest

Actual request to retrieve data from URL

No new document necessary An object in JavaScript Standardized by W3C (World Wide

Web Consortium)

XMLHttpRequest

Synchronous

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

XMLHttpRequest

Asynchronous

Callback registered to requests readyState Request complete and “OK”

SE Aspect

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

Common Ajax Problems

Loading indicator on browser not triggered Solution: Place loading icon near DOM

element that is loading XSS

Solution:

Conclusion

Big reason why Internet is what it is today

Up to the minute data

References

Brock, A. (n.d.). demosthenes.info – The Client-Server Model. demosthenes.info – blog. Retrieved October 24, 2012, from http://demosthenes.info/blog/137/The-Client-Server-Model

Empire Burlesque. (n.d.). W3Schools Online Web Tutorials. Retrieved October 24, 2012, from http://www.w3schools.com/xml/cd_catalog.xml

IFrame Call. (n.d.). Main Page - Ajax Patterns. Retrieved October 23, 2012, from http://ajaxpatterns.org/archive/IFrame_Call.php

JSON. (n.d.). JSON. Retrieved October 23, 2012, from http://www.json.org Solutions to 5 Common Ajax Problems | Webdesigner Depot. (n.d.). Web Design

Blog - Webdesigner Depot. Retrieved October 25, 2012, from http://www.webdesignerdepot.com/2009/12/solutions-to-5-common-ajax-problems/

Synchronous and asynchronous requests. (n.d.). Mozilla Developer Network. Retrieved October 25, 2012, from https://developer.mozilla.org/en-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 http://sixrevisions.com/javascript/the-power-of-jquery-with-ajax/

XML Introduction - What is XML?. (n.d.). W3Schools Online Web Tutorials. Retrieved October 24, 2012, from http://www.w3schools.com/xml/xml_whatis.asp