首頁 > 開發者 > Ajax

MS Ajax 用戶端編程 學習筆記 (3)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
防止使用者多次提交

ajax天性的非同步，後台操作的特性使得程式在執行的時候，無法使使用者瞭解當前正在等待的情況，所以使用者往往會多次提交，為了避免由於重複提交造成的伺服器損失以及使用者體驗降低，就有必要阻止使用者多次提交同一個操作。

在ajax 中可以使用PageRequestManager對應所暴露出的 非同步回送各個階段的事件來判斷是否重複提交，PageRequestManager正常時候的事件觸發順序如下：

1.使用者點擊UpdatePanel中的按鈕，觸發一個非同步操作

2.PageRequestManager對象觸發initializeRequest事件。

3.PageRequestManager對象觸發beginRequest事件

4.請求發送到伺服器

5.用戶端成功收到服務的相應。

6.PageRequestManager對象觸發pageLoading事件。

7PageRequestManager對象觸發pageLoaded事件。

8.Application對象觸發load事件

9PageRequestManager對象觸發endRequest時間。

 

樣本：

aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Multirequest.aspx.cs" Inherits="Multirequest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>無標題頁</title>
    <script type="text/javascript">
    var prm;
    var btnsubmitid = '<%=Button1.ClientID %>'
      function pageLoad() {
        prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(onInitializeRequest);
        prm.add_pageLoaded(onPageLoaded);
      }
      function onInitializeRequest(sender,args)
      {
        if(prm.get_isInAsyncPostBack() && args.get_postBackElement().id==btnsubmitid)
        {
            args.set_cancel(true);
            showWaitingInfo(true);
            setTimeout("showWaitingInfo(false)",1500);
        }
      }
    function showWaitingInfo(visible)
    {
        var id = $get("messagePanel");
        id.style.display=visible?"block":"none";
    }
    function onPageLoaded(sender,args)
    {
        showWaitingInfo(false);
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <br />
        Msg:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="OK"
            Width="55px" />
        <br />
        <br />
        <asp:Label ID="Label2" runat="server" Text="Result:"></asp:Label>
        <asp:Label ID="lblresult" runat="server"></asp:Label>
        <div id="messagePanel" style="display:none;">
            Still Processing,Please be patient.
        </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
    </div>
    </form>
</body>
</html>

cs:

protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
    this.lblresult.Text = this.TextBox1.Text + " &&&&" + this.TextBox2.Text + "TIME:" + System.DateTime.Now.ToLocalTime();
    System.Threading.Thread.Sleep(3000);
}

 

說明：

function pageLoad() {
      //擷取PageRequestManager對象
        prm = Sys.WebForms.PageRequestManager.getInstance();
       //設定事件觸發
        prm.add_initializeRequest(onInitializeRequest);
        prm.add_pageLoaded(onPageLoaded);
      }
      function onInitializeRequest(sender,args)
      {
      //判斷是否正在非同步回送中，並且引發兩次操作回送的按鈕時同一個。
        if(prm.get_isInAsyncPostBack() && args.get_postBackElement().id==btnsubmitid)
        {
            //取消本次的非同步
            args.set_cancel(true);
            //顯示資訊提示使用者
            showWaitingInfo(true);
            //1.5s後隱藏提示資訊
            setTimeout("showWaitingInfo(false)",1500);
        }
      }

 

 

停止正在執行的非同步作業

可以使用PageRequestManager對象的abortPostBack()方法停止當前正在執行的非同步作業。

相關code：

function btnCancel_onclick()
{

if(prm.get_isInAsyncPostBack())
{

   prm.abortPostBack();
}

}

在執行非同步回送時給使用者提示

在PageRequestManager的onBeginRequest的時候，判斷PageRequestManager的get_postBackElement().id是否為當前提交的按鈕，如果是，則顯示waiting的資訊，並禁止使用頁面等。

當onPageLoaded時，恢複頁面。

 

在非同步執行時的異常處理

處理PageRequestManager的onEndRequest事件，例如：

function onEndRequest(sender,args)
{

var error = args.get_error();

if(error)
{

//顯示異常。

$get(“messagePanel”).innerHTML = error.message';

//告知asp.net ajax Client framework error 已經處理。

args.set_errorHandled(true);
}
}

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

相關關鍵詞：
ajax echo ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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