在頁面加載完成之前，如何使用Javascript更新/修改網頁內容？

Question

我正在嘗試在群發郵件過程中顯示進度欄。 我使用經典的ASP，也禁用了內容壓縮。 我只是簡單地更新了一個元素的大小，該元素被模仿為進度條，一個文本元素為百分比值。

但是，在頁面加載期間，似乎忽略了Javascript。 我只看到了很長時間的沙漏，然后看到了進度條以及％100。 如果我在兩次更新之間發出警報，Chrome和IE9會按照我的期望刷新修改后的值。

是否有其他Javascript命令替換alert（）來幫助更新實際值？ alert（）命令可以使瀏覽器立即呈現內容。

謝謝！

 ... Loop for ASP mail send code
 If percent <> current Then
    current = percent   

 %>
   <script type="text/javascript">
     //alert(<%=percent%>);
     document.getElementById('remain').innerText='%<%=percent%>';
     document.getElementById('progress').style.width='<%=percent%>%';
     document.getElementById('success').innerText='<%=success%>';
   </script>
 <%

 End If
 ... Loop end

如果我在代碼中使用alert（），則為以下屏幕截圖：如您所見，它可以工作，但用戶應多次單擊OK。

Answer 1

第一步是將當前進度更改為Session變量：

Session("percent") = percent

第二步是構建一個簡單的機制，該機制將在請求時將該值輸出到瀏覽器：

If Request("getpercent")="1" Then
    Response.Clear()
    Response.Write(Session("percent"))
    Response.End()
End If

最后，您需要使用計時器使用JavaScript讀取百分比。 這最好用jQuery完成，因為純JavaScript AJAX令人頭疼。 添加對jQuery庫的引用后，請提供以下代碼：

var timer = window.setTimeout(CheckPercentage, 100);
function CheckPercentage() {
    $.get("?getpercent=1", function(data) {
        timer = window.setTimeout(CheckPercentage, 100);
        var percentage = parseInt(data, 10);
        if (isNaN(percentage)) {
            $("#remain").text("Invalid response: " + data);
        }
        else {
            $("#remain").text(percentage + "%");
            if (percentage >= 100) {
                //done!
                window.clearTimeout(timer);
            }
        }
    });
}

Answer 2

保持響應直到完成全部處理不是一個可行的選擇，想象一下有30個人正在訪問同一頁面，您將長時間與服務器建立30個持久連接，尤其是對於IIS，我確信這不是一個可行的選擇，它可能在您的開發環境中很好地工作，但是當您轉移生產並且更多的人開始訪問頁面時，服務器可能會關閉。

我希望你研究以下內容

在服務器的后台進行處理，並且長時間不保存響應

嘗試編寫駐留在服務器上的Windows服務，並處理大量郵件

如果您仍然堅持要在網絡上進行操作，請嘗試使用ajax一次發送一封電子郵件，對於每個ajax請求都發送一封電子郵件/兩封

在上面的示例中，如果沒有response.flush，瀏覽器也不會獲取％信息。

Answer 3

好吧，你沒有。 除了打印點或圖像序列之類的簡單效果外，它不會安全工作，甚至緩沖也會干擾。

我的方法是讓您使用ajax請求每秒更新一個腳本的區域，該腳本讀取日志文件或已發送電子郵件的計數文件或由群發郵件過程創建的數據庫中的此類條目。 群發郵件過程也將由ajax啟動。

Answer 4

在處理完成之前，ASP不會在頁面上寫入任何內容（除非您進行刷新）

Response.Buffer=true
write something
response.flush
write something else
etc

（請參見此處的示例： http : //www.w3schools.com/asp/met_flush.asp ）

更好的方法是使用ajax。

這里的例子：

http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html

一開始我不喜歡Ajax，但是現在我喜歡它。