Using AJAX and PHP Object Generator

AJAX, as you must have heard already, is a set of not-so-new technologies (Javascript, XML, CSS) which allows developers to design web applications with minimal server post-backs. The main difference this technique offers over “traditional” or “Web 1.0” applications is a more responsive and interactive graphical interface, since browser-server interactions occur behind the scenes without the need for a page refresh.

All the examples provided up to now in our tutorials have dealt with traditional scenarios: Usually a web form, PHP objects generated by POG and some plumbing code that joins them together. In this article, we’ll demonstrate how POG can also easily be used with an AJAX UI to create a simple to-do list. But first, if you’re not familiar with concepts related to AJAX, we recommend that you read this short article which gives a 30 second AJAX tutorial.

Using POG and AJAX is not much different than using POG and regular HTML or XHTML, because essentially, in both cases, you’re dealing with PHP objects in the back-end. Whatever happens in the front-end, whether there’s a server post-back or not, is quite irrelevant. For example, let’s say you’ve created a form that captures to-do items that are used to build a to-do list. The method used to post the input to the PHP objects doesn’t really matter, as long as they’re passed correctly. In the examples provided in our tutorials, we use plain html forms and server post-backs to pass the required information. In this current article, we’ll use AJAX.

Take a look at the live example below:

In this example, whenever the “Add” button is clicked, the page makes a call to the javascript function sndReq with 2 parameters: action and todo. The sndReq function then asynchronously passes these 2 variables to rpc.php in the background. In rpc.php, we’ve added some code to handle 2 types of actions. If action is “Add”, then we create a Todo object, assign the value of todo to it, and save it. If action is “Get”, we simply get the last 5 to-do items and return them. If you followed the example on the 30-second tutorial site, you’ll notice that we essentially plugged in POG-related code in rpc.php to save and retrieve Todo objects. For aesthetic reasons, we also used a “Yellow Fade Technique” script to briefly highlight the most recently added to-do item.

Download the source code and take a look for yourself.

1. Extract the zipped file into a folder on your server.
2. Edit configuration.php with your database details.
3. Run /setup/index.php and complete the 3 steps.
4. Finally run /index.php and you should be able to add items to your to-do list.

We hope this provides somewhat of an overview of how POG can be used with AJAX web applications as well as traditional web applications. Whichever method you choose or prefer is your personal choice.

Additional Reading:
Here’s some additional links somewhat related to this post:
The Fade Anything Technique
The Yellow Fade Technique
moo.fx (super lightweight javascript effects library)
Prototype Javascript framework