Posted on Saturday 22nd of December 2007 at 12:10 in Tutorials

Multiple AJAX responses with 1 request (mootools and PHP)

It's a common problem and I started thinking about solutions after reading this 9rules note. How do you manage multiple return AJAX statements in an efficient manner? The synopsis of my thinking is in the note but I'll go into a bit more detail here.

Supposing you have a website that needs multiple regions updating through an AJAX call, how do you manage multiple requests? It's easy enough making an AJAX request and getting a response (using Javascript frameworks like mootools or scriptaculous) but they're normally only geared up for single requests. So if you've got multiple things to do, how can you manage it without having to make separate requests?

Why separate requests aren't great
If you want to update three separate regions, then using separate requests means that you're waiting longer. 3 times you make a request and 3 times you wait for a response, rather than making 1 request, waiting for 1 response and processing the result. So here is how I'd consolidate everything into the one request:

Supposing I had a website as per the diagram below, but wanted to update all 3 content regions on one click, using one request:

The basic logic is to return all 3 parameters using a suitably rare delimiter. Let me explain using code and examples.

See the demo first

Code examples
It's worth noting that I'm using the Mootools framework to handle the XHR requests because it simplifies things an awful lot - writing XHTTP requests manually is a pain. So let's look at the HTML I'm using: Note the title attributes on the anchor tags, these are useful because using them I can identify which anchor tag was clicked, without needing to have an ID on each. Ideally you'd use the href so that you're just hijacking the underlying PHP using Javascript, but this is just a quick and dirty example.

Let's look at the javascript needed to interact with that:

//on domready is a good way to start all javascript :)
	window.addEvent('domready', function()
    {
        //select all anchor tags within the container div
        $('container').getElements('a').addEvent('click', function(e){
            
            //stop the a-tag event
            e = new Event(e).stop();
            
            //so I can always post to the same PHP script, but know which item was clicked
            var querystring = this.title;
            
            var myXHR = new XHR({
                method: 'get',
                onSuccess: function(){
                    
                    var myString = myXHR.response.text;
                    var myStringArray = myString.split("###RAWR###");
                    
                    //I'm expecting three results back, one for each div.
                    //I also know where they are in the array (0,1 and 2 respectively)
                    
                    $('one').innerHTML = myStringArray[0];
                    $('two').innerHTML = myStringArray[1];
                    $('three').innerHTML = myStringArray[2];
                    
                }
            
            }).send('process.php', querystring);
            //add on the querystring, so that we can identify what to return
            
        });
    });

So all I'm doing there is using the GET method to send data to my "process.php" file. The significant part to note is the myString.split function - because the PHP is going to return a long string containing 3 different sets of content, it's important to use a really unique delimiter to identify when one record stops and another starts. I'd have to be something really unusual to use ###RAWR### in my content (besides here, obviously).

I know I'm only going to get 3 responses back which makes life easy, because we're only updating a finite number of divs with content.

So let's look at the PHP used in "process.php" as this is what gets returned: All the above code is doing is checking the querystring that was passed through in the AJAX call and changing the contents of the array accordingly. Clearly you'd do something more useful than this - your array is probably going to be populated by doing a MySQL query or something, but purely for this example I'm using rather inane fake content like "pigeon". I then iterate through the array and apply the unique delimiter to the end of each row. Simple. When I return this to the Javascript I can then split the three records off from one another and populate the divs accordingly.

And there you have it, really simple stuff. It's a really dirty, horrible and probably an overly stupid way to manage multiple AJAX requests but it's how I've solved the problem. I don't see it being a massive problem provided you're dealing with the same kind of data; otherwise you'd be better making separate requests. PHP is doing all the work anyway.

See the demo

Enjoy this article? Why not subscribe to the full RSS feed?