AJAX and dynamic images

[boeledi]

Hello,

I am developing in ASP.NET 1.1 (and unfortunately I am obliged to use
1.1).

I need to generate images, using GDI+ and retrieve them on the web
page, using AJAX.

On the server side, I have a ASPX page that generates the bitmap and
has to return it, when invoked by the client, via AJAX (XMLHTTP). Here
is the last part of the source code:

((System.Drawing.Image)bmpNewBitmap).Save(Response.OutputStream,
System.Drawing.Imaging.ImageFormat.Jpeg);
//-- let the browser know we are sending an image, and that things are
200 A-OK
Response.ContentType = "image/jpeg";
Response.StatusCode = 200;
Response.End();

On the client side, the invocation of the ASPX page was:

xhr_object = GetXMLHttpRequest();
var full_url = url + '?ImageParams=' + _imgParams;
//_imgParams contains information that are used by the ASPX page to
generate the image.
xhr_object.onreadystatechange = ProcessAJAXResponse;
xhr_object.open("GET", full_url, true);
xhr_object.send(null);

In the ProcessAJAXResponse() function, I attempt to display the
generated image like this:

function ProcessAJAXResponse() {
if (xhr_object.readystate == 4) {
if (xhr_object.status == 200) {
document.getElementById('imgDynamic').innerHTML =
xhr_object.responseBody;
}
}

The placeholder for the image is, in the page,
<img id='imgDynamic'>

-------------------------

I tried using xhr_object.responseText but it does not work neither.
I also tried using .src => document.getElementById('imgDynamic').src =
xhr_object.responseBody; but it does not work neither...


Could someone give me some help?

In advance, many thanks.

Didier

 

[Laurent Bugnion]

Hi,

Hello,

I am developing in ASP.NET 1.1 (and unfortunately I am obliged to use
1.1).

I need to generate images, using GDI+ and retrieve them on the web
page, using AJAX.

On the server side, I have a ASPX page that generates the bitmap and
has to return it, when invoked by the client, via AJAX (XMLHTTP). Here
is the last part of the source code:

On the client side, the invocation of the ASPX page was:

xhr_object = GetXMLHttpRequest();
var full_url = url + '?ImageParams=' + _imgParams;
//_imgParams contains information that are used by the ASPX page to
generate the image.
xhr_object.onreadystatechange = ProcessAJAXResponse;
xhr_object.open("GET", full_url, true);
xhr_object.send(null);

The nice thing with Image objects in the DOM is that they generate their
own request when you set the src property. So you don't need to generate
your XmlHttpRequest, just let the image do it. That's AJAX for dummies ;-)

var img = document.getElementById( 'imgDynamic' );
if ( img )
{
img.src = full_url;
}

That should work.

In the ProcessAJAXResponse() function, I attempt to display the
generated image like this:

function ProcessAJAXResponse() {
if (xhr_object.readystate == 4) {
if (xhr_object.status == 200) {
document.getElementById('imgDynamic').innerHTML =
xhr_object.responseBody;
}

Images are...images, so they don't have an HTML content...

}

The placeholder for the image is, in the page,
<img id='imgDynamic'>

I would set the src attribute to a default, for example a white
background placeholder.

HTH,
Laurent

 

[boeledi]

Laurent,

Many thanks for your clear answer. It seems that I still have much to
learn about DOM... ;o))

I will implement your answer.