Request for several responses - ajax

Question

I would like to create a web application.
There are cases, when a user's request would result in refreshing the content in 2-3 or sometimes even more containers. The cleanest way would be to run the requests one after the other in a sequence and handle the results one by one. I would like to have only one request if it is possible, and collecting all the results for the responses.
Eg.: let's say, there is a main container (M), and some other (smaller) containers (A, B, C, etc.)
The simple way would be:
request main function from server for M, show it in M container
fetch some other content from server dedicated for A_container, show it in A_container
fetch some other content from server dedicated for B_container, show it in B_container
fetch some other content from server dedicated for C_container, show it in C_container
Depending on the main function requested by the user, just some of the containers have to refresh it's content, not all of them.
I would like to minimise the number of requests. Actually minimise it to one. Of course, it could be done by Json, or XML.
I would like to collect all the responses from the server, encapsulate them (A_container:"this is content for A_container", C_container: "Other content for C_container"), and send it back to the client, where the client would unpack it, and regarding to the content, it would delegate each of them to the appropriate container.
My question is, that how would you do it, when you know, that the returned data is very variable: in some cases it might contain even html elements, quotes, double quotes, etc. If I am not mistaken, in some special cases this could screw up Json and xml as well.
My idea was to divide the different contents by special separators (for now just for an easy example let's use xxx, and yyy). It is a very uggly solution, but you cannot screw up the content for sure, if the separators are unique enough.
The previous Json-like solution would look like this:
"A_containeryyythis is content for A_containerxxxC_containeryyyOther content for C_container"
Then on the client side split the code first by xxx, which would result in this case in two array elements (strings), what are going to be split again by yyy. The first element would give the container's id, the second one the content for it. After this the last step would be walking through the new arrays, and display the result in the appropriate containers.
Is there anybody who would suggest a nicer way for this, or who could show a safe way to do it in Json, or XML, etc?

Answer 1

The previous Json-like solution would look like this: "A_containeryyythis is content for A_containerxxxC_containeryyyOther content for C_container"
THat woul seem more like a "text/plain" response from the server that you would handle via a javascript split. What you would really want to do is return a json object from the server, e.g.
object = {'A container content','etc','etc','etc'}
Then evaluate that using javascript from the client side using eval(object). From there I would populate each one of your "containers".

Answer 2

Format your request using XML:
<response>
<m>Content</m>
<a>Content</a>
<b>Content</b>
<c>Content</c>
</response>
Then parse the XML in your XMLHttpRequest callback:
var xmldoc = req.responseXML;
var root = xmldoc.getElementsByTagName('response').item(0);
var contentm = root.getElementsByTagName('m');
var contenta = root.getElementsByTagName('a');
var contentb = root.getElementsByTagName('b');
var contentc = root.getElementsByTagName('c');
if (contentm) {
/* Update Container M */
}
if (contenta) {
/* Update Container A */
}
if (contentb) {
/* Update Container B */
}
if (contentc) {
/* Update Container C */
}