programing

페이지 온로드 시 자바스크립트 아약스 호출

yellowcard 2023. 9. 7. 21:37
반응형

페이지 온로드 시 자바스크립트 아약스 호출

데이터베이스 업데이트를 위해 ajax call을 발행하기 전에 페이지가 완전히 로딩되었으면 합니다.body on load 이벤트에서 javascript 함수를 호출하여 페이지가 완전히 로드되도록 할 수는 있지만, 거기서 어떻게 Ajax 호출을 트리거해야 할지 잘 모르겠습니다.이를 달성하기 위한 더 나은 방법이 있습니까(페이지 로드 후 데이터베이스 업데이트)?

이것은 자바스크립트 라이브러리를 사용하면 정말 쉽습니다. 예를 들어 jQuery를 사용하면 다음과 같이 쓸 수 있습니다.

$(document).ready(function(){
    $.ajax({ url: "database/update.html",
        context: document.body,
        success: function(){
           alert("done");
        }
    });
});

jQuery가 없으면 가장 간단한 버전은 다음과 같을 수 있지만 브라우저 차이나 오류 처리는 고려하지 않습니다.

<html>
    <body onload="updateDB();">
    </body>
    <script language="javascript">
        function updateDB() {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "database/update.html", true);
            xhr.send(null);
            /* ignore result */
        }
    </script>
</html>

참고 항목:

jQuery를 사용하면 됩니다.

 $(document).ready(function() {
   // put Ajax here.
 });

여기서 확인해보세요.

http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29

라이브러리 없이도 더욱 쉽게 수행할 수 있습니다.

window.onload = function() {
    // code
};

또는 프로토타입 사용:

Event.observe(this, 'load', function() { new Ajax.Request(... ) );

또는 인라인이 아닌 다른 곳에서 함수를 정의하는 것이 좋습니다.

Event.observe(this, 'load', functionName );

특별히 jQuery나 Prototype을 사용할 필요는 없지만, 어떤 종류의 라이브러리를 사용하고 있기를 바랍니다.어느 하나의 라이브러리가 로드보다 일관된 방식으로 이벤트 처리를 처리할 것이며, 당연히 Ajax 호출을 훨씬 쉽게 처리할 것입니다.Body onload 특성을 사용해야 하는 경우에는 다음 예제에서 참조한 것과 동일한 기능을 호출할 수 있습니다.onload="javascript:functionName();").

그러나 데이터베이스 업데이트가 페이지의 렌더링에 의존하지 않는 경우 완전히 로드될 때까지 기다려야 하는 이유는 무엇입니까?페이지의 자바스크립트 끝에 Ajax 호출 기능에 대한 호출을 포함시키면 거의 동일한 효과를 얻을 수 있습니다.

언급URL : https://stackoverflow.com/questions/4144768/javascript-ajax-call-on-page-onload

반응형