Foundations of Ajax

Craig Maloney writes "You've no doubt heard about Ajax. Practically every new and exciting application on the web uses some form of Ajax. Google's suite of applications (GMail, Google Maps, etc.), Amazon's A9 search engine, and Netflix use Ajax interfaces to give the user a better browsing experience. By using some pretty basic innovations to current technology, browsers can now deliver content in ways unimaginable only a few short years ago. Foundations of Ajax provides developers who haven't taken the time to look into Ajax a hands-on guide for quickly leveraging these technologies in their own applications." Read on for Craig's review.

Foundations of Ajax
author	Ryan Asleson and Nathaniel T. Schutta
pages	273
publisher	Apress
rating	8/10
reviewer	Craig Maloney
ISBN
summary	A good first-look at Ajax and client-side development using JavaScript, HTML, and CSS.

Foundations of Ajax starts with a brief history of interactive web-applications, starting from the crudest CGI and Java Applets, and chronicling various interactive technologies (Javascript, Servelets, ASP, PHP, Flash, DHTML, and the various XML browser languages like XUL, XAMJ, etc.). Ajax seems like another acronym in a sea of acronyms, but the authors quickly point out why Ajax can help with the development cycle. Ajax allows the server to validate the user's input, without creating ugly and messy JavaScript validation rules, and it allows the server to use the same rules for input validation on both the client and the server. Unfortunately, Ajax does break some of the conventions users have grown accustomed to in using traditional web applications. XMLHTTPRequest requests aren't stored in the browser history, and it can be confusing to the user to determine what changed on the page after refresh. Issues aside, the book is very encouraging on the prospects of using Ajax in web applications, and invites the reader to use Ajax where it makes sense.

Chapter 2 talks about the request method that makes Ajax possible: XMLHTTPRequest (XHR). The XHR methods are explained with several examples that detail the fundamentals occurring with the request. The examples are very clear, and the entire process is laid out in careful detail, although the Dynamic Object Model (DOM) is mentioned, but not explained until the end of the chapter.

Chapter 3 delves into server communication. It's interesting to note that the authors haven't instantiated a server yet for their Ajax communication, and for the balance of chapter 3, the server is replaced by text files. It's not until the GET/POST examples that the authors start using Servelets. While it may seem strange for the authors to be talking about client/server programming without instantiating a server, it does allow the developer to get their proverbial feet wet without battling server configuration issues. The chapter starts by introducing innerHTML, but then moves to using XML DOM for data transfer from the client. From there, the authors demonstrate a few examples of the server sending XML to the client, and the client sending XML to the server. Happily, the authors weren't content to leave us parsing XML using JavaScript, instead they finish up the chapter by introducing the JSON framework with a few examples.

Chapter 4 is really where the book starts doing very interesting examples with Ajax. It's also, coincidentally, the largest chapter in the book, and the chapter readers will find the most useful reference examples. The book steps through the creation of examples of Simple date validation, Reading response headers for a simple ping application, Dynamically Loading List Boxes, Automatically Refreshing Pages, Progress bar (a personal favorite), Tool tips, Accessing Web Services using REST, and Auto complete. Each example is introduced with a real-world working application as an example (such as the auto complete feature of the Google search engine), and could easily be implemented in a developer's application. I found myself thinking of ways to enhance my code using these techniques.

Following chapter 4's examples, the chapters on creating a developer toolbox, testing scripts using JsUnit, and debugging Javascript seem a bit of a let-down. Chapter 5 outlines various packages for helping JavaScript coders to better spot errors in their code, and create documentation using the JavaDoc-like application JSDoc. There is also a mention of an application for crunching and compressing JavaScript code, as well as the excellent Web Developer Extension. Rounding out the chapter is a brief history of JavaScript, and some advanced JavaScript techniques. Chapter 6 introduces JsUnit and Unit Testing. Chapter 7 talks about JavaScript debuggers, such as Microsoft's Script Debugger, and the very powerful Venkman. The Venkman tutorial is very good, and would be a great starting point for anyone wanting more information on how to use this great tool.

Chapter 8 rounds out the book with the typical "for more information" sites to visit. However, in true Steve Jobs "One more thing" fashion, the authors not only plug their Ajax Framework, but also create a browser-based, Macintosh-like Dashboard application with four widgets. I was all set to finish the book, but the authors quietly slipped the best for last in the final pages of the book, bringing out a complete Mac OSX-like "Dashboard" windowed-environment in a browser complete with the drag-and-drop elements I've most associated with Ajax sites. This is by far the most complicated project in the book, and it make for an excellent ending to an already fine book.

