Matej Posted June 26, 2015 Share Posted June 26, 2015 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 More sharing options...
justsomeguy Posted June 26, 2015 Share Posted June 26, 2015 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 More sharing options...
dsonesuk Posted June 26, 2015 Share Posted June 26, 2015 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 More sharing options...
Matej Posted June 26, 2015 Author Share Posted June 26, 2015 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 More sharing options...
justsomeguy Posted June 26, 2015 Share Posted June 26, 2015 <img src="image.jpg">That's how images are loaded from the server. The browser sends a request, expects image data, and displays the image. You can use a data URL, but the problem with that is that the images are never cached.https://css-tricks.com/data-uris/ Link to comment Share on other sites More sharing options...
dsonesuk Posted June 26, 2015 Share Posted June 26, 2015 You can store images src in database, xml, array or use php to search a folder for image files and then list them with there filename placed in src and correct path to image relative to the page these are inserted into. Link to comment Share on other sites More sharing options...
Matej Posted June 26, 2015 Author Share Posted June 26, 2015 So thats the way images are stored? Just store path in xml/json and getbthat path using ajax? Well makes sense ... This way i can dynamicli add pictures... Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now