There are many libraries and frameworks available for JavaScript, including MooTools, Ext, Dojo, and Prototype. So, why use jQuery and not others? Here are some of the reasons:

jQuery is available at Google's Ajax Libs CDN (http://code.google.com/apis/ajaxlibs), so probably you already have it in your browser's cache.

There are benefits and detractors to everything. So in the end, it's a matter of taste.

In my case, I was using MooTools before I turned to jQuery, but MooTools' habit of extending every element it touches was interfering with my own code, so I had to replace it.

I chose jQuery because the body of knowledge on it was very large (every second article on JavaScript blogs appears to mention jQuery), it's impressively clean to work with, and there are a massive number of plugins available.

Also, because jQuery is used in so many large projects (a few of which are mentioned in the Projects that use PHP and jQuery section of this chapter). If you have ever worked on any of those projects, you will find that the skills you learned on them are transferable to other projects using jQuery.

Traditional network applications have both server and client side, each of which is a program in its own right.

As a very simple example, consider a networked game, where you are playing against a number of other people. The server holds a database of the present positions of everything, and decides if something is allowed or not. On each player's computer, there is a client, which gets data from the server and displays it in a user-friendly way, such as rendering a 3D world that you can move around in. The client is smart enough that if you try to do something that is obviously not allowed, such as run through a wall, then it won't let you.

It would be silly if a 3D screen was generated on the server and was sent to the client 24 times per second. And it would be awkward if you tried to do something like walk through a wall, and had to wait for the server to decide if it was allowed or not.

However, in a pure PHP environment, that's exactly what has been happening—the server generates absolutely everything that the client displays. If an element needs to be removed from a table, for example, then the server needs to be told, so that it can give the client the new view. If you try to do something illegal, such as submit a blank form where an email address is required, then pure PHP applications will let you do that, wasting time and server resources.

However, using JavaScript, and especially using Ajax, the client side is no longer a "dumb terminal" for the server. We can write applications fully on the client side, if we wish, using the server purely as a database. This book will demonstrate ways to work towards that.

Although Ajax stands for Asynchronous JavaScript And XML, it's a misnomer. This is because in most cases, no XML is involved (either plain HTML or data in JSON format is usually used). Ajax allows a client to open a data channel between itself and the server, allowing JavaScript to load new information from the server without needing to refresh the entire screen.

JSON stands for JavaScript Object Notation. It is a simple data storage format, which can be used to transfer information about strings, numbers, arrays, and associative arrays between various languages. It is much smaller than XML, and is much easier to transform because there is a direct relationship between the text format and the internal data format. It can be used in both PHP and JavaScript. It's based on how JavaScript is actually written, so it can be natively compiled into an object in JavaScript.

In JavaScript, you can create an actual data object from JSON by simply "eval"ing it (or using the new json.decode function in newer browsers). In PHP, you can use the json_decode and json_encode functions to convert from and to JSON.

With Ajax, we can provide a client-side experience, which had only been possible beforehand using external plugins, such as Java or Flash. It could not safely be assumed that these plugins were available on the client. Every major browser now supports Ajax, so there are much fewer reasons to rely on proprietary technology these days.

jQuery simplifies Ajax. With pure Ajax, you need to do low-level stuff like create an XMLHTTPRequest object (taking care of cross-browser incompatibilities), set callbacks, check response values, and so on. With jQuery, all you need to do is use $.get or one of the other jQuery JSON functions. These functions will take care of the low-level stuff for you.

In every chapter of this book, I will provide a few code examples. If you wish to try them out, you will need to replicate the test environment I'm using here.

On my test server, my directory layout (within the public_html directory) is like this:

./php_and_jquery
./php_and_jquery/jquery.min.js
./php_and_jquery/jquery-ui.css
./php_and_jquery/jquery-ui.min.js
./php_and_jquery/1-tests 
./php_and_jquery/2-contextual_help 
[... others from various chapters ...]
./php_and_jquery/ckeditor 
./php_and_jquery/images 
./php_and_jquery/jquery-validate 
[... other plugins ...]

You can see that there's a common theme—everything has its own subdirectory. The jQuery library is kept in the root directory, ./php_and_jquery/, along with the jQuery UI library (when we use it). We will discuss where to get these from in Chapter 2, Quick Tricks.

Here is the root directory of my own test server. It shows the libraries we will use throughout the book, and two test directories (9-5 and 9-4):

When creating your own test server, it should end up looking like this.

You can start out with the empty directories. Each chapter will explain what new files to download and where to get them from.

Each of the examples has a number of screenshots, so you can verify your own tests against what my tests display.

Here is a small list of projects that use jQuery along with PHP. This illustrates the variety of uses that jQuery is put to.

WordPress

WordPress (http://wordpress.org/) is probably the best-known blogging software on the net. Recently, the admin dashboard area was given a thorough going over, and is now extremely flexible with the areas you can move around or remove, a navigation menu you can hide at the click of a button, and other improvements. jQuery is used to handle autosaves, word counts, and much more.

RoundCube

RoundCube (http://roundcube.net/) allows you to read your emails online using an application designed to look similar to your normal email client. With jQuery, the engine allows emails to be removed, moved around, and so on, without reloading the whole page.

KFM

I'm proud to say that this is one of my own projects. KFM (http://kfm.verens.com/) is a file manager, which allows you to upload, sort, and rename (and more) your files online. You can even edit text files or play media files. The project is designed to look like a desktop file manager, complete with file icons, tree directory, and so on. jQuery is used for most of it.

Drupal

Drupal (http://drupal.org/) is a Content Management System. Since version 5, jQuery has been included as part of the core. It's more prominently used in some of the modules, but some core functionality, such as story creation is enhanced by allowing text boxes to be re-sized, optional sections to be hidden/shown, and so on.

Now, without further ado, let's get on with the fun stuff.

In this chapter, we discussed what jQuery is, why you would want to use it, and why is it useful to combine it with PHP.

We also saw a list of projects illustrating some uses for combining PHP and jQuery.

In the next chapter, we will look at a few examples of how you can use jQuery immediately to give your site a more "live" feel, without needing to know a lot of JavaScript.