Hi All,
When we use Ajax then we can only get Text/XML response using the url.
With the help of the below procedure we can also get the image using ajax.
The Client side programming is something like:
<html>
<head>
<script>
function createGraphs(){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var imageResponse = xmlhttp.responseText;
changeImage(imageResponse);
}
}
xmlhttp.open("POST","GetImageResponse.do",true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
xmlhttp.send();
}
function changeImage(type,imageResponse){
document.getElementById("graph").src = "data:image/png;base64,"+imageResponse;
}
</script>
</head>
<body>
<img alt = "graph" id = "graph" name="linechart" src="" />
<input type="button" value="get Image" onclick="createGraphs()"/>
</body>
</html>
On click of the button a ajax response is sent to the server & receives text type response which is added to the source of the image tag as
document.getElementById("graph").src = "data:image/png;base64,"+imageResponse;
The Server side programming is something like:
//Struts Action Method
public ActionForward execute (final ActionMapping mapping,
final ActionForm form,
final HttpServletRequest request,
final HttpServletResponse response) throws Exception {
final byte[] chartbytes = this.getBytesFromFile (new File ("C:/Image.png"));
final BufferedInputStream buf = null;
ServletOutputStream myOut = null;
try {
myOut = response.getOutputStream ();
// set response headers
response.setContentType ("application/png");
final String filename = "graph.png";
(response).addHeader ("Content-Disposition", "attachment; filename=" + filename);
response.setContentLength (chartbytes.length);
myOut.write (chartbytes);
} catch (final IOException e) {
System.err.println ("Exception::" + e.getMessage ());
} finally {
if (myOut != null) {
myOut.close ();
}
if (buf != null) {
buf.close ();
}
}
return null;
}
// Returns the contents of the file in a byte array.
public byte[] getBytesFromFile (final File file) throws IOException {
final InputStream is = new FileInputStream (file);
// Get the size of the file
final long length = file.length ();
// You cannot create an array using a long type.
// It needs to be an int type.
// Before converting to an int type, check
// to ensure that file is not larger than Integer.MAX_VALUE.
if (length > Integer.MAX_VALUE) {
// File is too large
}
// Create the byte array to hold the data
final byte[] bytes = new byte[(int) length];
// Read in the bytes
int offset = 0;
int numRead = 0;
while ((offset < bytes.length) && ((numRead = is.read (bytes, offset, bytes.length - offset)) >= 0)) {
offset += numRead;
}
// Ensure all the bytes have been read in
if (offset < bytes.length) {
throw new IOException ("Could not completely read file " + file.getName ());
}
// Close the input stream and return bytes
is.close ();
return bytes;
}
In server side the image if converted to Array of bytes & sent to client
So, in this way one can tranfer the images to client side using ajax
Regards,
Pankaj Khattar
Advertisement-Are you ready to get most of your iPAD !!!
When we use Ajax then we can only get Text/XML response using the url.
With the help of the below procedure we can also get the image using ajax.
The Client side programming is something like:
<html>
<head>
<script>
function createGraphs(){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var imageResponse = xmlhttp.responseText;
changeImage(imageResponse);
}
}
xmlhttp.open("POST","GetImageResponse.do",true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
xmlhttp.send();
}
function changeImage(type,imageResponse){
document.getElementById("graph").src = "data:image/png;base64,"+imageResponse;
}
</script>
</head>
<body>
<img alt = "graph" id = "graph" name="linechart" src="" />
<input type="button" value="get Image" onclick="createGraphs()"/>
</body>
</html>
On click of the button a ajax response is sent to the server & receives text type response which is added to the source of the image tag as
document.getElementById("graph").src = "data:image/png;base64,"+imageResponse;
The Server side programming is something like:
//Struts Action Method
public ActionForward execute (final ActionMapping mapping,
final ActionForm form,
final HttpServletRequest request,
final HttpServletResponse response) throws Exception {
final byte[] chartbytes = this.getBytesFromFile (new File ("C:/Image.png"));
final BufferedInputStream buf = null;
ServletOutputStream myOut = null;
try {
myOut = response.getOutputStream ();
// set response headers
response.setContentType ("application/png");
final String filename = "graph.png";
(response).addHeader ("Content-Disposition", "attachment; filename=" + filename);
response.setContentLength (chartbytes.length);
myOut.write (chartbytes);
} catch (final IOException e) {
System.err.println ("Exception::" + e.getMessage ());
} finally {
if (myOut != null) {
myOut.close ();
}
if (buf != null) {
buf.close ();
}
}
return null;
}
// Returns the contents of the file in a byte array.
public byte[] getBytesFromFile (final File file) throws IOException {
final InputStream is = new FileInputStream (file);
// Get the size of the file
final long length = file.length ();
// You cannot create an array using a long type.
// It needs to be an int type.
// Before converting to an int type, check
// to ensure that file is not larger than Integer.MAX_VALUE.
if (length > Integer.MAX_VALUE) {
// File is too large
}
// Create the byte array to hold the data
final byte[] bytes = new byte[(int) length];
// Read in the bytes
int offset = 0;
int numRead = 0;
while ((offset < bytes.length) && ((numRead = is.read (bytes, offset, bytes.length - offset)) >= 0)) {
offset += numRead;
}
// Ensure all the bytes have been read in
if (offset < bytes.length) {
throw new IOException ("Could not completely read file " + file.getName ());
}
// Close the input stream and return bytes
is.close ();
return bytes;
}
In server side the image if converted to Array of bytes & sent to client
So, in this way one can tranfer the images to client side using ajax
Regards,
Pankaj Khattar
This comment has been removed by a blog administrator.
ReplyDelete