Getting started with AJAX.

When it comes to building an interactive web application, creating a seamless interaction between the client-side and the server-side can be very important depending on the experience you want to give your user. The trouble is, however, that most server-side languages can’t access client-side code, and therefore can’t relay that information back to the server to execute or save it and vice versa – without a page refresh anyway, and that’s what we’re aiming to avoid here.  For most people, getting started with AJAX can be a daunting thing which is why I’m writing this post as an introduction. I won’t be presenting any code, but rather providing a walkthrough of the steps you will need to take to complete an AJAX request.

So let’s get started!

1. Trigger and Listen
   To start things off we’ll need to tell our browser when to send a request . This can be as simple as adding a listener that listens for a button’s click event.
2. Collect our data
   Most of the time, AJAX is used to submit a form so at this point, it’s a good time to collect each field’s value and prepare something to send to the server. This can take many forms, depending on how your server handles  incoming requests. The most common way however is just to build a query string and tack it onto to the end of the URL you want to send your AJAX request to. If your server is set up to accept JSON, you could do that too.

3. Make the request
   Now that we have everything we need, we can send our request! Our request should include the data we just collected as well as a HTTP verb that describes the action we’re taking (GET or POST, if you’re making a change to a the database, it will most likely be POST) that way your server will know how to handle the request. If you sent data using a query string, you will be able to access it with PHP using the global $_POST variable.
4. Providing feedback
   So now the request has been made, that’s all yes? No. We now need tell our user that what they have done has succeeded or failed. Luckily our server responds with a success or failure message that we can listen for and provide the appropriate feedback, such as a success flash message or whatever fits in your UX guidelines.

Not so hard after all! And this is about as complicated as it gets, you can listen for other events such as drag and drop, and send whatever data you want to your server, but this is just a basic illustration of how to get started. I wish you all the best and if you have any questions please ask away!

Further Reading:

jQuery’s .ajax() method - provides a method to easily send a request to the server and react to success/error results.

Dojo’s .xhr methods and utilities - provides a much more detailed set of methods than jQuery, but essentially does the same thing – lets you easily build robust AJAX interactions.