在执行WebRequest时显示加载文本

StackOverflow https://stackoverflow.com/questions/185239

  •  06-07-2019
  •  | 
  •  

题

我的网络表单上有一个按钮。单击此按钮将在onclick事件处理程序期间执行HttpWebRequest。在请求之后，我们将请求中的响应复制到HttpContext.Current.Response并将其发送给客户端。

此Web请求可能需要一段时间（最多5秒，因为它正在生成报告）。在此期间，除了浏览器进度条和旋转IE图标（如果他们使用IE）之外，用户没有任何指示正在进行任何操作。所以当发生这种情况时我需要一个加载指示器。

我尝试使用在按钮的onclick事件期间触发的javascript（使用OnClientClick），虽然有效，但我不知道如何找出Web请求何时完成。由于我们只是将响应发送给客户端，因此不会发生完整的回发。

我已尝试在UpdatePanel中包装按钮并使用UpdateProgress，但是当我们将响应发送到HttpContext.Current.Response并调用Response.End（）时，我们在javascript中收到错误，因为响应不是形成良好（我们正在寄回一张excel表供用户下载）。

由于我们要发回一个文件供用户下载，我不想弹出一个单独的窗口，因为在IE中他们会得到阻止下载的信息栏。

这里有什么想法吗？

有帮助吗？

解决方案

作为Professional AJAX.NET库的替代品，jQuery有一种非常好的方法。

看看使用.NET PageMethod的示例（如果可能，在您的场景中）。

你在jQuery中定义了一个页面方法调用，你可以在隐藏的div中添加你的loading ...消息。

说出您想要在成功时返回的回调（即生成5秒报告时） 然后隐藏加载并处理数据。

查看javascript 在我的联系页面上查看示例（查看来源）。

  1. 我在页面上有一个按钮，添加jQuery onClick。
  2. 当单击显示隐藏的加载div时，对带有表单参数的页面方法进行ajax调用。
  3. 页面方法会发送电子邮件等，然后返回到我在那里的onSuccess javascript方法中的表单。
  4. onSuccess隐藏了加载div。

其他提示

我过去使用的一个简单技巧是重定向到带有动画进度条（gif）的中间页面，然后让该页面执行数据的REAL帖子。 （甚至弹出一个带有动画的图层和礼貌的消息，要求用户等一两分钟）

动画gif的简单反馈给终端用户带来了幻觉，即应用程序没有停顿，他们会更耐心。

另一种方法是将数据移交给工作线程，并立即返回一条消息，指出报告将通过电子邮件发送或在<！> quot; reports <！>中提供。准备好的网站部分。这种方法在报告完成时缺乏即时通知的好处。

这是我的解决方案：

  1. 下载并查看免费 Professional AJAX.NET 库的样本。
  2. 编写一个AjaxMethod，用于创建文件并将文件位置作为参数返回。
  3. 将您的客户端函数编写为步骤2中的调用方法。此方法调用时显示指示符。
  4. 编写客户端回调方法以隐藏指示符并显示/下载用户请求的文件。
  5. 使用按钮元素添加客户端函数调用。

    6. 当您在服务器端的方法结束时，将调用您的回调。

    希望这有帮助！

我在这里提出的解决方案旨在展示一种让<！>“加载...... <！>”的方法。在服务器端处理时出现的框，在服务器端处理完成时消失。

我将使用非常基本的AJAX机制（在FF上测试，但IE也应该可以），即不使用像Prototype或jQuery或Dojo这样的框架，因为你没有指定你的知识。

为了让您更好地理解这个技巧，以下只是一个小例子，并不假装是开箱即用的解决方案。我倾向于不肤浅，但我认为一个更清晰的例子可以比许多词语更好地解释。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>First Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .hidden {
                display: none;
            }
            .loadingInProgress {
                color: #FFFFFF;
                width: 75px;
                background-color: #FF0000;
            }
        </style>
    <script type="text/javascript">
        var httpRequest;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            httpRequest = new XMLHttpRequest();
            httpRequest.overrideMimeType('text/xml');
        } else if (window.ActiveXObject) { // IE
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {}
            }
        }

        if (!httpRequest) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
        }

        httpRequest.onreadystatechange = function(){
            switch (httpRequest.readyState) {
            case 1: // Loading
                document.getElementById('loading').className = "loadingInProgress";
                break;
            case 4: // Complete
                document.getElementById('loading').className = "hidden";
                if (httpRequest.status == 200) {
                    // perfect!
                } else {
                    // there was a problem with the request,
                    // for example the response may be a 404 (Not Found)
                    // or 500 (Internal Server Error) response codes
                }
                break;
            }
        };

        function go() {
            httpRequest.open('GET', document.getElementById('form1').action, true);
            httpRequest.send('');
        }
    </script>

  </head>
  <body>
      <div id="loading" class="hidden">Loading...</div>
      <form id="form1" name="form1" action="doSomething.php">
          <input type="button" value="Click to submit:" onclick="go()" />
      </form>
  </body>
</html>

如你所见，有一个<div>，其中包含<！>“Loading ... <！>”;消息。

原则是显示/隐藏XMLHttpRequest，具体取决于readyState对象的onreadystatechange。

我已经使用action的Cache-control: no-cache处理程序来触发<=>更改。

我使用的后端php脚本（声明为表单的<=>）只是睡眠（5），让<！>“加载... <！>”;消息显示5秒钟。

<?php
sleep(5);
header('Cache-Control: no-cache');
echo "OK";
?>

<=>标头是必要的，因为通常如果您没有设置它，浏览器将缓存响应，以避免在需要时重新提交请求。

<！>“开始的良好来源<！> AJAX文档是 Mozilla MDC 。

整个事情可以通过像Prototype这样的Javascript框架轻松处理，利用其浏览器安全方法，节省您的调试时间。

编辑：

我选择了php'因为我不知道ASP.NET也不知道ASP，对不起。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top