표시 로드 텍스트하는 동안 WebRequest

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

  •  06-07-2019
  •  | 
  •  

문제

나는 버튼이 나 웹 양식.이 버튼을 클릭하면 하 된 플러그 가능한 중 onclick 이벤트 처리기입니다.후에 요청을 우리는 복사에서 응답을 요청으로 HttpContext.현재 있습니다.응답을 보내는 클라이언트.

이 웹 요청하는 데 시간이 걸릴 수 있습니다(최대 5 초 이후,그것의 생성하는 보고서).이 기간 동안 사용자가 표시 없이는 아무것도에 제외하고 브라우저에 대 한 진행 상황 바하고 회전시키는 IE 아이콘(사용하는 경우 IE).그래서 내가 필요로드 표시면서 이런 일들이 벌어지고 있습니다.

해봤 javascript 를 사용하여 발생하는 동안 단추의 onclick 이벤트를 사용하여(OnClientClick)및 동안 작동하는,내가 알지 못하는 방법을 찾을 때에는 웹 요청이 완료됩니다.때문에 우리는 그냥 보내는 클라이언트로 응답을 풀 다시 게시 일어나지 않는다.

해봤 포장 버튼을에서는 UpdatePanel 사용하여 UpdateProgress 그러나 우리가 응답을 보내 HttpContext.현재 있습니다.응답하고 호출에 응답합니다.End(),우리에 오류가 javascript 기 때문에,응답지 않을 잘 형성(우리는 다시 보내 excel sheet 에 대한 사용자는 다운로드).

이후 우리는 다시 전송을 위해 파일을 사용자가 다운로드,내가 원하지 않는 팝업에 별도의 창에 그 이후에 즉 그들은 정보를 얻을 막혀 다운로드가 가능합니다.

어떤 아이디어요?

도움이 되었습니까?

해결책

에 대한 대안으로 전문가 AJAX.NET 라이브러리,jQuery 는 정말 좋은 방법이 있습니다.

살펴보 이 예제 를 사용하는.NET PageMethod(가능한 경우에는 시나리오).

을 정의하는 페이지 메소드 호출에 jQuery 할 수 있습 압정에 로드 중...메시지에 숨겨진 div.

무슨 말을 콜백을 반환할에 성공을(즉 당신의 5 번째 보고서가 생성되) 다음 숨기기 선적 및 처리하는 데이터입니다.

을 살펴 javascript 에게 연락 페이지 예를 들어(보기는 소스).

  1. 나는 버튼 페이지에서,추가 jQuery onClick.
  2. 클릭했을 때 보여주는 숨겨진 로드 div,은 ajax call 페이지 방법은 변수의 형태입니다.
  3. 페이지 방법을 이메일로 보내는 등 다음 반환 양식에서 onSuccess javascript 메소드가 있다.
  4. OnSuccess 숨기 적재 div.

다른 팁

과거에 사용한 간단한 요령은 애니메이션 진행 막대 (GIF)가있는 중간 페이지로 리디렉션 한 다음 해당 페이지가 데이터의 실제 게시물을 수행하도록하는 것입니다. (또는 애니메이션과 함께 레이어를 팝업하고 사용자에게 1 ~ 2 분 동안 기다리라고 요청하는 예의 바른 메시지)

애니메이션 GIF의 간단한 피드백은 앱이 정체되지 않았으며 더 참을성이 있다는 최종 사용자에게 환상을 만듭니다.

또 다른 접근법은 데이터를 작업자 스레드에 전달하고 보고서가 사이트의 "보고서"섹션에서 준비되었다는 메시지가 표시되거나 준비된 메시지와 함께 즉시 반환하는 것입니다. 이 접근법은 보고서가 완료 될 때 즉각적인 알림의 이점이 부족합니다.

Here is my solution :

  1. Download and examine the samples of free Professional AJAX.NET library.
  2. Write a AjaxMethod that creates your file and returns file location as a parameter.
  3. Write your Client-Side function to call method at Step 2. When this method called show an indicator.
  4. Write a client-side callback method to hide indicator and show/download file that user requested.
  5. Add your client-side function calls yo your button element.

When your method at server-side ends your callback will be called.

Hope this helps !

내가 여기에 제시하고있는 솔루션은 서버 측 처리 중에 "로드 ..."상자가 나타나고 서버 측 처리가 완료되면 사라지는 방법을 보여주기위한 것입니다.

나는 매우 기본적인 Ajax 기계 (FF에서 테스트되었지만 즉, 괜찮아 야합니다), 즉 프로토 타입이나 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>

보시다시피, a <div> "로드 ..."메시지를 보유합니다.

원칙은 <div> 에 따라 XMLHttpRequest 사물 readyState.

나는 그것을 사용했다 onreadystatechange 핸들러 XMLHttpRequest 트리거하려면 readyState 변화.

내가 사용하는 백엔드 PHP 스크립트 (양식으로 선언 된 action)은 "로딩 ..."메시지가 5 초 동안 나타나기 위해 잠을 자고 (5) 만 수행합니다.

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

그만큼 Cache-control: no-cache 헤더가 필요합니다. 일반적으로 설정하지 않으면 브라우저는 필요한 경우 요청을 다시 제출하는 것을 피하는 응답을 캐시합니다.

"시작"Ajax 문서의 좋은 소스는 모질라 MDC.

프로토 타입과 같은 JavaScript 프레임 워크에 의해 훨씬 더 부드럽게 처리 될 수 있으며, 브라우저 안전 접근 방식을 활용하여 몇 시간의 디버그를 절약 할 수 있습니다.

편집하다:

나는 asp.net이나 ASP를 모르기 때문에 PHP를 선택했습니다. 죄송합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top