DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 3 of 3

Thread: Image display using AJAX script

  1. #1
    Join Date
    Sep 2009

    Arrow Image display using AJAX script

    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.

    ClimbInc, Tokyo.
    Attached Files Attached Files

  2. #2
    Join Date
    Apr 2007
    Sterling Heights, Michigan
    Welcome to DevX

    Does this help?

  3. #3
    Join Date
    Oct 2009

    Ajax and Binary Data

    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 for JavaScript example of BASE64 encoding and how it can be used to decode binary data.

    Second see 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

    Data URI example can be found at

    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.

Similar Threads

  1. how to use java script to display an image
    By kumponet in forum Java
    Replies: 5
    Last Post: 04-17-2008, 01:24 PM
  2. Image display without lossing its resolution.
    By asubash in forum ASP.NET
    Replies: 0
    Last Post: 09-28-2007, 11:14 AM
  3. Image won't display in Applet
    By syntax_error0 in forum Java
    Replies: 1
    Last Post: 02-06-2006, 02:33 AM
  4. Replies: 2
    Last Post: 08-23-2005, 02:19 PM
  5. Script for scrolling
    By Mark in forum Web
    Replies: 3
    Last Post: 08-30-2001, 11:45 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center
Latest Articles
Questions? Contact us.
Web Development
Latest Tips
Open Source

   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center