Pracitcal AJAX

Practical Ajax Inside and Out Jack Herrington Ajax Author and Developer

Code http://muttmansion.com/webvisions.tgz

Introduction To AJAX

Introduction To AJAX Web Client Web Server

Introduction To AJAX Web Client Web Client HTML mypage.php Web Server

Introduction To AJAX Web Client Web Client Web Client XML HTML JSON HTML Text mypage.php mydata.php mypage.php Web Server

AJAX Toolkits Prototype Scriptaculous Yahoo! UI (yui) Google Web Toolkit (GWT) Microsoft’s ATLAS

AJAX and PHP Web Client XML HTML JSON Text mypage.php mydata.php prototype.js

Transport Protocols Text HTML XML Javascript

TEXT Transport <html> <head> <script src=quot;prototype.jsquot;></script> </head> <body> <script> new Ajax.Request( 'text.txt', { method: 'get', onSuccess: function( transport ) { alert( transport.responseText ); } } ); </script> Here is some text </body> </html>

HTML Trasport <html> <head> <script src=quot;prototype.jsquot;></script> </head> <body> <div id=quot;spotquot;> </div> <script> new Ajax.Request( 'portion.html', { method: 'get', onSuccess: function( transport ) { $('spot').innerHTML = transport.responseText; } } ); </script> </body> Here is <b>HTML</b> encoded text. </html>

XML Transport <html> <head> <script src=quot;prototype.jsquot;></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> <data> </html> <item>Hello</item> </data>

JSON Transport <html> <head> <script src=quot;prototype.jsquot;></script> </head> <body> <script> new Ajax.Request( 'data.js', { method: 'get', onSuccess: function( transport ) { alert( eval( transport.responseText ) ); } } ); </script> </body> </html> 1+2

Search Forms

Search Forms Instant

Search Forms Instant Delayed

Tables

Tables Basic

Tables Basic Paged

Tables Basic Paged Hidden DIVs

Logins

Slideshows

Lightboxes

AJAX Windows

AJAX Video

Common Pitfalls Cross protocol and cross domain problems Timer problems XML instead of Javascript Too much complexity Not respecting Javascript

Widgets

AJAX Alternatives FLEX Lazslo WPFe

Resources Ajaxian.com IBM Developerworks AJAX articles and forum Mozilla, MSDN and Apple http://twitter.com/richsipe - IFRAME version of Lightbox

http://www.casinopeccio.com	36
http://pecciola.com	29
http://www.casinopecci.com	22
http://www.casinopecciola.com	7
http://www.techgig.com	4
http://www.slideshare.net	3
http://www.itspice.com	1

Pracitcal AJAX

by jherr on May 15, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 102

Statistics

Pracitcal AJAX — Presentation Transcript