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.