Multiple responses from one AJAX request

Question

Not really looking for code examples here, just concepts.

I have three sections on a page now that are being updated via three separate AJAX calls to PHP scripts, which return JSON. What would be the easiest way to condense these three calls into one larger call and receive the responses back on the client in JSON? How would I separate the responses on the client so I can manipulate the response data based on what information is sent back?

Answer 1

I like Cris' method, but think I can provide a little improvement. As you already have 3 seperate entities, to reduce the need for recoding everything, you could do something along the lines of combining you PHP into one file via include 'page.php' and sending an object back via JSON with properties named for what each of them do (lets say "names", "dates", and "fuzzyThings"). Your client code to send the request would then simply have all the arguments your 3 functions sent individually being sent in one request. The returned JSON would then look something like this (put your objects/arrays/whatever in the commented areas):

{
    "names" : {/*stuff needed for names goes in here*/},
    "dates" : {/*stuff needed for dates goes in here*/},
    "fuzzyThings" : {/*all fuzzy things goes in here*/}
}

Once you get this to the client side, as I assume each may already have a function (or set of functions) to deal with it's return data, you should be able to call them in this manner:

function handler(retText) {
    var returnedObject = eval(retText);

    doStuffWithNames(returnedObject.names);
    doStuffWithDates(returnedObject.dates);
    playWithFuzzyThings(returnedObject.fuzzyThings);
}

Also, on the PHP end you can make a unified PHP page (without recoding anything hopefully) via:

<?php
    echo '{';
        echo '"names":{';
        include 'names.php';
        echo '},';

        echo '"dates":{';
        include 'dates.php';
        echo '},';

        echo '"fuzzyThings":{';
        include 'fuzzyThings.php';
        echo '}';
    echo '}';
?>

Note: You may need to edit the 3 php pages so that they will check the $_POST correctly and without interfering with the functionality of the other pages if you have not already, I prefer the method of if(isset($_POST['whatever'])) { ... } to check that everything was sent correctly, this way, you can include as many as you want, and if there is nothing to do with a php file (i.e. you are not using that section on that page), then it will return a blank property, and you simply will not use it (basically making it a "one-size-fits-all" type of thing).

Hope it works for ya!

Answer 2

You can format your JSON like this:

"user" : [ {
    "name" : "Harry",
    "hobby" : "Skating"
}, {
    "name" : "Dave",
    "hobby" : "Scuba Diving"
} ],
"news" : [ {
    "date" : "3/13/05",
    "title" : "Blah",
    "postedby" : "Mike",
} ]

And now in your AJAX response:

var data = eval('('+ xhr.responseText +')'); // Ajax response
var user = data.user[0].name; // Harry
var user2 = data.user[1].name; // Dave
var title = data.news[0].title;

You can use a for loop to traverse the data. In the example above you should now see how you can use PHP to format your JSON with multiple categories (user, news, ect.) and return back everything with only one call. If you would like a more elaborate example please refer to this article as well as this.