zoukankan      html  css  js  c++  java
  • MS Ajax 客户端编程 学习笔记 (3)

    防止用户多次提交

    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>

    image

    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);
    }
    }

  • 相关阅读:
    约束constraint
    多表查询
    多表关系
    vue 页面跳转的两种方式
    Java三大特性
    如何搭建vue搭建手脚架(vue-cli 3.0以上版本)
    Mysql高版本不兼容group by解决方案
    springboot整合shiro 报 This application has no explicit mapping for /error, so you are seeing this as a fallback. 错误
    使用Springboot整合redis与mysql
    Springboot登录拦截器
  • 原文地址:https://www.cnblogs.com/zhucl1006/p/1339901.html
Copyright © 2011-2022 走看看