Foundations of Ajax is a great starting point for developers wondering how they can incorporate Ajax into their own web-based projects. One minor gripe I had with this book was the examples looked pale in comparison with their real-world models, but design is hardly the focus of the book. Where Foundations of Ajax shines is it's no-nonsense introduction, implementation, and expansion of the basics of Ajax programming, leaving the reader confidently ready to utilize the concepts within. The authors have seen the potential of Ajax, and competently convey their expertise and enthusiasm for this technology."

---

You can purchase Foundations of Ajax from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

Wow

Not even one mention of "Web 2.0"!

demo?

could someone kindly link a page that demos ajax's features?

Moving target

While I appreciate this review, is the book really neccessary? AJAX moves very quickly, with new/better examples popping up everyday. Maybe it's me but I find less of a need for technical books and magazines since I can get all of my information from the internet. The personal example I'll use is Sys Admin; great magazine but I haven't leanred much from it during the last year. If I want to learn a specific server app or hack it's just easier and more up to date to grep it online.

So...

So, is there an IDE like Visual Studio for AJAX, or are we expected to wade through pages of HTML and Javascript like in the old days of the web? In my opinion, GUI applications are best developed inside GUI applications.

I feel sorry for all the trees...

I feel sorry for all the trees that have to be cut down needlessly so that developers can try to keep up with the latest crappy technology that will obsolete in less than 2 years.

On the bright side, at least its under 300 pages long.

What level?

I know PHP/Javascript/HTML relitivly well. Do you think this book would be an easy read for me. Or would I really have to sit down and try. Heh, got the book for christmas and just looking for time to read it.

see sig.

np

yep, its a good book

I have actually read/worked through this book and indeed it was not only one of the first books on Ajax but also one of the better books on Ajax. Some of the portions are now a little outdated, like the discussion on frameworks, but these areas can easily be filled in with a little research on the Internet.

Ajax vs. Comet

I personally, use Comet, but only because it has a cool song [wikipedia.org]

Oh, that Ajax.

Nevermind...

Effective Ajax Using TG

Some of you might be interested in a recent Presentation / Screencast [turbogears.org] given by Kevin Dangoor (creator of the TurboGears [turbogears.org] Python web framework) given at this year's Pycon [pycon.org]. Although he does talk a bit about TurboGears, most of the talk is tips and examples on how to add functionality using Ajax without confusing users.

Off Topic

But is something going on with the moderator points? Or is it just a slow day (or three)?

I noticed all the stories have very few comments modded to 3 or above. And by few I mean 20. Just skip through any of the articles on the front page.

Did I not get the memo?

Too bad they didn't use Ruby on Rails...

...InstantRails [rubyforge.org] makes it easy to get it up and running, and Rails definitely has AJAX support built in.

I'm using AJAX a fair bit (mostly on the admin pages) on getindi [getindi.com]; it's very handy stuff!

Combine both....

I would like to see an application that can work online and offline with same ease. We, at my firm, had tried an app using java which worked standalone when network was loaded and became online when there was less congestion. Our internal network was so slow that the application was standalone most of the time. That was India and year was 2000. Now Ajax looks like a good solution for a long forgotten problem.

that word, are you sure you are using it correctly

"... deliver content in ways unimaginable only a few short years ago"

but, but, I remember imagining it. I remember it all over the tech press... and those guys that wrote the technology, they -imagined- it! For GOD'S SAKE WE ALL IMAGINE THAT SHIT!!!!

Yet Another Buzzword

All "Ajax" means is that Javascript now works. I used to accomplish the same tasks (i.e. asynchronously send/receive bits of data, dynamically update tables without refreshing the whole page) using hidden frames and javascript submits back in 1999. Javascript now has built-in functions to do this so it's less of a hack, but I don't think that it merits a whole new buzzword.

Then again, I guess it's something for new startups to tout and investors to latch on to, so maybe it's more of a business/marketing buzzword than a software/technology buzzword.

I don't want to "leverage" it

I want to use it.

Damn marketing driods

I've read this book and...

I picked this book up on my last trip to Vegas. I read it cover to cover. I found it to be on the elemtary side of the AJAX discussion. I was disappointed when I found most of the content, code examples and demos can be found online in different places. AJAX is just a hot topic right now, I find this book as an attempt to ride the coat tails of the AJAX phenom.

