AJAX and how to best deal with it server side in PHP

Question

Hi,

I'm starting to write quite a few ajax heavy website, but I've never really read up on best practices and now that I want too I can't find an article that address what I want to know. What I really want to learn about is dealing with AJAX calls server side, things such as, should all data be passed back using JSON/XML,.. or is pure HTML fine, should you try not to mix the two for a single function call depending on the result. Also, as I mostly program using CodeIgniter (an MVC framework) how best do you go about dividing normal page load requests from AJAX results.

I can make AJAX websites, but want I really want to know is how best to make an AJAX website, if people can shed some light or point me in the right direction I would very much appreciated it.

Thanks Tom

Answer 1

well, it depends on what exactly want to do. because the simple way to use ajax functions - use jQuery framework. It has everything you need.

Answer 2

It's not very usable if you use AJAX to everything, even to the page requests. You will get problems at the back button, bookmarking, js-off browsers, etc. You can hack it, but it worths not to do. Use AJAX to post small messages to the user, or as you experience here, SO.

Answer 3

Use Ext JS or Jquery have a look at what they offer there are loads of links out there to see what they do.

After looking at some Demo's of these products you will probably be inspired to use some of these things with your websites.

Other then that measure where your bottlenecks are and try parallel loading where it makes sence.

Answer 4

It depends on what you're trying to achieve with AJAX. There's normally a footprint/complexity tradeoff.

For instance, you can have an AJAX call retrieve an entire generated HTML list from the server, including markup, and just inject that into a container such as a div. That's simple to implement, but the down-side would be having to send more bytes to the browser.

On the other hand, you could have the server send out a JSON string in response to an AJAX call and have the client wrap each bit in appropriate markup and place it in the page. That's more complex, but might be better suited to certain situations.

It really depends on what you're trying to achieve, there is no single general rule governing a 'best way to implement AJAX'.

Answer 5

Hi tom,

JSON / XML or plain

I think you have to make a choice yourself. You could use XML or JSON or just plain html. It also depends on the complexity of your problem. I would choice json because PHP5 has really simple methods to encode and decode json.

• json_encode
• json_decode

Server-side

• Just put AJAX actions in a controller. Use get for getting data and codeigniter post function to store data on server.
• I would advice to have a look at yahoo's developer best practices which will ensure your site will run lightning fast. Also ajax request should be cached if possible.

Javascript

jquery makes json calls really simple. You could use jQuery.get to retrieve information and Jquery.post to store data.

Example

I will also try to put an simple example online for you to look at.

Good luck,
Alfred Westerveld

Answer 6

I recently completed an AJAX heavy site using CodeIgniter and learned a lot in the process. These are some things I learned (read: mistakes I made):

Don't return html pages and json from the same method.

At first it seemed like a good idea to have a set up like this:

/controller/method/format

where the default for format was 'html'. The idea was, I could have something like /object/view show the html page for that object and have something like /object/view/json return the json data for that object.

In practice this makes things very messy. You end up mixing a lot of different functionality in a single method which makes the code that much more complicated. Ick.

Instead, what I do now is add an 'api' subfolder under application/controllers. The controllers in that subfolder only return json data. It's much cleaner.

Don't reimplement your templates in javascript

There are two approaches when fetching stuff via an AJAX call. You can return some sort of encoded data (JSON, XML) and insert that into the correct spot on the page. Or you can render a chunk of html and then insert that into a div somewhere.

If you go the data route try to stick to very simple markup structure like a span or a simple unordered list, for example. In my case, I had a certain part of the navigation that was returned from the server as an array of JSON encoded links.

My javascript would then spit them out in the correct structure for the menu. When the menu became more complicated my script incorporated this complexity. Now the markup for that menu is duplicated in the CI templates as well as the javascript.

In this case it would have been better to have the server return a chunk of html containing the menu markup instead of trying to build it from the data on the client.

Use AJAX sparingly/carefully/only as needed

You can save some server resources by using AJAX requests smartly. However, if you get carried away (*coughlikemecough*) you quickly can find yourself running several AJAX requests per user action. This is typically worse from a performance perspective as each request has its share of overhead and that overhead will negate an benefit from only requesting the needed resources.

If you find that clicking an interface element triggers more than one AJAX request that's a red flag to think hard about whats going on. You may be creating complexity without benefit.

JSON encoding is nice

You can json_encode() the results of a database query and it will generate really nice objects that you can work with in your script. The syntax is clean and works well with the results that CodeIgniter's db functions return.

Hope you find some of that useful. Always better when you can learn from someone else's mistakes! :)

Answer 7

If you don't understand how to set up calls with Jquery and CodeIgniter, just remember that the url you use for AJAX calls is constructed by a Controller. You can use a controller method to create a URL for an AJAX call.

For more info, this guide has helped me as an intro to AJAX + CodeIgniter.

http://www.mrforbes.com/thoughts/2009/01/28/a-quick-code-igniter-and-jquery-ajax-tutorial/