pracitcal ajax

31
Practical Ajax Inside and Out Jack Herrington Ajax Author and Developer

Upload: jherr

Post on 02-Jul-2015

2.816 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Pracitcal AJAX

Practical Ajax I n s i d e a n d O u t

Jack HerringtonAjax Author and Developer

Page 2: Pracitcal AJAX

Code

http://muttmansion.com/webvisions.tgz

Page 3: Pracitcal AJAX

Introduction To AJAX

Page 4: Pracitcal AJAX

Introduction To AJAX

Web Client

Web Server

Page 5: Pracitcal AJAX

Introduction To AJAX

Web Client

Web Server

Web Client

mypage.php

HTML

Page 6: Pracitcal AJAX

Introduction To AJAX

Web Client

Web Server

Web Client

mypage.php

HTML

Web Client

mypage.php mydata.php

HTMLXMLJSONText

Page 7: Pracitcal AJAX

AJAX Toolkits

Prototype

Scriptaculous

Yahoo! UI (yui)

Google Web Toolkit (GWT)

Microsoft’s ATLAS

Page 8: Pracitcal AJAX

AJAX and PHP

Web Client

mypage.php mydata.php

HTMLXMLJSONText

prototype.js

Page 9: Pracitcal AJAX

Transport Protocols

Text

HTML

XML

Javascript

Page 10: Pracitcal AJAX

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

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

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

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

Tabs

Page 15: Pracitcal AJAX

Search Forms

Page 16: Pracitcal AJAX

Search Forms

Instant

Page 17: Pracitcal AJAX

Search Forms

Instant Delayed

Page 18: Pracitcal AJAX

Tables

Page 19: Pracitcal AJAX

Tables

Basic

Page 20: Pracitcal AJAX

Tables

Basic Paged

Page 21: Pracitcal AJAX

Tables

Basic Paged Hidden DIVs

Page 22: Pracitcal AJAX

Logins

Page 23: Pracitcal AJAX

Forms

Page 24: Pracitcal AJAX

Slideshows

Page 25: Pracitcal AJAX

Lightboxes

Page 26: Pracitcal AJAX

AJAX Windows

Page 27: Pracitcal AJAX

AJAX Video

Page 28: Pracitcal AJAX

Common Pitfalls

Cross protocol and cross domain problems

Timer problems

XML instead of Javascript

Too much complexity

Not respecting Javascript

Page 29: Pracitcal AJAX

Widgets

Page 30: Pracitcal AJAX

AJAX Alternatives

FLEX

Lazslo

WPFe

Page 31: Pracitcal AJAX

Resources

Ajaxian.com

IBM Developerworks AJAX articles and forum

Mozilla, MSDN and Apple

http://twitter.com/richsipe - IFRAME version of Lightbox