AJAX and dynamic images

Discussion in 'ASP .Net' started by boeledi, Dec 6, 2006.

  1. boeledi

    boeledi Guest

    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
     
    boeledi, Dec 6, 2006
    #1
    1. Advertisements

  2. Hi,
    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.
    Images are...images, so they don't have an HTML content...
    I would set the src attribute to a default, for example a white
    background placeholder.

    HTH,
    Laurent
     
    Laurent Bugnion, Dec 6, 2006
    #2
    1. Advertisements

  3. boeledi

    boeledi Guest

    Laurent,

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

    I will implement your answer.
     
    boeledi, Dec 6, 2006
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.