Downloading Images with Ajax

How about downloading images using Ajax? How’s that, you might ask? Downloading images? Can’t you just download text-based data using Ajax?

That’s correct, but with a little assist from dynamic HTML, you can download images using Ajax as well. Here’s the trick: you download the name of the image file and then use an <img> element to make the browser download the image. For example, take a look at Figure 8.10, the image.html application.

Figure 8.10: The Ajax image application

When you click the first button, image number 1 is downloaded, as you see in Figure 8.11. When you click the second button, image number 2 is downloaded, as shown in Figure 8.12.

Figure 8.11: Downloading the first image

Figure 8.12: Downloading the second image

Here’s how this works. The buttons are connected to a function named, for example, getData. That function then passes the name of a text file containing an image name and a callback function. Also added is a <div> element in which to display the downloaded image:

 <form>   <input type = "button" value = "Show image 1"     onclick = "getData('imageName1.txt', callback)">   <input type = "button" value = "Show image 2"     onclick = "getData('imageName2.txt', callback)"> </form> <div >   <p>The fetched image will appear here.</p> </div>

In the getData function, you can create a new XMLHttpRequest object this way:

 function getData(dataSource, callback) {   var XMLHttpRequestObject = false;   if (window.XMLHttpRequest) {     XMLHttpRequestObject = new XMLHttpRequest();   } else if (window.ActiveXObject) {     XMLHttpRequestObject = new       ActiveXObject("Microsoft.XMLHTTP");   }   .   .   . }

If the XMLHttpRequest object was created, you can connect to the server and download the requested image’s name:

 function getData(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) {         .         .         .       }     }   } }

And you can call the callback function with that image name:

 function getData(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);   } }

Finally, in the getData function, delete the XMLHttpRequest object when it’s served its purpose, and get the data from the server:

 function getData(dataSource, callback) {      .     .     .     XMLHttpRequestObject.onreadystatechange = function()      {        if (XMLHttpRequestObject.readyState == 4 &&          XMLHttpRequestObject.status == 200) {            callback(XMLHttpRequestObject.responseText);            delete XMLHttpRequestObject;           XMLHttpRequestObject = null;       }      }      XMLHttpRequestObject.send(null);      } }

The dynamic HTML magic happens in the callback function:

 function callback(text) {   .   .   . }

This is the function that is passed the name of the image file to download. All it has to do is to create an <img> element using that name, and store that <img> element in the target <div> element:

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

And that’s all there is to it! Now you’re downloading images using Ajax.