Update Image based on Response Stream

Question

Is is possible to update an image on an HTML page using the response stream of an ASP.NET Generic Handler?

For example, if I have the following code on a handler:

// http://www.example.com/?Guid=<AccountGuid>
public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "image/png";
    context.Response.WriteFile("~/images/test.png");
}

How can I call the handler in jQuery, using .ajax, and set an image on the page equal to the image that is returned by the Handler? I am ignoring the query string variable at the moment as I just want to get this working.

Secondly, if I can do above, how can I loop through all of DIVs on the page that are of class "content", select a guid out of a hidden field to use as my query string parameter, and update the associated image within the same content DIV tag?

A content div tag would look as follows:

<div class="content">
  <asp:TextBox runat="server" Id="HiddenField_1" Value="C142E68F-B118-4565-9A9E-B2347F0B6D5B"/>
  <img src="#"/>
</div>
<div class="content">
  <asp:TextBox runat="server" Id="HiddenField_2" Value="GJ38AD23-B118-4565-9A9E-B2347F0B6D5B"/>
  <img src="#"/>
</div>

I would like to have all the images updated on a periodic interval, so essentially, as a quick recap, I would need to have:

1. A loop through all of my DIVs of class "content", occuring every n. seconds.
2. Extractation the GUID from the hidden field.
3. A call to my ASHX handler to get the updated image.
4. Set the returned image to the corrisponding image on the page.

Is this something that would be difficult to achieve? If not, what would I need to do to make this function in the above manner?

Answer 1

Use jquery to change the src value of the images with the appropriate url parameters. It'll call the ashx handler and render the new image.