使用AjaxPro實現ajax效果

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

        在上一篇使用XMLHttpRequest 實現ajax效果中，介紹了使用XMLHttpRequest實現ajax效果，本篇將使用AjaxPro.Net架構實現同樣的功能：在用戶端非同步擷取服務端時間！AjaxPro.Net是一個優秀的.net環境下的ajax架構,用法很簡單,可以查閱相關資料,簡單說有幾點：
1）添加AjaxPro.dll應用；
2）配置web.config；
3）寫服務端方法，加[AjaxPro.AjaxMethod]申明；
4）用戶端調用服務端方法；(ajaxpro最大的優點：用戶端js中直接調用服務端方法)
用戶端代碼:<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>AjaxPro onLoading</title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="loadinfo" style="visibility:hidden;position:absolute;left:0px;top:0px;background-color:Red;color:White;">Loading</div>

        <input id="Button1" type="button" value="Get ServerTime" onclick ="javascript:GetTime();void(0)" />

        <script type="text/javascript" defer="defer">

        // loading效果
        AjaxPro.onLoading = function(b)
        {
            var a = document.getElementById("loadinfo");
            a.style.visibility = b ? "visible" : "hidden";
        }

        function GetTime()
        {
            // 調用服務端方法
            //調用方法:類名.方法名 (參數為指定一個回呼函數)
            myLoad.GetServerTime(callback);
        }

        function callback(res)  //回呼函數,顯示結果
        {
            alert(res.value);
        }
        </script>
    </form>
</body>
</html>

註：javascript代碼放在form內結束處，確保可以訪問AjaxPro對象，否則提示AjaxPro未定義；因為在服務端page_load輸出js到頁面後才到找到AjaxPro對象；且javascript的defer="defer",頁面載入時先不執行此代碼。
服務端代碼：public partial class myLoad : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(myLoad)); //註冊ajaxPro,括弧中的參數是當前的類名
    }

    [AjaxPro.AjaxMethod] //申明是ajaxPro方法
    public string GetServerTime()
    {
        System.Threading.Thread.Sleep(2000);
        return DateTime.Now.ToString();
    }
}

AjaxPro.Net實現的頁面載入onLoading效果：

範例程式碼下載：/Files/chy710/ajaxPro.rar
環境：AjaxPro2.dll 6.10.6.2 asp.net2.0

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More