OK book

I have this book. It's a pretty straightforward introduction to the topic. The central problem with it is that all the examples that use server-side components only use Java.

If you use Java, great. But the book title is misleading, and it should be called "Foundations of Ajax in JavaScript and Java."

The other caveat: the book is designed for people who want to use Ajax to spruce up an existing web page a little, not design new applications built from the ground up to use Ajax as the data transport mechanism. If this meets your needs, great. If you're looking to do bigger stuff, get "Ajax in Action" froom Manning.

Gecko DOM Reference

I also recommend that you check out the Gecko DOM Reference [mozilla.org]. It's a great, handy online resource which I've consulted frequently as of late for many DHTML apps and functionality.

AJAX? that some new thing?

Is it good or is it wack?

Unimaginable?

I think it is more like, when using AJAX, user interfaces are slowly creeping back up to where they were 10 years ago, before everything was crippled to work as a web form in the lowest common denominator browser. Web interfaces still have a hell of a long way to go before they are even close to the level of sophistication that rich clients were at 10+ years ago. Everything that is new was old once before.

DOM

Dynamic Object Model!?

"New" and "exciting", eh?

Practically every new and exciting application on the web uses some form of Ajax.

If by "new and exciting" you mean "redundant and obnoxious", then yes. Yes they do. So much for being able to browse information in a way that I dictate; now I'm subject to the whims of some insane application living inside my web browser.

If that's what it comes to, why not just stick with Flash? At least with Flash, it doesn't take a dozen images and pages of CSS to effect a rounded rectangle! (This may be an exaggeration!)

JsUnit and AJAX don't mix!

I had originally picked up a copy of this book because it appeared to be the only book on the market that spent any time discussing automated testing of AJAX components.

As I'm sure you all know, testing AJAX stuff in multiple browsers is really important if you want to guarantee cross-browser compatibility; it's also really tedious. JsUnit seemed like it would be a promising tool for AJAX automation.

In fact, I'm sad to say, JsUnit can't be used to validate AJAX components at all; in fact, it can't it be used to validate *any* command that requires a callback, including XmlHttpRequest, event handlers, pop-up windows, etc.

This is because browsers (IE/Firefox both) interpret JavaScript in a single thread, but actions you perform may have asynchronous side effects OUTSIDE of your own thread. So when you attempt one of those fancy asynchronous XmlHttpRequests, you can't just sleep/wait until your request finishes, because it will *never* finish until you completely return from your current thread. Only then will the interpreter begin working on the next item in the event queue.

That means, among other things, that it's impossible to wrap an AJAX request in a "try/catch" block:

