I started learning AJAX and got problem on the beginning I can't solve. I got 2 files, main.html with code :
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<button>apple</button>
<div id="target">
Press button
</div>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++)
{
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","blabla.txt",false);
xmlhttp.send(null);
document.getElementById("target").innerHTML=xmlhttp.responseText;
}
</script>
</body>
</html>
and "blabla.txt" with content :
asdasdsaldkjasdajsdl
Problem is that after clicking the button it should load content of blabla.txt file into the div element. Unfortunately it doesnt work with the reason i have no idea about.
I think its worthly to add that both files are placed in the same folder.