Jump to content

ajax and images


Matej
 Share

Recommended Posts

Hi.

Im trying to learn AJAX. In my WAMPSERVER www.directory i have a file called IMAGES. inside that file there is an image called logo.png. Im trying to retrieve this image from server using this code

function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){var response = xmlhttp.responseText;var img=document.createElement("img");img.src=response;var myDiv=document.getElementById("one");myDiv.appendChild(img);}}xmlhttp.open("get","images/logo.png",true);xmlhttp.send();}window.onclick=loadXMLDoc 

In chrome it throws error about cross origin or something (restriction). But in firefox it does append image but without src and it throws error "not well formed". If i change code a bit to only innerHTMl to said div and using

xmlhttp.open("get","images/change.txt",true);

it works.

So, what is the right way to retrieve image from server? Also , lets say i have more images in "images" folder , how could i retrieve them all?

also when i change it to

xmlhttp.open("get","images/brm.jpg",true);

which is another image in the folder it throws error NS_ERROR_DOM_BAD_­URI: Access to restricted URI denied

Link to comment
Share on other sites

Images are not usually loaded via ajax. An ajax request will return the contents of the file, so when you send a request for an image it's going to return the binary image data. That's not very useful, I suppose you could base64-encode that data and then create an image with a data URL, but there's no point to do that when you can just create a regular img tag with the source as the URL of the image and let the browser fetch that image.There's not a good way through ajax to retrieve a list of all files in a directory, you generally need to know the URLs that you're asking for.When you're testing that stuff locally, make sure you are accessing your page via HTTP, don't just double-click on the file to open it. Type the HTTP URL in the browser to access it, that will get rid of some of the error messages.

Link to comment
Share on other sites

Its supposed to return html content, which is what the text file did a img tag, you then place this returned html usually within a parent container with specific id using innerHTML().So if the file referenced in ajax contains multiple different img tags, without html, head, body tags i might add, these image will appear in parent div container.

Link to comment
Share on other sites

How are images loaded from server if not via Ajax?

 

im working on my site where i want to retrieve images from server + im planning to add more and more images to the server so i supposed it would be best with ajax which would result in automaticly updait content on website.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...