간단한 ajax예제를 적용해보려고 합니다!
본문
안녕하세요! 게시판에 간단한 ajax 예제를 적용해보려고 하고 있습니다.
지금 https://www.w3schools.com/js/js_ajax_intro.asp 이 사이트의 첫 예제를 따라하며 감을 잡아보고 해보고자 하는데 시작부터 딱 막혀버려 지금 진행이 되지 않아 고수님들께 질문글 남깁니다ㅠㅠ
지금 작성된 코드는w3school의 예제에 나온 코드와 동일합니다.
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
그리고 같은 파일 경로에 ajax_info.txt 파일도 만들어 놓은 상태입니다.
그런데 버튼을 누르면 객체를 찾을 수 없다고 나와 어떻게 해결해야할지 몰라 질문글 남깁니다!!
귀한 시간 내주셔서 정말 감사합니다!
답변 1
xhttp.open("GET", "ajax_info.txt", true);
ajax_info.txt 주소를 urㅣ 포함해서 써보실레요?
xhttp.open("GET", url("ajax_info.txt"), true);
이런 형식으로 작성하라는 의미일까요?
해보았는데 이런식으로 하면 버튼을 눌러도 아무 변화도 없습니다!!!
도메인까지입력해보세요
xhttp.open("GET", "도메인/ajax_info.txt", true);
답변해주셔서 정말 감사합니다! 그런데 말씀하시는 방법이 이게 맞는 건지 잘 모르겠어요ㅠㅠ
xhttp.open("GET", url("localhost/theme/basic/skin/board/basic/ajax_info.txt"), true);
=> 위의 방식은 아예 버튼이 작동하지 않습니다.
xhttp.open("GET", "localhost/ajax_info.txt", true);
xhttp.open("GET", "localhost/theme/basic/skin/board/basic/ajax_info.txt", true);
=> 아래 두 방식은 버튼이 동작은 하나 객체없음으로 나옵니다!ㅠㅠ
http를붙여보세요.....
고수님 말씀대로 이렇게 작성하니 바로 값이 표출되었습니다!! 정말 감사합니다~
xhttp.open("GET", "http://localhost/theme/basic/skin/board/basic/ajax_info.txt", true);
^^..굳입니다.