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.

image from book
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.

image from book
Figure 8.11: Downloading the first image

image from book
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.



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net