How to Download a Image from server using AJAX.

Posted by on October 15, 2009 Leave a comment (0) Go to comments

Introduction:
We can easily download a image from server without a page referesh.

Main:
See the below examble,

<html>
<head>
<title> Retrieving Images Using AJAX </title>
<script language = "javascript">
function getData(imageName, DynamicCreation)
{
var XMLHttpRequestObject = false;
 
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}
 
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", imageName);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
DynamicCreation(XMLHttpRequestObject.responseText) ;
delete XMLHttpRequestObject;
XMLHttpRequestObject = null;
}
}
 
XMLHttpRequestObject.send(null);
}
}
 
function DynamicCreation(imageName)
{
document.getElementById("DisplayHere").innerHTML =
"<img src= " + imageName + ">";
}
 
</script>
</head>
<body>
 
<H1>Retrieving Images Using AJAX</H1>
<form>
<input type = "button" value = "Image 1"
onclick =
"getData('firstImage.png', DynamicCreation)">
 
<input type = "button" value = "Image 2"
onclick =
"getData('SecondImage.png', DynamicCreation)">
</form>
 
<div id="DisplayHere">
</div>
 
</body>
</html>