Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common...
-
Upload
victoria-hensley -
Category
Documents
-
view
215 -
download
0
Transcript of Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common...
![Page 1: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/1.jpg)
AjaxChris Pinski
![Page 2: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/2.jpg)
Outline
History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion
![Page 3: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/3.jpg)
The Beginning of the Web
Static pages Slow connections speeds Maintenance nightmare Old example New Example
![Page 4: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/4.jpg)
Common Gateway Interface (CGI)
Not the program or script that is executed
Interface used to connect the browser and the server
![Page 5: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/5.jpg)
Cons of CGI
Most server side implementations in perl or C Perl
PHP
Undescriptive errors 500 Internal Server Error
![Page 6: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/6.jpg)
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
![Page 7: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/7.jpg)
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
![Page 8: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/8.jpg)
Who uses Ajax?
Facebook Google Myself
![Page 9: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/9.jpg)
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
![Page 10: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/10.jpg)
jQuery
Makes JavaScript easier to use JavaScript
jQuery
![Page 11: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/11.jpg)
HTML
Building blocks of web pages Info displayed upon use of tags
![Page 12: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/12.jpg)
CSS
Presents HTML in different forms Mainly makes page easier for user to
interpret
![Page 13: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/13.jpg)
XML
Not designed to be alternative to HTML
Used to store transported data Create own tags Easy to parse Heavyweight compared to other
formats
![Page 14: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/14.jpg)
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
![Page 15: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/15.jpg)
XMLHttpRequest
Actual request to retrieve data from URL
No new document necessary An object in JavaScript Standardized by W3C (World Wide
Web Consortium)
![Page 16: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/16.jpg)
XMLHttpRequest
Synchronous
Only recommended when you are doing thousands of requests in a row
![Page 17: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/17.jpg)
XMLHttpRequest
Asynchronous
Callback registered to requests readyState Request complete and “OK”
![Page 18: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/18.jpg)
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
![Page 19: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/19.jpg)
Common Ajax Problems
Loading indicator on browser not triggered Solution: Place loading icon near DOM
element that is loading XSS
Solution:
![Page 20: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/20.jpg)
Conclusion
Big reason why Internet is what it is today
Up to the minute data
![Page 21: Chris Pinski. History What is Ajax Who uses Ajax Underlying Technologies SE Aspect Common Problems Conclusion.](https://reader035.fdocuments.in/reader035/viewer/2022062423/56649e155503460f94aff59c/html5/thumbnails/21.jpg)
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