Question

microsoft ajax客户端库具有不同的功能，模仿服务器端页面生命周期和if（！Page.IsPostBack）条件。我不确定哪个客户端功能对应于等效的服务器端方法。这些客户端函数的调用顺序是什么？哪些是回帖，哪些不是？

function pageLoad(sender, args) {
            //your start up code
        }
Sys.onReady(function() {
            //your start up code
        });
Sys.Application.add_load(function() {
            //your start up code
        });
Sys.Application.add_init(function () {
            //your start up code
        });

我应该何时使用其中一种？哪一个相当于Jquery $（document）.ready（）？

Answer 1

function pageLoad(sender, args) {
            //your start up code

        }

此函数用于处理Application对象的load事件

Sys.onReady(function() {
            //your start up code
        });

此函数类似于JQuery中的document.ready

Sys.Application.add_load(function() {
            //your start up code
        });

Sys.Application.add_init(function () {
            //your start up code
        });

名为add_eventname的函数，示例add_load和add_init，用于为Application和PageRequestManager类引发的事件添加。 add_load和function pageLoad（sender，args）令人困惑但很简单，所有add_load都会调用pageload，例如，如果你声明add_load {alert（'add_load'）和pageload {alert（'pageload'）}，那么第一个警告将是add_load然后是另一个警报页面加载。希望很清楚。感谢

Answer 2

基于之前的答案和评论我做了一些测试，我在这里分享了一个aspx页面代码，它有助于理解您检测Document Ready的不同选择以及它们被调用的顺序：

    <form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="sm1"></asp:ScriptManager>
<div>
    <script type="text/javascript">
        var test = '';
        //Ajax client side library offers two approaches to detect DOM ready, 
        //each one has two functions in order to detect an ajax callback call (equivalent to the serverside pageLoad Page.IsPostBack cycle)

        //DETECT DOM READY USING Sys.Application Events http://msdn.microsoft.com/en-us/library/bb384075(v=vs.100).aspx

        //1) equivalent serverside PageLoad WITH if (!Page.IsPostBack)
        //Sys.Application.init Event, http://msdn.microsoft.com/en-us/library/bb397532(v=vs.100).aspx
        //Raised after all scripts have been loaded but before objects are created.
        Sys.Application.add_init(function () { //you can add as many as you like on the page
            var d = new Date();
            $get('sp1').innerHTML = 'Sys.Application.init: ' + d.getSeconds() + d.getMilliseconds();
            test += '- Sys.Application.add_init -';
        });

        //2) equivalent to serverside PageLoad WITHOUT if (!Page.IsPostBack)
        //Sys.Application.load Event, http://msdn.microsoft.com/en-us/library/bb383829(v=vs.100).aspx
        //Raised after all scripts have been loaded and the objects in the application have been created and initialized.
        //The load event occurs immediately before the pageLoad event.
        Sys.Application.add_load(function () {
            var d = new Date();
            $get('sp2').innerHTML = 'Sys.Application.add_load: ' + d.getSeconds() + d.getMilliseconds();
            test += ' - Sys.Application.add_load - ';
        });


        //DETECT DOM READY http://www.asp.net/ajaxlibrary/HOW%20TO%20Detect%20DOM%20Ready.ashx

        //1) equivalent serverside PageLoad WITH if (!Page.IsPostBack)
        Sys.onReady(function () {
            var d = new Date();
            $get('sp3').innerHTML = 'Sys.onReady: ' + d.getSeconds() + d.getMilliseconds();
            test += ' - Sys.onReady - ';
        });

        //2) equivalent to serverside PageLoad WITHOUT if (!Page.IsPostBack)
        function pageLoad(sender, args) { //it's a single global name. You can have only one per page
            var d = new Date();
            $get('sp4').innerHTML = 'pageLoad: ' + d.getSeconds() + d.getMilliseconds();
            test += ' - pageLoad - ';
        }

        //JQUERY DOM READY
        $(document).ready(function () {
            var d = new Date();
            $get('sp5').innerHTML = '$(document).ready: ' + d.getSeconds() + d.getMilliseconds();
            test += ' - $(document).ready - ';
        });
        $.fn.ready(function() {
            var d = new Date();
            $get('sp6').innerHTML = '$.fn.ready: ' + d.getSeconds() + d.getMilliseconds();
            test += ' - $.fn.ready - ';
        });

        window.setTimeout(function () {
            $get('test').innerHTML = 'the functions where called in this order: ' + test;
        }, 1000);
    </script>
    <h2>Sys.Application</h2>
    <span id="sp1"></span>
    <br />
    <span id="sp2"></span>
    <h2>Dom Ready</h2>
    <span id="sp3"></span>
    <br />
    <span id="sp4"></span>
    <h2>JQuery</h2>
    <span id="sp5"></span>
    <br />
    <span id="sp6"></span>
    <span id="sp7"></span>
    <span id="sp8"></span>
</div>
<br />
<br />
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Button Text="CallBack event" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<span id="test"></span>

</form>

microsoft ajax客户端库文档就绪功能

2 个答案: