页面加载上的 Javascript ajax 调用答案

【问题标题】：Javascript ajax call on page onload页面加载上的 Javascript ajax 调用
【发布时间】：2010-11-10 13:10:04
【问题描述】：

我希望在发出 ajax 调用以更新数据库之前完全加载页面。我可以在正文 onload 事件中调用 javascript 函数，以便页面完全加载，但我不确定如何从那里触发 Ajax 调用。有没有更好的方法来实现这一点（页面加载后更新数据库）？

【问题讨论】：

数据库更新与onload页面事件严格相关？或者它可以在您的服务器开始发送页面时执行？

标签： javascript ajax

【解决方案1】：

这很容易使用 JavaScript 库，例如使用 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 来做到这一点吗？
$.ready 相当于 DOMContentLoaded 而不是 load。在这一点上，您的 jquery/vanilla 比较可能会产生误导。您的香草版本应该使用 document.addEventListener 而不是 onload 属性来监听事件，这被认为是一种非常糟糕的做法。
仅供参考：弃用通知：jqXHR.success()、jqXHR.error() 和 jqXHR.complete() 回调从 jQuery 3.0 开始被删除。您可以改用 jqXHR.done()、jqXHR.fail() 和 jqXHR.always()。

【解决方案2】：

你可以使用 jQuery 来为你做这件事。

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

在这里查看：

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

【讨论】：

【解决方案3】：

没有库就更容易了

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

【讨论】：

【解决方案4】：

或使用原型：

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

或者更好的是，在别处定义函数而不是内联，那么：

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

您不必专门使用 jQuery 或 Prototype，但我希望您使用的是某种库。这两个库都将以比 onload 更一致的方式处理事件处理，当然这将使处理 Ajax 调用变得更加容易。如果您必须使用 body onload 属性，那么您应该能够调用这些示例中引用的相同函数 (onload="javascript:functionName();")。

但是，如果您的数据库更新不依赖于页面上的呈现，为什么要等到它完全加载？您可以在页面上的 JavaScript 末尾包含对 Ajax 调用函数的调用，这应该会产生几乎相同的效果。

【讨论】：