Tuesday, January 20, 2009

Super Simple AJAX Forms with jQuery and JSON : Introduction

I am a huge advocate of SOA architecture. I find it reduces code, encapsulates and makes for a very cohesive web environment.  Wow, what a sales pitch eh?  Seriously if you think that doing an asynchronous web application is more effort than it's worth then you need to keep reading.  I developed this code example to illustrate just how elegant, simple and effective your web application can be.  Furthermore this code you are about to see is completely reusable.  You should be able to use it over and over again as a framework for all your web applications.

To illustrate just how simple this all is I have done it with just 2 files (3 if you count jQuery).  The client side webpage.html and the server side dataservice.php.  You can download the complete source code for these example, upload it to a PHP server and you'll be on your way.  You'll need only to create a simple database called users and some dummy data.  I did not include that in these examples since you should really be able to do all that yourself.  

The entire purpose of this exercise was to create some clean and reusable code for managing a form where users need to edit data.  These type of forms have typically the following types of problems when you do it with traditional HTML and PHP.
  1. How do you know what data changed.  Usually developers replace all the data or do compares manually.
  2. Many times code is placed inside the HTML/PHP to do the update.  Not very easy to read, poor design.
  3. Code sometimes has includes or functions, hard to track things down.  It's better but still very difficult to work with on larger systems.
  4. HTML/PHP often has business logic mixed into the presentation layer.  Validation, etc.
You wont find these types of problems in the code I'm providing you here.  

webpage.html
The only logic in the HTML (and it's just HTML and JavaScript) is the very simple aggregation and posting of data.  It also pulls data down and posts it into the form fields.  It also tracks which fields have been modified and only sends the data that needs to update.  That's it.

dataservice.php
This is the meat and potatoes.  This pulls data from the database and posts changes to it.  There is no "insert" code in here but you can easily build your own should you need it.  The framework in this example is designed to show you how easy AJAX/JSON can be.  The dataservice.php can easily be extended to validate and return responses such as "missing data", "bad data", etc.  Nice thing is your business logic is contained here.  It's also not exposed out on the web where someone can use it against you and spam you or worse.  

jQuery is used to save ourselves a boatload of work.  It's free and the AJAX libraries are easy to use.  I only use the simple methods here, I have used the more robust features in jQuery but for 99% of the users/web pages out there this works just fine.

How it works
The application works by pulling down a single record in the database.  After it pulls down the record it uses the JSON data (by parsing the key names) to find HTML ID's using jQuery.  If there is a match with a FLD_ prefix on the field name then we populate it with our JSON data.  Then, anytime a field is changed on the form, we add a CSS class to it.  The CSS class serves two purposes.  First the user can see what data has changed and what will be posted.  Second, the code uses the class to determine which fields need to be sent to the server.  Finally, once the user clicks submit the changed fields are read, tied together in a GET url and sent off to the dataservice.php.  The service updates the record and returns success/failure.

The next post we will disassemble webpage.html and cover how it works in detail.


2 comments:

Anonymous said...

after reading your freaking pitch, the download link doesn't even work. Please send me mail @ knewdiddy@yahoo.com if you decide to put up the link

Rob said...

The relative link was the issue, it's been updated.