AJAX and PHP

June 7, 2010

AJAX and PHP

Building Modern Web Applications – Second Edition

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.

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 Modern Web Applications – Second Edition, we take 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, in your PHP web applications.

What This Book Covers

Chapter 1: The World of AJAX and PHP is all about a quick introduction to the world of
AJAX. In order to proceed with learning how to build AJAX applications, it’s important
to understand why and where they are useful. It describes the XMLHttpRequest object,
which is the key element that enables the client-side JavaScript code to call a page on the
server asynchronously.

Chapter 2: JavaScript and the AJAX Client walks you through many fields such as
working with HTML, JavaScript, CSS, the DOM, XML, and XMLHttpRequest. It
discusses the theory (and practice) that you will need to know to make these components
come together smoothly, and form a solid foundation for your future AJAX applications.
It also shows you how to implement simple error-handling techniques, and how to write
code efficiently.

Chapter 3: Object Oriented JavaScript covers a large area of what object-oriented
programming means in the world of JavaScript starting from basic features and
going far into the execution context of functions. It teaches you the basic OOP
concepts—encapsulation, polymorphism, and inheritance, how to work with JavaScript
objects, functions, classes, and prototypes, how to simulate private, instance, and static
class members in JavaScript, what the JavaScript execution context is, how to implement
inheritance by using constructor functions and prototyping, and the basics of JSON.

Chapter 4: Using PHP and MySQL on the Server starts putting the server to work, using
PHP to generate dynamic output, and MySQL to manipulate and store the backend data.
This chapter shows you how to use XML and JSON with PHP (so that you can create
server-side code that communicates with your JavaScript client), how to implement errorhandling
code in your server-side PHP code, and how to work with MySQL databases.

Chapter 5: AJAX Form Validation creates a form validation application that implements
traditional techniques with added AJAX flavor, thereby making the form more userfriendly,
responsive, and pleasing. The intention of this chapter isn’t to build the perfect
validation technique but, rather, a working proof of concept that takes care of user input
and ensures its validity.

Chapter 6: Debugging and Profiling AJAX Applications teaches how to enable and use
Internet Explorer’s debugging capabilities. It shows how you can work with Web
Development Helper, Developer Toolbar, and other Internet Explorer tools and with
Firefox plugins such as Firebug, Venkman JavaScript Debugger, and Web Developer.

Chapter 7: Advanced Patterns and Techniques briefly covers some of the most important
patterns and techniques covering usability, security, and techniques. Looking at methods,
patterns, and techniques is so important that it has developed into its own science and has
created a set of guidelines for typical problems that offer us predictable results.

Chapter 8: AJAX Chat with jQuery teaches how to use AJAX to easily implement an
online chat solution. This will also be your opportunity to use one of the most important
JavaScript frameworks around—jQuery. More precisely, this chapter will explain the
basics of jQuery and show how to create a simple, yet efficient clientserver chat
mechanism using AJAX.

Chapter 9: AJAX Grid explains the usage of an AJAX-enabled data grid plugin, jqGrid.

Appendix: Preparing Your Working Environment covers the installation instructions that
set up your machine for the exercises in this book. It also covers preparing the database
that is used in many examples throughout the book.

AJAX Form Validation

Input data validation is an essential feature for any modern software application.
In the case of web applications, validation is an even more sensitive area because
your application is widely reachable by many users with varying skill sets
(and intentions).

Validation is not something that you can play with—invalid data has the potential
to harm the application’s functionality, result in errant and inaccurate reporting, and
even corrupt the application’s most sensitive area—the database.

Validating data requires checking whether the data entered by the user complies
with rules established in accordance with the business rules of your application before
allowing it to be used. For example, if dates must be entered in the YYYY-MM-DD
format, then a date of February 28 would be invalid. Email addresses and phone
numbers are other examples of data that should be checked against valid formats.
In addition, validation must guard against “SQL injection”—which could corrupt,
control, and/or access your data and database.



	The importance of carefully defining input data validation rules

	and consistently applying those rules cannot be overstated!

Historically, web form validation was implemented primarily on the server side,
after the form was submitted. In some cases, on the client side, there was also some
JavaScript code that performed simple validation such as checking whether the email
address was valid or if a field had been left blank.

But, there were a few problems with traditional web form validation techniques:

Server-side form validation butted up against the limits of the HTTP
protocol—a stateless protocol. Unless special code was written to deal with
this issue, submitting a page with invalid data had the user receiving an
empty form as a reply, and then, much to his chagrin, the entire form had to
be filled in again from scratch. How annoying.

After submitting the page, the user waited (not so) patiently for a full-page
reload. With every mistake made in filling out the form, the annoying “new
page reload with blank form” happened.

In this chapter, we will create a form validation application that implements
traditional techniques with added AJAX fl avor, thereby making the form more
user-friendly, responsive, and pleasing. In the AJAX world, entered data is validated
on the fl y, so the users are never confronted with waiting for full-page reloads or the
rude “blank form” as a reply.

The server is the last line of defense against invalid data, so even if you implement
client-side validation, server-side validation is mandatory. The JavaScript code that
runs on the client can be disabled permanently from the browser’s settings and/or it
can be easily modified or bypassed.

Implementing AJAX form validation

The form validation application we will build in this chapter validates the form at
the server side on the classic form submit, implementing AJAX validation while the
user navigates through the form. The final validation is performed at the server, as
shown in Figure 5-1:

Doing a final server-side validation when the form is submitted should never be
considered optional. If someone disables JavaScript in the browser settings, AJAX
validation on the client side clearly won’t work, exposing sensitive data, and thereby
allowing an evil-intentioned visitor to harm important data on the server (for
example, through SQL injection).



	Always validate user input on the server.

As shown in the preceding figure, the application you are about to build
validates a registration form using both AJAX validation (client side) and typical
server-side validation:

AJAX-style (client side): It happens when each form field loses focus
(onblur). The field’s value is immediately sent to and evaluated by the
server, which then returns a result (0 for failure, 1 for success). If validation
fails, an error message will appear and notify the user about the failed
validation, as shown in Figure 5-3.

PHP-style (server side): This is the usual validation you would do on the
server—checking user input against certain rules after the entire form is
submitted. If no errors are found and the input data is valid, the browser
is redirected to a success page, as shown in Figure 5-4. If validation fails,
however, the user is sent back to the form page with the invalid fields
highlighted, as shown in Figure 5-3.