I'm learning AJAX according to MDN tutorial, but when I try the first sample to fetch test.html, local server always response with 404, no matter I use absolute or relative path. I have read other similar questions in stackoverflow, but none of them can solve my problem.
Here is my directory structure and source code:
|--templates
| |--index.html
| |--test.html
|
|--app.py
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<body>
<button id="ajaxButton" type="button">Make a request</button>
<script>
(function(){
let httpRequest
document.getElementById("ajaxButton").addEventListener('click', makeRequest)
function makeRequest() {
httpRequest = new XMLHttpRequest()
if (!httpRequest) {
alert('Giving up: can not create an XMLHTTP instance')
return false
}
httpRequest.onreadystatechange = alertContents
httpRequest.open('GET', 'test.html', true)
httpRequest.send()
}
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText)
}else {
alert('There was a problem with the request.')
}
}
}
})();
</script>
</body>
</html>
