Embedding an image in an AJAX response

Question

Is it possible (and supported cross-browser) to embed an image into the XML of an AJAX response, and then load that image using JavaScript?

I have a system that does some calculations based on the number of sessions running through it. The results are then graphed, and returned in two parts:

1) XML containing information about the graph, totals, and Image map data allowing the user to click on relevant areas.

2) The graph image.

As the data can change between the two requests (and could be expensive to calculate), I'd prefer to do it in a single request (return the image with the XML). The current implementation caches the stats for a small period so that the results of multiple requests will still match. As the amount of data that needs to be cached is going to be increasing (from ~2.5K to ~1.2MB), I would like to try an alternative method.

NOTE: I do not want to use inline b64 PNG images as they are not supported in IE.

Answer 1

Can you not store the image on the server and send the URL to the client?

Answer 2

Have you considered using Google's Chart API?

Answer 3

If storing is not an option. Create image in memory and flush the binary image data to response from a script, like a php file. Just use the correct header:

Content-type: image/png

The image gets regenerated every time.

To be absolutely sure the image does not get cached, append some random parameter to the querystring.

Answer 4

You could return the image to the ajax-client, and then include the XML data in a X-HTTP-Header for the image.

But you need to find out if it is possible to read the X-header from the ajax-client though.

Answer 5

You might want to check this link to see if this concept will work. This link maybe useful.

I think trying to combine both set of data in the XML would be interesting.

Answer 6

As this seems like more work that it's worth, I've decided that a simpler solution would be:

1) Send XML data to the client with the details of what is to be graphed.

2) Client sends a request for the image, including the data to graph (similar to the Google Chart API).

This decouples the chart rendering from the data, and then it can be used in the future to generate generic charts for other data sets. The other benefit is that it doesn't require any caching server-side since only 1 request is used.

Answer 7

Well actually you can but it's probably not going to be worth it. It seems like a vector based method such as canvas and the VML alternatives for IE would be a better alternative for rendering graphs. Then you only have to pass the graph data to the browser.