Your SlideShare is downloading. ×
Pracitcal AJAX
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Pracitcal AJAX

2,728
views

Published on

All you need to know about AJAX to get started with your own Web 2.0 development.

All you need to know about AJAX to get started with your own Web 2.0 development.

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,728
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
221
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Practical Ajax Inside and Out Jack Herrington Ajax Author and Developer
  • 2. Code http://muttmansion.com/webvisions.tgz
  • 3. Introduction To AJAX
  • 4. Introduction To AJAX Web Client Web Server
  • 5. Introduction To AJAX Web Client Web Client HTML mypage.php Web Server
  • 6. Introduction To AJAX Web Client Web Client Web Client XML HTML JSON HTML Text mypage.php mydata.php mypage.php Web Server
  • 7. AJAX Toolkits Prototype Scriptaculous Yahoo! UI (yui) Google Web Toolkit (GWT) Microsoft’s ATLAS
  • 8. AJAX and PHP Web Client XML HTML JSON Text mypage.php mydata.php prototype.js
  • 9. Transport Protocols Text HTML XML Javascript
  • 10. 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>
  • 11. 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>
  • 12. 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>
  • 13. 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
  • 14. Tabs
  • 15. Search Forms
  • 16. Search Forms Instant
  • 17. Search Forms Instant Delayed
  • 18. Tables
  • 19. Tables Basic
  • 20. Tables Basic Paged
  • 21. Tables Basic Paged Hidden DIVs
  • 22. Logins
  • 23. Forms
  • 24. Slideshows
  • 25. Lightboxes
  • 26. AJAX Windows
  • 27. AJAX Video
  • 28. Common Pitfalls Cross protocol and cross domain problems Timer problems XML instead of Javascript Too much complexity Not respecting Javascript
  • 29. Widgets
  • 30. AJAX Alternatives FLEX Lazslo WPFe
  • 31. Resources Ajaxian.com IBM Developerworks AJAX articles and forum Mozilla, MSDN and Apple http://twitter.com/richsipe - IFRAME version of Lightbox