Book Image

AJAX and PHP: Building Responsive Web Applications

By : Mihai Bucica, Cristian Darie, Bogdan Brinzarea, Filip Chereches-Tosa, Philippe Wauthier
Book Image

AJAX and PHP: Building Responsive Web Applications

By: Mihai Bucica, Cristian Darie, Bogdan Brinzarea, Filip Chereches-Tosa, Philippe Wauthier

Overview of this book

Assuming a basic knowledge of PHP, XML, JavaScript and MySQL, this book will help you understand how the heart of AJAX beats and how the constituent technologies work together. After teaching the foundations, the book will walk you through numerous real-world case studies covering tasks you'll be likely to need for your own applications: Server-enabled form-validation page Online chat collaboration tool Customized type-ahead text entry solution Real-time charting using SVG Database-enabled, editable and customizable data grid RSS aggregator application A server-managed sortable list with drag&drop support using the JavaScript toolkit The appendices guide you through installing your working environment, using powerful tools that enable debugging, improving, and profiling your code, working with XSLT and XPath. From the Author, Cristian Darie AJAX and PHP: Building Responsive Web Applications is mainly a book for beginners, but when designing its contents we tried to find the ideal blend of topics that would help both novice and experienced web developers make a big step forward. One customer was very kind to let us know, through a review, that we succeeded: "The theory behind all the technologies used is very clearly explained, without boring you with details about obvious things. Right from the first chapter you start learning by examples. The examples can be easily adapted to many web projects and they cover stuff that is both useful and fun." Here are a few examples of such "useful and fun" things that you can find in this book: details on using proxy scripts to work around the security measures in modern browsers client-side and server-side code that doesn't break when fed with special characters (such as <, ", etc) code that works efficiently with Internet Explorer 5, 6 and 7, Firefox, Opera, Safari, and others a very quick introduction to SVG, the new rebel kid of the web (and of the house) client-server communication based on message queues that guarantee that your messages aren't lost on the way, and arrive in the intended order at the destination server-side state management techniques that use query string parameters and database records to keep track of your client's activity simple yet effective error-handling structures that combine JavaScript code and PHP code to report when something bad happens on the client or on the server a live errata page that is updated as soon as anyone reports a suggestion or a correction a friendly AJAX tutorial and many case studies that teach you how to use JavaScript, PHP, MySQL and XML together in order to achieve wonderful results The book's authors and the publisher are listening to your feedback, and appreciate when you invest some time to let them know what you think. The first result of this collaboration is an updated version of the AJAX Chat case study that uses (and teaches) JSON instead of XML. Find this new chapter in the code download or on my website. Thanks for reading such a long message. Have fun!" Cristian Darie.
Table of Contents (17 chapters)
About the Authors
About the Reviewers


AJAX is a complex phenomenon that means different things to different people. Computer users appreciate that their favorite websites are now friendlier and feel more responsive. Web developers learn new skills that empower them to create sleek web applications with little effort. Indeed, everything sounds good about AJAX!

At its roots, AJAX is a mix of technologies that lets you get rid of the evil page reload, which represents the dead time when navigating from one page to another. Eliminating page reloads is just one step away from enabling more complex features into websites, such as real-time data validation, drag and drop, and other tasks that weren’t traditionally associated with web applications. Although the AJAX ingredients are mature (the XMLHttpRequest object, which is the heart of AJAX, was created by Microsoft in 1999), their new role in the new wave of web trends is very young, and we’ll witness a number of changes before these technologies will be properly used to the best benefit of the end users. At the time of writing this book, the “AJAX” name is about just one year old.

AJAX isn’t, of course, the answer to all the Web’s problems, as the current hype around it may suggest. As with any other technology, AJAX can be overused, or used the wrong way. AJAX also comes with problems of its own: you need to fight with browser inconsistencies, AJAX‑specific pages don’t work on browsers without JavaScript, they can’t be easily bookmarked by users, and search engines don’t always know how to parse them. Also, not everyone likes AJAX. While some are developing enterprise architectures using JavaScript, others prefer not to use it at all. When the hype is over, most will probably agree that the middle way is the wisest way to go for most scenarios.

In AJAX and PHP: Building Responsive Web Applications, we took a pragmatic and safe approach by teaching relevant patterns and best practices that we think any web developer will need sooner or later. We teach you how to avoid the common pitfalls, how to write efficient AJAX code, and how to achieve functionality that is easy to integrate into current and future web applications, without requiring you to rebuild the whole solution around AJAX. You’ll be able to use the knowledge you learn from this book right away, into your PHP web applications.

We hope you’ll find this book useful and relevant to your projects. For the latest details and updates regarding this book, please visit its mini-site at

The book’s mini-site also contains additional free chapters and resources, which we recommend you check out when you have the time.

What This Book Covers

Chapter 1: AJAX and the Future of Web Applications is an initial incursion into the world of AJAX and the vast possibilities it opens up for web developers and companies, to offer a better experience to their users. In this chapter you’ll also build your first AJAX-enabled web page, which will give you a first look of the component technologies.

Chapter 2: Client-Side Techniques with Smarter JavaScript will guide you through the technologies you’ll use to build AJAX web clients, using JavaScript, the DOM, the XMLHttpRequest object, and XML. While not being a complete tutorial for these technologies, you’ll be put on the right track for using them together to build a solid foundation for your future applications.

Chapter 3: Server-Side Techniques with PHP and MySQL completes the theoretical foundation by presenting how to create smart servers to interact with your AJAX client. You’ll learn various techniques for implementing common tasks, including handling basic JavaScript security and error-handling problems.

Chapter 4: AJAX Form Validation guides you through creating a modern, responsive, and secure form validation system that implements both real-time AJAX validation and server-side validation on form submission.

Chapter 5: AJAX Chat presents a simple online chat that works exclusively using AJAX code, without using Java applets, Flash code, or other specialized libraries as most chat applications do these days.

Chapter 6: AJAX Suggest and Autocomplete builds a Google Suggest-like feature, that helps you quickly find PHP functions, and forwards you to the official help page for the chosen function.

Chapter 7: AJAX Real-Time Charting with SVG teaches you how to implement a real-time charting solution with AJAX and SVG. SVG (Scalable Vector Graphics) is a text-based graphics language that can be used to draw shapes and text.

Chapter 8: AJAX Grid teaches you how to build powerful AJAX-enabled data grids. You’ll learn how to parse XML documents using XSLT to generate the output of your grid.

Chapter 9: AJAX RSS Reader uses the SimpleXML PHP library, XML, and XSLT to build a simple RSS aggregator.

Chapter 10: AJAX Drag and Drop is a demonstration of using the framework to build a simple list of elements with drag-and-drop functionality.

Appendix A: Preparing Your Working Environment teaches you how to install and configure the required software: Apache, PHP, MySQL, phpMyAdmin. The examples in this book assume that you have set up your environment and sample database as shown here.

At the book’s mini-site at, you can find the online demos for all the book’s AJAX case studies.

What You Need for This Book

To go through the examples of this book you need PHP 5, a web server, and a database server. We have tested the code under several environments, but mostly with the Apache 2 web server, and MySQL 4.1 and MySQL 5 databases.

You can choose, however, to use another web server, or another database product, in which case the procedures presented in the chapters might not be 100% accurate. It is important to have PHP 5 or newer, because we use some features, such as Object Oriented Programming support, which aren’t available in older versions.

Please read Appendix A for more details about setting up your machine. If your machine already has the required software, you still need to read the final part of Appendix A, where you are instructed about creating a database that is used for the examples in this book.


In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

There are three styles for code. Code words in text are shown as follows: “We can include other contexts through the use of the include directive.”

A block of code will be set as follows:

// function calls the server using the XMLHttpRequest object 
function process()
  // retrieve the name typed by the user on the form
  name = document.getElementById(“myName”).value;
  // execute the quickstart.php page from the server“GET”, “quickstart.php?name=” + name, false);  
  // make synchronous server request
  // read the response

When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be made bold:

// function calls the server using the XMLHttpRequest object 
function process()
  // retrieve the name typed by the user on the form
  name = document.getElementById(“myName”).value;
  // execute the quickstart.php page from the server“GET”, “quickstart.php?name=” + name, false);    // make synchronous server request   xmlHttp.send(null);    // read the response  handleServerResponse();

Any command-line input and output is written as follows:

./configure --prefix=/usr/local/apache2 --enable-so --enable-ssl --with-ssl --enable-auth-digest

New terms and important words are introduced in a bold-type font. Words that you see on the screen, in menus or dialog boxes for example, appear in our text like this: “clicking the Next button moves you to the next screen”.


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader Feedback

Feedback from our readers is always welcome. Let us know what you think about this book, what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply drop an email to , making sure to mention the book title in the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on or email .

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on

Customer Support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the Example Code for the Book

Visit, and select this book from the list of titles to download any example code or extra resources for this book. The files available for download will then be displayed.


The downloadable files contain instructions on how to use them.


Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in text or code—we would be grateful if you would report this to us. By doing this you can save other readers from frustration, and help to improve subsequent versions of this book. If you find any errata, report them by visiting, selecting your book, clicking on the Submit Errata link, and entering the details of your errata. Once your errata have been verified, your submission will be accepted and the errata added to the list of existing errata. The existing errata can be viewed by selecting your title from


You can contact us at if you are having a problem with some aspect of the book, and we will do our best to address it.