Image display using AJAX script

[veera]

I want to display the image using AJAX script.

Process :
1. I wrote a JSP,Javascript and servlet program and it generates an image.
2. If I click the link text in JSP(HTML data only), it calls the Javascript.
Javascript calls the Servlet, servlet response the image to Javascript.
3. It opened the AJAX window, but the image is not displayed.

I attach the script, if any of you have a solution please share with me.

Thanks,
Veera
ClimbInc, Tokyo.

[Hack]

Welcome to DevX

Does this help?

http://www.xul.fr/ajax/ajax-image-gallery.html

[jmajews1]

Based on your use case, I would question why you are using AJAX. Why not open the window to a specified URL and have your Servlet set the response header MIME type to be your image format. The browser will automatically display the image.

If you need to use AJAX then this may be possible by using BASE64 encoding. You can receive the BASE64 encoded image in the AJAX responseText. This technique is documented in the book AJAX - The Complete Reference (McGraw Hill 2008) by Thomas A Powell.

First see http://ajaxref.com/ch4/base64response.html for JavaScript example of BASE64 encoding and how it can be used to decode binary data.

Second see http://tools.ietf.org/html/rfc2397 for information about using the data URI scheme.

Can use image data with XHRs using an addressing schema called a data: URI. A data: URI allows you to include data directly in the address as an immediate form of information ready for consumption without another network fetch. The format of the URI is:

data: [Mime type] [:base64] data

For example, if you used the following data:URI in a browser that can handle the scheme such as Firefox, Opera, or Safari:

data:image/png;base64,[binarydata] where you replace [binarydata] with the encoded image data.

You can use this format to directly embed an image using the <img> tag:

<img src="data:image/png;base64,[binarydata]" ... />

On the server you can set the following headers in the response:
Content-Type: text/plain
Content-Transfer-Encoding: base64

To handle the XHR response you can do something like:

if(xhr.readyState === 4 && xhr.status === 200){
//assume you have the new window reference
//create an img tag with the src equal to the data:URI and
//append it to the new window document body.
var img = document.createElement("img");
var imgsrc = "data:image/png;base64, " + xhr.responseText;
img.setAttribute("src", imgsrc);

//assume window reference is stored in variable called mywin
mywin.document.body.insertBefore(img);
}

Data URI example can be found at http://ajaxref.com/ch4/datauri.html

Note that this technique may not work with Internet Explorer. If you need to support Internet Explorer then I would use the first suggestion above and not use AJAX. If your new window has to display more than just the image you can load the image in an IFRAME.

Hope this helps.