As I delve into learning AJAX, I encountered an issue with retrieving an image from my WAMPSERVER www.directory. Within the IMAGES file, there is an image titled logo.png that I'm attempting to access using the following 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
While Chrome raises a cross-origin error, Firefox manages to append the image without the src attribute and shows a "not well-formed" error. When I modify the code slightly to only use innerHTML on the said div and change the target to:
xmlhttp.open("get","images/change.txt",true);
it functions as intended.
So, what is the correct method for fetching images from the server? Furthermore, assuming I have multiple images in the "images" folder, how can I retrieve all of them?