About this Book
Ajax is a growing new technology at the time of this writing and we’re delighted to bring you the lowdown on it, in the inimitable style of Manning’s In Action series. In doing so, though, we faced an interesting problem. Although Ajax is indisputably hot, it isn’t really new. It isn’t really a technology, either.
Let us explain. Ajax brings together several well-established web technologies and uses them in new and interesting ways. Learning to use a completely new technology for the first time is in some ways simpler because you start with a blank slate. Ajax is different: there is also much to unlearn. Because of this, our book is organized somewhat differently from most Manning In Action books. You may notice this when reading and should know that we feel the way it is organized best suits this subject.
And, as you will see, although the Ajax technologies themselves are all client side, the differences extend all the way down to the server. This book is mainly about client-side programming, and most of the code examples that you’ll find in here are JavaScript. The principles of Ajax decouple the client from the server beautifully, and can be used with any server-side language. We’ve therefore got a broad audience to address and have opted to present our server-side code in a mixture of languages: PHP, Java, C#, and Visual Basic .NET. More importantly, though, we’ve tried to keep the server-side code relatively simple and implementation-agnostic, so that you can port it to whatever environment you choose. Where we do use language-specific features, we explain them in enough detail for those unfamiliar with that particular environment to figure out what we’re doing.
Who should read this book?
Ajax is at the crossroads of a number of disciplines; readers will approach it from a number of directions. On the one hand there are professional enterprise developers with computer science degrees and several years of hands-on experience with large software projects, who need to sometimes pop their heads above the battlements and work with the presentation tier. On the other hand are creative professionals who have moved from graphic design to web design and “new media,” and taught themselves how to program using scripting languages such as PHP, Visual Basic, or JavaScript/ActionScript. In between there are desktop app developers retraining for the Web and sysadmins called upon to put together web-based management tools, as well as many others.
All of these possible readers have a real interest in Ajax. We’ve tried to address the needs of all of them, at least to some extent, in this book. We provide pointers to the basic web technologies for the server-side developer used to treating the web browser as a dumb terminal. We also give a grounding in software design and organization for the new media developer who may be more used to ad hoc coding styles. Wherever you come from, Ajax is a cross-disciplinary technology and will lead you into some unfamiliar areas. We’re going to stretch you a bit, and ask you to pick up a few new skills along the way. We’ve done the same in our own use of Ajax, even while writing this book. We have found it to be a very rewarding and enjoyable experience, with benefits extending to other aspects of our professional lives.
Roadmap
This book is divided into four parts. Part 1 will tell you what Ajax is, explain why it is a useful addition to your development toolbox, and introduce the tools that can make you successful. Part 2 covers the core techniques that make an Ajax application work, and part 3 builds on these to discuss what is needed to go from proof of concept to production-ready software. In part 4 we take a direct hands-on approach, and build five Ajax projects step by step; we then refactor them into drop-in components that you can use in your own web applications.
As we have said, Ajax is not a technology but a process. We’ve therefore dedicated chapter 1 to reorienting developers familiar with pre-Ajax web development. We discuss the fundamental differences between Ajax and the classic web application, how to think about usability, and other conceptual goodies. If you want to find out what the buzz around Ajax is, we suggest you start here. If you just want to eat, drink, and sleep code, then you’d best move on to chapter 2.
The Ajax technologies are all reasonably well documented in their own right already. We’ve provided a whistle-stop, example-driven run through these technologies in chapter 2, but we haven’t aimed at being comprehensive. What we have done is emphasize where the technology is used differently, or behaves differently, as a result of being part of Ajax.
Chapter 3 introduces the third main theme for this book, managing the Ajax codebase. Having watched a JavaScript codebase grow to over 1.5 MB of source code, we can attest to the fact that writing JavaScript for Ajax is a different ball game. We talk design patterns and refactoring here, not because we think they’re cool, but because we’ve found them to be invaluable, practical tools in working with Ajax. And we think you will too as you start to pick up speed.
In chapters 4 and 5, we turn our sights on the core components of Ajax, and apply our design pattern knowledge to find the best practices. Chapter 4 looks at ways of keeping your code clean on the client itself, applying the old web workhorse, Model-View-Controller, in a new way. Chapter 5 looks at the different ways of communicating between the client and the server and how various types of frameworks can be adapted to work with Ajax. By this point, we have covered all the basic plumbing and you’ll know how Ajax operates end to end.
Chapters 6 through 8 build on the fundamental knowledge that we’ve acquired to look at how to add polish to your application and go beyond a proof of concept to something that’s fun, and safe, to usable in the real world. Chapter 6 addresses the user experience, and takes an in-depth look at ways of keeping the user informed while asynchronous tasks are executing. There’s a balance to be struck between keeping out of the user’s way and keeping him in the dark, and we show you how to find that happy middle ground here.
Chapter 7 looks at the issue of security in Ajax from a number of angles. Ajax is a web technology and many of the issues that it faces are no different from any other web app. We cover the basic ground, concentrating on Ajax-specific issues here, such as securely importing generated JavaScript from the server, and protecting your web service entry points from unwanted direct manipulation. Security can be a showstopper for serious applications, and we give the basic steps needed to keep it under control here.
Chapter 8 discusses that other showstopper, performance (or rather, lack of it!). We show how to monitor the performance of your application and how to analyze code in order to improve it and keep those improvements consistent across an application.
In part 4, which consists of chapters 9 through 13, we switch gears to look at a number of Ajax projects. In each case, we code the functionality up in a straightforward way and then refactor it into something robust that you can drop into your own projects with no more than a few lines of code. This gives you the benefit of understanding the principles, the benefits of reuse, as well as showing Ajax refactoring in action.
In chapter 9, we look at a simple way to give the user a richer experience by enhancing HTML forms with Ajax: we use data entered in one field to prepopulate a second drop-down list by making a background request to the server. We continue the theme of form enhancement in chapter 10 with an implementation of type-ahead suggest, fetching data from the server in response to user keystrokes.
Chapter 11 moves on to the wider possibilities of Ajax user interfaces. We develop a complete portal application that resembles a workstation desktop more than a web page, complete with its own draggable, resizable windows. Ajax processes track window movements in the background, so that the desktop is always in the same state you left it, even if you log back in on a different machine.
Chapter 12 develops an Ajax-based search system and demonstrates the power of client-side XSLT as a way of turning raw XML data into formatted, styled content.
In chapter 13, we present an Ajax client without a back-end implementation. It still talks to server processes, but in this case, does so directly to blog and news syndication feeds, using the Internet standard RSS protocol.
Finally, we include three appendices that we hope you’ll find useful. The body of the book discusses the technology itself. With a new, cross-disciplinary technology, assembling the tools to use it effectively is more of a challenge than with a mature technology stack such as J2EE or .NET. The vendors haven’t started offering Ajax tools yet, but we’re sure that they will! In the meantime, we provide in appendix A an overview of the tools and tricks that we’ve used to develop our Ajax projects and to keep our house in order.
Appendix B is for enterprise programmers who understand software design principles but aren’t quite sure how to apply them in such a flexible, unstructured, and well, downright odd language as JavaScript. We walk through what the language can do, and point out where the main divergences from Java and C# lie.
If the tool vendors haven’t quite caught up with Ajax yet, neither have the framework developers. The Ajax framework scene is a hotbed of innovation, intrigue (and often re-invention) right now. Appendix C rounds up the Ajax frameworks and toolkits that we know of at the moment, and provides a short overview and link for each.
Code conventions
All source code in listings or in text is in a fixed-width font like this to separate it from ordinary text. We make use of many languages and markups in this book—JavaScript, HTML, CSS, XML, Java, C#, Visual Basic .NET, and PHP—but we try to adopt a consistent approach. Method and function names, object properties, XML elements, and attributes in text are presented using this same font.
In many cases, the original source code has been reformatted: we’ve added line breaks and reworked indentation to accommodate the available page space in the book. In rare cases even this was not enough, and listings include line-continuation markers. Additionally, many comments have been removed from the listings. Where appropriate, we’ve also cut implementation details that distract rather than help tell the story, such as JavaBean setters and getters, import and include statements, and namespace declarations.
Code annotations accompany many of the listings, highlighting important concepts. In some cases, numbered bullets link to explanations that follow the listing.
Code downloads
Source code for all of the working examples in this book is available for download from http://www.manning.com/crane.
We realize that not all of you will have a .NET server, J2EE app server, and a Linux, Apache, MySQL, PHP/Python/Perl (LAMP) setup sitting on your desk, and that your principal interest in this book is in the client technology. As a result, we’ve tried to include “mock”-based versions of the example code that can be run with static dummy data from any web server, including Apache, Tomcat, and IIS. These are in addition to the full working examples, so that if you do enjoy wrestling with databases and app servers, you can dig in. Some basic setup documentation is provided with the download.
Author Online
Purchase of Ajax in Action includes free access to a private web forum run by Manning Publications where you can make comments about the book, ask technical questions, and receive help from the authors and from other users. To access the forum and subscribe to it, point your web browser to http://www.manning.com/crane. This page provides information on how to get on the forum once you are registered, what kind of help is available, and the rules of conduct on the forum.
Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and the authors can take place. It is not a commitment to any specific amount of participation on the part of the authors, whose contribution to the book’s forum remains voluntary (and unpaid). We suggest you try asking the authors some challenging questions, lest their interest stray!
The Author Online forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.
About the title
By combining introductions, overviews, and how-to examples, the In Action books are designed to help learning and remembering. According to research in cognitive science, the things people best remember are things they discover during self-motivated exploration.
Although no one at Manning is a cognitive scientist, we are convinced that in order for learning to become permanent it must pass through stages of exploration, play, and, interestingly, retelling of what was learned. People understand and remember new things, which is to say they master them, only after actively exploring them. Humans learn in action. An essential part of all In Action guides is that they are example-driven. This encourages readers to try things out, to play with new code, and explore new ideas.
There is another, more mundane, reason for the title of this book: our readers are busy. They use books to do a job or to solve a problem. They need books that allow them to jump in and jump out easily and learn just what they want just when they want it. They need books that aid them “in action.” The books in this series are designed for such readers.
About the cover illustration
The figure on the cover of Ajax in Action is a “Sultana,” a female member of a sultan’s family; both his wife and his mother could be addressed by that name. The illustration is taken from a collection of costumes of the Ottoman Empire published on January 1, 1802, by William Miller of Old Bond Street, London. The title page is missing from the collection and we have been unable to track it down to date. The book’s table of contents identifies the figures in both English and French, and each illustration bears the names of two artists who worked on it, both of whom would no doubt be surprised to find their art gracing the front cover of a computer programming book...two hundred years later.
The collection was purchased by a Manning editor at an antiquarian flea market in the “Garage” on West 26th Street in Manhattan. The seller was an American based in Ankara, Turkey, and the transaction took place just as he was packing up his stand for the day. The Manning editor did not have on his person the substantial amount of cash that was required for the purchase, and a credit card and check were both politely turned down. With the seller flying back to Ankara that evening the situation was getting hopeless. What was the solution? It turned out to be nothing more than an old-fashioned verbal agreement sealed with a handshake. The seller simply proposed that the money be transferred to him by wire and the editor walked out with the bank information on a piece of paper and the portfolio of images under his arm. Needless to say, we transferred the funds the next day, and we remain grateful and impressed by this unknown person’s trust in one of us. It recalls something that might have happened a long time ago.
The pictures from the Ottoman collection, like the other illustrations that appear on our covers, bring to life the richness and variety of dress customs of two centuries ago. They recall the sense of isolation and distance of that period—and of every other historic period except our own hyperkinetic present.
Dress codes have changed since then and the diversity by region, so rich at the time, has faded away. It is now often hard to tell the inhabitant of one continent from another. Perhaps, trying to view it optimistically, we have traded a cultural and visual diversity for a more varied personal life. Or a more varied and interesting intellectual and technical life.
We at Manning celebrate the inventiveness, the initiative, and, yes, the fun of the computer business with book covers based on the rich diversity of regional life of two centuries ago—brought back to life by the pictures from this collection.