Retrieve Images From Server via Client Side

Question

Hello StackOVerflow,

I have a folder on the server with some images in it. I would like to have my client code read this folder's contents (images) and then display this image on a div. I thought this would be easy with AJAX, but it seems that AJAX returns some raw data embedded in the image. I have been looking all over for a way to get the image's url instead of this data, but everything I have tried just does not work. I really prefer to do this on the client side. I appreciate any suggestions you can give me on going about this :).

Thanks,

elshae

//Here is some of my code...

var info = new OpenLayers.Control.WMSGetFeatureInfo({
                        url: 'http://localhost:8080/geoserver/wms',
                        title: 'Identify features by clicking',
                        queryVisible: true,
                        eventListeners: {
                            getfeatureinfo: function(event){              
                               map.addPopup( new OpenLayers.Popup.AnchoredBubble(
                                    "chicken",
                                    map.getLonLatFromPixel(event.xy),
                                    null,
                                    event.text + '<div> Hello Tibet :)</div>' + load('./Photos/potalaPalace.jpg'), 
                                    null,
                                    true

                                ));

                            }

                         }
                    });
                    map.addControl(info);
                    info.activate();

        });


        function ahah(url) {
              //document.getElementById(target).innerHTML = ' Fetching data...';
              if (window.XMLHttpRequest) {
                req = new XMLHttpRequest();
              } else if (window.ActiveXObject) {
                req = new ActiveXObject("Microsoft.XMLHTTP");
              }
              if (req != undefined) {
                req.onreadystatechange = function() {ahahDone(url);};
                req.open("GET", url, true);
                req.send("");
              }
            }  

            function ahahDone(url) {
              if (req.readyState == 4) { // only if req is "loaded"
                if (req.status == 200) { // only if "OK"
                  //'<div><img src="' + req.response + '"></div>';
                    var img = new Image();
                    img.src = req.url;
                    '<div><img src="' + img + '"/></div>';
                } else {
                  " <div> AHAH Error:\n"+ req.status + "\n" +req.statusText + "</div>";
                }
              }
            }

            function load(name) {
                ahah(name);
                return false;}