There and Back Again

Building Rich Web Applications with AJAX

So a couple months ago Jesse James Garrett gave us the worst new technology term ever, AJAX. Now I think a much better term is javascript remoting, or just javascript remote procedure calls using xmlhttpclient. But AJAX now seems to be the word of choice so were stuck with yet another meaningless acronym just like SOAP.

Now onto the actual topic, how you use the new technology with PHP and what it means to your average PHP developer. The first thing you want to do is just like another other new tech in PHP, ignore the original article and generic explanations and find a library that does the hard work for you.

Right now your options seems to be:

  1. SAJAX which offers a simple procedural api on both the javascript and php sides of the equation, It also provides support for other server side languages.
  2. JPSPAN which maps php objects to the javascript world.

Using either approach you have easy access to moving data back and forth between the php and javascript worlds, so at this point all the new tech been done for you, now you just need to use it which is the hard part. So the biggest change is you’ll be writing a whole lot more javascript, most of it interacting with the DOM. While many of use have avoided it like the plague its not all that bad if you only worry about supporting Firefox and IE 6.0, and its a pretty nice experience if you only have to support Firefox.

If you don’t enjoying playing with the DOM then the AJAX revolution will take a bit longer to get to you, but don’t worry it shouldn’t long before people start releasing widgets for doing that side as well. I expect that you’ll see type-ahead find, multi-select pulldowns, and database grids.

What this means to the average php developer is that you’ll have the abilility to reduce page reloads and make your webapp feel a lot more like a normal desktop app. At the moment you still have to do the work yourself, but im guessing you’ll see turnkey widget solutions in the next couple months. As I get time i’ll attempt to post a couple tutorials and if I ever stop spending time fixing up my apartment i’ll release the type-ahead find code we’ve built for clearhealth.

15 thoughts on “Building Rich Web Applications with AJAX

  1. Alan Knowles

    I still really worry about putting a library in between JS and PHP, it smells like something that can easily break, and be the real timewaster in debugging..
    Just having a JS lib to send POST requests, and using either simple strings or XML dom for return values, make debugging this layer alot simpler, and for most tasks perfectly sufficient..

    I spend alot of today using similar stuff to generate gnumeric files in JS on the client side, based on XML files pulled from the server via xmlhttprequest, and sending that down to ssconvert to output perfect rich excel files. The advantages to debugging in breaking the data reformating to different seperate components is huge.

  2. Joshua Eichorn

    Alan: that can be a problem if the library is overly complex (which jpspan might be) but most people don’t want to learn the oddities of xmlhttprequest, and a good library should have built-in debugging tools. That like saying not to use any PEAR code since its another library that might break that will be hard to decode.

    dotvoid: If you don’t support async operation I don’t think your code will be widely usable, it ads programming complexity but it helps cover a lot of latency.

  3. Ralf Stadtaus

    I never really liked JavaScript and only used it for popup windows. But I used that kind of technology in a recent project. Despite the bandwith saving and the faster page loading it increased the usibility dramatically. I will definitely use that again.

    Also, it has been quite benefiting that we first developed the UI the old way (page reloading). Once that worked we enhanced it by using the xmlhttpclient. That makes sure that everyone with JS disabled or without IE and Firefox still can use the application.

  4. dotvoid

    There are very few occasions where I find async communication usable. The widely known example of word completion is one though. But in the applications I usually create I really only want to simplify handling forms and validation. That is my main objective.

    Async is, however, not that complicated. So I’ll add it later as I can agree that sometimes it is a good solution.

  5. Justin Mitchell

    Thank God I’m not the only one that hates the term AJAX. For some reason, I cringe every time I hear it. Pleeaase someone come up with something better!

  6. Phil

    You can use AJAX just fine without any DOM messiness. Just use the innerHTML method. It is a little more verbose since it has to send more data over the line, but a helluva lot cleaner in the implementation.

    For an example:
    http://rails.philisha.net/old

  7. Joshua Eichorn Post author

    Phil: I don’t lots of stuff like that, but don’t forgot your still using the dom.

    innerHTML is part of the dom, and im sure your using document.getElementById(”) to do the replacements.

    Also if your looking at content replacement as your main use you might want to try a toolkit that is optomized for that. xajax (xajax.sf.net) is one i Just heard about today and it even hides the document.getElementById part, you just specify the id to replace, or append/prepend the html too on the php side.

  8. Claude Hussenet

    AJAX applied to a portal page at http://www.claudehussenet.com
    No refresh for :
    -Min/Max portlets.
    -Change the number of news displayed
    -Change the news category (Moreover Portlet)
    -Add/remove quote (MyPortfolio Portlet)
    -changing the location by drag and drop !

    Rgds-Claude Independent Consultant

    Note by Josh:
    This is a little more of an ad then I normally let through, but it does seem to be a good ajax demo

  9. Pingback: Joshua Eichorn's Blog » Blog Archive » AJAX Hello World with Sajax

  10. Noah Suiter

    Hi, I came across this post while searching for help with JavaScript. I have recently switched browsers from Google Chrome to Mozilla Firefox 3.1. Now I seem to have a issue with loading JavaScript. Every time I browse site that needs Javascript, my browser doesn’t load and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix the problem. Any help is greatly appreciated! Thanks