So. In an effort to come up with a solution to a very common AJAX problem (at least for me), I have put together a little tutorial for handling AJAX responses in a simple, yet effective manner. Here’s the problem:
AJAX is used sometimes for validation, sometimes for quick little updates to the database, and other times for the same old add/edit/delete functions. There’s an infinite ways AJAX can be used in your web application, so I’m pretty sure my solution will not work 100% of the time, but it may make things a little bit easier to handle 90% of the time.
So sometimes when you execute an AJAX request, you have a “positive” and a “negative” response. Positive meaning that the request performed successfully and you now want to do something with the positive response. It can also come back negative, like, it wasn’t completed because the user’s session timed out, or the data passed failed validation, or for some reason failed to do what it was supposed to do and a response needed to be sent back to the user. Please note, when I talk about “positive” and “negative” (and later “success”), I’m not referring to the default options for the $.ajax() method in jQuery for finding out if the AJAX request itself was successful (or encountered an error), however I’m referring to the actual result itself (assuming that the request was a success).
Let’s get to the code and maybe make some sense of all this jabbering I’m doing.
To start out, you’ll need the latest jQuery library (found here).
Place a reference to jquery inside your document’s <head> tags.
I’m going to go ahead and put the necessary code here for usage, then I’ll give a few examples.
As you can see, it’s very simple (right now). All it does is converts your AJAX response from a string to an object, evaluates the scripts inside the object, then returns the object to your script, with the optional confirm dialog which will determine whether or not the result was a successful one (positive).
In PHP, there is a function called json_encode() which will convert an array into a JSON object. Other application languages may have something similar, or you can just create the JSON string by hand. Here are a couple of links you want more information about JSON.
So below is my sample AJAX application.
My AJAX response page:
Please note my example is very simple and basic. Also note, in my example, I’m using an asynchronous request. A non-asynchronous request is required if you want to use the Confirm dialog to determine the success of your request (as well as if you want to use your success value to determine whether or not to submit the form), you’ll want to use the option async:false. (see the 2nd commented out example)
So I hope this makes sense. I wrote this to either encourage consistency with AJAX results, so anybody picking up someone else’s project can make heads or tails as to what’s going on with AJAX results, or in hopes that someone would look at it, see the effort I’m trying to make and provide a better solution to this problem.
The reason I went this route is mainly because I’ve been getting into working with an MVC (CodeIgniter) and a lot of functionality is based off Arrays which makes programming highly flexible and dynamic. I figured to do this in Javascript, it was either with JSON or XML. I felt like it’s only right to use JSON with Javascript since they pretty much go hand in hand. Plus with the hopeful addition to jQuery to support JSON parsing, it could be very powerful.
I’m using this on a current project and so far it’s been working pretty good. I went ahead and created a PHP Class for this, which is easily integrated into CodeIgniter. It too is very simple. I called it Cajax because I typically will create a Controller called Ajax so I didn’t want it to conflict. See below:
Please comment to let me know what you think, or how you would modify this method, or if you think you have a better solution. I’d love to hear it. Thanks for reading!