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


We...
Introduction To
            AJAX
             Web Client     Web Client
Web Client




                                   ...
AJAX Toolkits

Prototype

Scriptaculous

Yahoo! UI (yui)

Google Web Toolkit (GWT)

Microsoft’s ATLAS
AJAX and PHP
                Web Client




                                   XML
               HTML                JSON...
Transport Protocols

 Text

 HTML

 XML

 Javascript
TEXT Transport
 <html>
 <head>
 <script src=quot;prototype.jsquot;></script>
 </head>
 <body>
 <script>
 new Ajax.Request(...
HTML Trasport
<html>
<head>
<script src=quot;prototype.jsquot;></script>
</head>
<body>
<div id=quot;spotquot;>
</div>
<sc...
XML Transport
<html>
<head>
<script src=quot;prototype.jsquot;></script>
</head>
<body>
<script>
new Ajax.Request( 'data.x...
JSON Transport
<html>
<head>
<script src=quot;prototype.jsquot;></script>
</head>
<body>
<script>
new Ajax.Request( 'data....
Tabs
Search Forms
Search Forms
Instant
Search Forms
Instant   Delayed
Tables
Tables

Basic
Tables

Basic    Paged
Tables

Basic    Paged   Hidden DIVs
Logins
Forms
Slideshows
Lightboxes
AJAX Windows
AJAX Video
Common Pitfalls

Cross protocol and cross domain problems

Timer problems

XML instead of Javascript

Too much complexity
...
Widgets
AJAX Alternatives


FLEX

Lazslo

WPFe
Resources

Ajaxian.com

IBM Developerworks AJAX articles and
forum

Mozilla, MSDN and Apple

http://twitter.com/richsipe -...
Upcoming SlideShare
Loading in …5
×

Pracitcal AJAX

3,120 views

Published on

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
3,120
On SlideShare
0
From Embeds
0
Number of Embeds
149
Actions
Shares
0
Downloads
225
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Pracitcal AJAX

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

×