try {
      doRequest();
      waitForRequestToFinish();
      assertRequestWasSuccessful
  } catch (e) { // do something }

Because this will never work, JsUnit's strategy of emulating JUnit or the other *Unit frameworks is fundamentally unsuitable for testing AJAX in multiple browsers.

If you *are* interested in testing AJAX applications in multiple browsers, I recommend looking into Selenium [openqa.org], which basically works around the problem by constantly scheduling timers to re-invoke itself every 10ms... that gives the interpreter enough time to do other work, and allows Selenium to implement a simple "pause" action that actually works.

Ajax is not always great!

Sure, AJAX is great for certain applications and under certain conditions, but there are always a few downsides / problems. Check out the blog entry by Harry Fuecks [sitepoint.com] for some links to good presentations describing the negative aspects of AJAX.

Unimaginable?

By using some pretty basic innovations to current technology, browsers can now deliver content in ways unimaginable only a few short years ago.

Wha? I happily admit that we've seen some pretty cool uses of the available technology in recent times, but I've personally been doing what is now known as Ajax for at least 5 years.

Would people please stop taking all the fun arcane stuff and wrapping up in media-friendly (and code monkey friendly) parcels?

Now a good chunk of my fun work will be replaced by some company's "Ajax Framework", just like web services and HTTP replaced roll-your-own network protocols, and Windows replaced custom GUIs.

Re:Ajax is suboptimal

I think there's two reasons why people are so excited about Ajax. The first reason people are so excited about Ajax is because it doesn't require anything extra to make it work. Flash requires not only the plugin (which admittedly is pretty ubiquitous out there), but also requires a development package that isn't cross platform (at least I'm not aware if there's a Linux version of the development tools). Ajax allows the neat features to come through without having to resort to Flash. The second reason Ajax has caught on is server-side validation rules can also work on the client. One set of rules = no more trying to wrestle Javascript to do proper validation. For me, that's a huge win, as I'm no fan of Javascript.

Re:Ajax is suboptimal

Your premise - that developing Ajax web applications is harder than developing Flash applications - doesn't support your conclusion - that Flash is technically better.

You are assuming that Ajax web applications and Flash applications are of a similar quality - they are not. Flash applications are essentially executables that you are handed, with no choice but to run them or not run them. Web applications are documents linked together, with stylesheets to suggest a presentation and script to suggest an interaction model.

These two approaches are totally different. As a user-agent not only understands the final product, but the individual components that a web application is comprised of, it has much better opportunity to work with those components. This means that browser features that users are used to and expect to work do not break. There's a wide range of browser features that are broken in Flash applications that are not (necessarily) broken in Ajax web applications:

• Opening links in new windows
• Opening link in new tabs
• Find and Find-as-you-type
• UserJS/Greasemonkey
• Printing (it was only a couple of hours ago I read a warning not to use my browser's Print button, but instead, the special Print command that Flash provides)
• Various Firefox extensions
• Right-click, "Search web for..."

If you think that it's easier to develop something in Flash, then fine. But don't pretend that what you end up with is of equal quality. You end up with something very different to a web application, so whether the quality is higher or lower depends on your particular circumstances, and cannot be generalised to the extent that you do.

Re:If AJAX is so amazing...

The slashdote code base is too old but, there closest competitor [digg.com] uses it! According to this [techcrunch.com] digg has almost the same traffic as slashdot.

Re:If AJAX is so amazing...

Because the Slashdot community already suffers from enough "bleeding edge" technology as it is. Besides, there's no Perl in AJAX. :P

Re:Ajax is suboptimal

Flash is pretty much a way of embedding an executable in a browser. AJAX is a buzzword for using javascript to manipulate the layout and contents of a page; the two are not directly interchangable.

If I were to be given a choice, I'd develop in Flash over "AJAX" any day. No issues with browser sniffing, cross-browser glitches, or the debugging hell that comes bundled with complex javascript apps. But there are some things you can do with javascript that you simply cannot do with Flash. And there are degrees of "AJAX" - in a number of my sites I've used a single call to XmlHTTPRequest to send data contained in a page to the server without changing the page the user is on. Trying to fulfil that requirement by redeveloping the whole site in Flash is overkill.

Re:Hmm, what worries me

I don't know about the book, but If you use DOM based javascript, the browser compatibility issues all but disappear. I'm writing an AJAX based multiplayer RPG using php and javascript, and, if I remember correctly, the ONLY bit of code I had to write for different browsers was for keypress events.

Incidentally, you are correct in that AJAX allows you to move a signifigant portion of your logic to the server and avoid some javascripts shortcomings.

Re:Ajax is suboptimal

As a user of Yahoo's mail beta, which seems to be based on Ajax, I was enthusiastic. But! such are the delays inherent in the current incarnation of the Web, that this approach is much hyped and absolutely doomed to failure. Contrast Google Earth with Ajax stuff. It is absolutely almost impossible to use. I gave up on it. Memo: the Internet is "best effort", which means that delays are unpredictable. You cannot put this in a GUI loop.

Re:"What is AJAX" for beginners

I redeclare your name to be "Smacktard".

Re:Issues with AJAX

No... you could have a timeout error (I think gmail does), but you're not interacting at a low enough level to know if the data was received and processed. (in this case, if the email message was actually sent). That problem is the same with forms and cgi though.

Re:Chinese pee

Chinese pee tastes like math.

So then what does Chinese Pi taste like?

Re:Save $5.60!

Save yourself $5.60 by buying the book here: Foundations of Ajax [amazon.com].

Muchos gracias.

And if you use the "secret" A9.com discount [amazon.com], you can save an extra 1.57%!

Appreciated, but...

from A9: You can save an additional 1.57% (/2%) on virtually all your purchases at Amazon.com by simply becoming a regular user of our search engine at A9.com and on A9.com. Once you use A9.com for a few days you will be eligible for the A9 Instant Reward.

I'm not so easily bribed... at least not for a measily 1.57%. And even if I was, the patheticness factor of this 'marketing' scheme would outweigh the savings anyway.