Loading

Tuesday, February 12, 2008

Downloading images with Ajax - Sample Ajax Code

//Downloading images with Ajax - Sample Ajax Code
//http://localhost/ajax/image.html

<html>
<head>
<title>Downloading images with Ajax</title>

<script language = "javascript">

function getDataReturnText(dataSource, callback)
{
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}

if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
callback(XMLHttpRequestObject.responseText);
}
}

XMLHttpRequestObject.send(null);
}
}

function callback(text)
{
document.getElementById("targetDiv").innerHTML =
"<img src= " + text + ">";
}

</script>
</head>

<body>

<H1>Downloading images with Ajax</H1>

<form>
<input type = "button" value = "Display Image 1"
onclick =
"getDataReturnText('imageName.txt', callback)">
<input type = "button" value = "Display Image 2"
onclick =
"getDataReturnText('imageName2.txt', callback)">
</form>

<div id="targetDiv">
<p>The fetched image will go here.</p>
</div>

</body>
</html>

//imageName.txt
Image1.jpg

//imageName2.txt
Image2.jpg

Copy These two images...



SHARE TWEET

Thank you for reading this article Downloading images with Ajax - Sample Ajax Code With URL https://x-tutorials.blogspot.com/2008/02/downloading-images-with-ajax-sample.html. Also a time to read the other articles.

0 comments:

Write your comment for this article Downloading images with Ajax - Sample Ajax Code above!