XMLHttpRequest 의 결과가 다 반영 되었는지 체크하는 방법
본문
XMLHttpRequest 를 사용해서 가져온 다른 파일의 내용을 dom 에 삽입했습니다.
그리고 bbb()를 실행해야 하는데 바로 실행하면 에러가 발생합니다.
그래서 아래와 같이 setTimeout 으로 시간 간격을 주고 실행하면 잘 됩니다.
그런데 시간(500)을 너무 짧게해도 안되고, 컴퓨터에 따라 좀 다르기도 합니다.
아래 코드에서 id="main"의 내용이 확실하게 다 자리 잡은 다음에 bbb()가 실행되면 좋겠는데
다른 방법은 없을까요??
document.getElementById("main").onload = bbb();
처럼 해보니 아예 bbb()로 가지도 않는것 같고...ㅠ
aaa()
setTimeout(bbb, 500); //- 0.5초간 기다렸다 실행 (바로 하면 bbb 함수에서 에러발생)
function aaa() {
let req = new XMLHttpRequest();
req.open('GET', 'cc.php');
req.onload = function() {
if (req.status == 200) {
document.getElementById("main").innerHTML = this.responseText;
} else {
alert("Error: " + req.status);
}
}
req.send();
}
function bbb() {
// 이 안에 aaa() 에서 불러온 변수, id, class 를 사용하는 코드들이 있음
}
답변 3
동기식 샘플입니다. open() 마지막에 false 나 0을 주면 됩니다.
이리되면 로직이 입력된 순번대로 진행됩니다.
즉 문서 로딩이 끝난 후 밑줄의 로직이 실행됩니다.
function bbb() {
// 이 안에 aaa() 에서 불러온 변수, id, class 를 사용하는 코드들이 있음
}
let req = new XMLHttpRequest();
req.open('GET', 'cc.php', 0);
req.send();
document.getElementById("main").innerHTML = req.responseText;
bbb();
오~ 깔끔하게 잘 됩니다.
XMLHttpRequest 는 비동기식에서만 사용하는 줄 알았는데 이렇게도 되는군요.
여기서 물으면 모든 문제가 해결되네요..ㅋ
덕분에 주말을 행복하게 보낼 것 같습니다. 감사합니다.
(그런데 사실 해결을 못해야 주말을 끙끙대며 심심하지 않게 보내는데, 너무 일찍 해결해 주셔서 큰일입니다..ㅎ)
if (req.status == 200) {
document.getElementById("main").innerHTML = this.responseText;
이아래에서 바로 bbb() 실행하면 안되나요?
네, 사정상 그 자리에 넣으면 안되서요.
위의 질문에서 aaa()를 함수로 표시했지만 실제로는 그 부분이 라이브러리 안에 들어가서 다른 함수에서도 사용하는 부분이라...ㅠ
XMLHttpRequest
즉 바닐라 아작스의 이프문 안에 함수를 넣을 수 없는 상황이라면...
비동기식이 아니라 동기식으로 불러 사용하먼 어떤까요?
동기식으로 부르면 문서가 로딩된 후 다음 함수를 실행해도 순번적으로는 맞습니다.
꼭 실시간이 필요하지 않으면요.
실력이 모자라 답변의 의미을 잘 모르겠습니다..ㅎ
동기실이라면 현재 페이지를 다시 가져오면서 처리 하라는 뜻인가요?
지금은 그러면 안되서요..
현재 페이지의 특정 자리(<div id='main'></div>) 안에 cc.php 에서 불러온 내용을 끼워 넣은 뒤에
다시 cc.php 에서 불러온 내용 안에 있는 요소들을 조작해야 합니다.
그런데 cc.php 에서 불러온 내용을 브라우저가 인식하기 전에 bbb() 함수에서 접근하려고 하니 에러가 생기는 것 같아요.
setTimeout 의 시간을 충분히 주면 괜찮은데 사용자 마다 인터넷 속도나 컴퓨터 사양에 따라 다를 수도 있을것 같아서 확실하게 들어 올 때 까지 기다렸다가 실행되면 좋을듯 싶어서요.
