[FX.php List] AJAX Big Picture

Joel Shapiro jsfmp at earthlink.net
Thu Jul 24 14:35:25 MDT 2008 

Hi

To follow up on Dale's comment about managing users' expectations --  
I think it's really important (from a UI perspective) to think about  
how the browser's Back button changes what it does within an AJAX  
context...

Think of a shopping cart:  After a few "add to shopping cart" clicks,  
a user clicks "view shopping cart".  User then realizes she didn't  
add brown socks to her shopping cart so she clicks her browser Back  
button (or keyboard shortcut) to go back to the page with the socks.   
In a non-AJAX site, this would work as expected.  If the site instead  
uses AJAX for ALL navigation and interaction -- never re-loading a  
page or loading a new page -- then clicking the browser Back button  
could take the user to the site last viewed *before* getting to the  
shopping site.  At the minimum, this could be very disorienting to  
the user.  At the worst, the site would be poorly enough designed so  
that all contents of the shopping cart are lost.  (And hoping that  
users will only use the navigation created within the site instead of  
the standard browser navigation is probably not good design ;)

So I recommend you think about when it would be appropriate and  
helpful to use AJAX, and not just use it for the eye candy without  
considering the overall flow of the site.  When does it make sense to  
have separate pages and when would it be better to have interaction  
all take place on a single page without reloading?  Will you want  
individual pages on your site to be bookmark-able?  How about visible  
to search engines?  Also you need to think about whether all users to  
your site will have JavaScript enabled in their browser, and what  
their interaction will be like if they don't.  Will they still be  
able to use it or will they be locked out?

As to the different JavaScript libraries (Prototype/Scriptaculous,  
MooTools, jQuery, Spry...):
Each of these libaries has numerous pre-designed "widgets" that do a  
lot of the basic kinds of things people want from AJAX (from special  
effects like sliding & fading, to form validations, etc.).  Think of  
them a bit like the FileMaker custom functions that people post on  
Brian Dunning's website.  They're given by the community so you don't  
have to write them yourself.  Sometimes these widgets may be all you  
need, in which case it doesn't really matter very much which library  
you choose.  However, if you need to custom tailor some JavaScript  
yourself, then you'll need to either know some JavaScript, or know  
one of these libraries.  I think that jQuery is one that makes it  
pretty easy to do custom JavaScript (or custom AJAX) without having  
to know much JavaScript itself.  It uses more English-based commands  
than the JavaScript language itself.

HTH,
-Joel


On Jul 24, 2008, at 10:26 AM, Dale Bengston wrote:

> Hi David,
>
> I learned the concepts of AJAX from this tutorial on Apple's web site:
> http://developer.apple.com/internet/webcontent/xmlhttpreq.html
>
> The gist of it is, you're using JavaScript to formulate urls/ 
> queries to your web server which pass in behind the scenes, without  
> reloading the current page. The target URL, in our world, would be  
> a php file that knows what to do with the parameters it receives in  
> the URL, just as a traditional link or form submit would send  
> $_REQUEST data to another page. Our php page would then return some  
> amount of information back to JavaScript, and the JavaScript would  
> know what to do with it: redraw part of the page, update a status,  
> change a color, etc.
>
> The biggest differences in using ajax are (in my opinion) user  
> experience and interface issues. If your users are in the habit of  
> seeing a page redraw when they submit a form or click a link, you  
> have to manage new expectations.
>
> Once you start sending and receiving data with AJAX, it will alter  
> your brain forever. You will go through a phase where you will want  
> to do everything with AJAX, but eventually this wears off and  
> you'll find a balance between traditional HTTP requests and AJAX  
> requests.
>
> We currently use Prototype/Scriptaculous for our AJAX stuff. Others  
> use JQuery. There's also Lajax, Lance Hallberg's libraries, which  
> are closely tied to FX since he's a FileMaker developer. (Might be  
> a good place to start.) I also have a serious eye on Adobe's new  
> Spry libraries.
>
> Which one's right for you? It depends. Most of the time it comes  
> down to how it "feels" to use the code, how well it's documented -  
> extra important as you're starting out, and whether it all works on  
> the platforms and browsers you support. (Unfortunately, I have not  
> been able to get Bob Patin to lend me his new iPhone for six or  
> seven months so I can test our AJAX stuff there!)
>
> Give yourself ample time for experimentation, and be prepared to  
> toss one AJAX library out and try another if it doesn't feel right.
>
> Also, we have found Firefox with the Firebug plug-in to be very  
> helpful in debugging AJAX calls. I don't know how I ever got along  
> without it! We use Macs; I don't know if there's a PC version of  
> that plugin as well.
>
> I hope this helps. Sorry it's all over the place.
>
> Dale
>
>
>  --
> Dale Bengston
> Partner, The Whole Brain Group, LLC
> thewholebraingroup.com
>
> On Jul 24, 2008, at 10:26 AM, biscuit technologies wrote:
>
>> Hello everyone,
>> I've just gotten approval to start folding in AJAX queries to  
>> improve the existing interface of a FX project.
>>
>> If anyone could point me to some kind of basic tutorial or a  
>> sample file with simple FX examples using AJAX I would really  
>> appreciate it. I have limited experience with this stuff and can  
>> use all the help I can get.
>>
>> Thanks,
>> David
>>
>> On Mon, Jul 21, 2008 at 11:57 AM, Jonathan Schwartz  
>> <jschwartz at exit445.com> wrote:
>> Hi guys,
>>
>> It was great meeting up with fellow fx.phpr's Bob Patin, Chris  
>> Hansen, Michael Ward, David Ness, Steve Winter, Alex Gates and  
>> Joel Shapiro at DevCon. (Did I miss anyone?)
>>
>> If you weren't there...trust me...we included you in our  
>> conversations. ;-)
>>
>> With so many choices for implementing AJAX-type content, I'm  
>> losing track of the options.
>>
>> Would someone care to take a stab at summarizing the Big Picture,  
>> with Pros and Cons?
>>
>> Here are the basic terms that I'm looking to develop perspective  
>> on, and which are alternatives for which.
>>
>> AJAX
>> JQuery
>> Prototype
>> Spry
>> Flex
>>
>> Thanks
>>
>> J
>> -- 
>> Jonathan Schwartz
>> Exit 445 Group
>> jonathan at exit445.com
>> http://www.exit445.com
>> 415-370-5011
>> _______________________________________________
>> FX.php_List mailing list
>> FX.php_List at mail.iviking.org
>> http://www.iviking.org/mailman/listinfo/fx.php_list
>>
>> _______________________________________________
>> FX.php_List mailing list
>> FX.php_List at mail.iviking.org
>> http://www.iviking.org/mailman/listinfo/fx.php_list
>
> _______________________________________________
> FX.php_List mailing list
> FX.php_List at mail.iviking.org
> http://www.iviking.org/mailman/listinfo/fx.php_list

More information about the FX.php_List mailing list