Download - Pracitcal AJAX
![Page 1: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/1.jpg)
Practical Ajax I n s i d e a n d O u t
Jack HerringtonAjax Author and Developer
![Page 2: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/2.jpg)
Code
http://muttmansion.com/webvisions.tgz
![Page 3: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/3.jpg)
Introduction To AJAX
![Page 4: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/4.jpg)
Introduction To AJAX
Web Client
Web Server
![Page 5: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/5.jpg)
Introduction To AJAX
Web Client
Web Server
Web Client
mypage.php
HTML
![Page 6: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/6.jpg)
Introduction To AJAX
Web Client
Web Server
Web Client
mypage.php
HTML
Web Client
mypage.php mydata.php
HTMLXMLJSONText
![Page 7: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/7.jpg)
AJAX Toolkits
Prototype
Scriptaculous
Yahoo! UI (yui)
Google Web Toolkit (GWT)
Microsoft’s ATLAS
![Page 8: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/8.jpg)
AJAX and PHP
Web Client
mypage.php mydata.php
HTMLXMLJSONText
prototype.js
![Page 9: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/9.jpg)
Transport Protocols
Text
HTML
XML
Javascript
![Page 10: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/10.jpg)
TEXT Transport
<html><head><script src="prototype.js"></script></head><body><script>new Ajax.Request( 'text.txt', { method: 'get', onSuccess: function( transport ) { alert( transport.responseText ); }} );</script></body></html>
Here is some text
![Page 11: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/11.jpg)
HTML Trasport
<html><head><script src="prototype.js"></script></head><body><div id="spot"></div><script>new Ajax.Request( 'portion.html', { method: 'get', onSuccess: function( transport ) { $('spot').innerHTML = transport.responseText; }} );</script></body></html> Here is <b>HTML</b> encoded text.
![Page 12: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/12.jpg)
XML Transport
<html><head><script src="prototype.js"></script></head><body><script>new Ajax.Request( 'data.xml', { method: 'get', onSuccess: function( transport ) { var itemTags = transport.responseXML.getElementsByTagName( 'item' ); alert( itemTags[0].firstChild.nodeValue ); }} );</script></body></html>
<data> <item>Hello</item></data>
![Page 13: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/13.jpg)
JSON Transport
<html><head><script src="prototype.js"></script></head><body><script>new Ajax.Request( 'data.js', { method: 'get', onSuccess: function( transport ) { alert( eval( transport.responseText ) ); }} );</script></body></html> 1+2
![Page 14: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/14.jpg)
Tabs
![Page 15: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/15.jpg)
Search Forms
![Page 16: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/16.jpg)
Search Forms
Instant
![Page 17: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/17.jpg)
Search Forms
Instant Delayed
![Page 18: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/18.jpg)
Tables
![Page 19: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/19.jpg)
Tables
Basic
![Page 20: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/20.jpg)
Tables
Basic Paged
![Page 21: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/21.jpg)
Tables
Basic Paged Hidden DIVs
![Page 22: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/22.jpg)
Logins
![Page 23: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/23.jpg)
Forms
![Page 24: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/24.jpg)
Slideshows
![Page 25: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/25.jpg)
Lightboxes
![Page 26: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/26.jpg)
AJAX Windows
![Page 27: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/27.jpg)
AJAX Video
![Page 28: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/28.jpg)
Common Pitfalls
Cross protocol and cross domain problems
Timer problems
XML instead of Javascript
Too much complexity
Not respecting Javascript
![Page 29: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/29.jpg)
Widgets
![Page 30: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/30.jpg)
AJAX Alternatives
FLEX
Lazslo
WPFe
![Page 31: Pracitcal AJAX](https://reader038.vdocuments.us/reader038/viewer/2022110310/55948dae1a28ab145c8b462f/html5/thumbnails/31.jpg)
Resources
Ajaxian.com
IBM Developerworks AJAX articles and forum
Mozilla, MSDN and Apple
http://twitter.com/richsipe - IFRAME version of Lightbox