同事要用網頁跑一段很久的程序,因此想用"簡便"的方法產生即時狀態更新的效果,以免使用者等到抓狂。(簡便->代表用最少的Code做出需要的功能,有沒有用到又酷又炫的AJAX,架構、程式漂亮與否是其次)

我想到最簡單的方法是在這段要執行很久的ASP.NET中,用Response.BufferOutput = false加上Response.Write("..")、Response.Flush(),每執行到一個段落,輸出一部分內容來更新狀態。

於是我寫了以下的Sample Code:

<%@ Page Language="C#" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.BufferOutput = false;
        Response.Flush();
        for (int i = 1; i < 10; i++)
        {
            Response.Write("<li>" + i.ToString());
            Response.Flush();
            System.Threading.Thread.Sleep(1000);
        }
        Response.Write("</body></html>");
        Response.End();
    }
</script>
<html">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    </form>
</body>
</html>

在我的機器上測試成功後,丟給同事測試,傳來結果卻是最後才一次輸出所有數字。

自己將程式放到不同機器反覆測試了一下,發現有趣的現象: 這段程式有時可以陸續印出1, 2, 3, 4、有時則會等到最後才一次印出。而且往往第一次執行不OK,但按下IE的重新載入卻又成功。

會不會問題出在瀏覽器端?

於是我用HttpWatch進行觀察,驗證了我的猜測,在成功與失敗兩種情況中,資料都有陸續送至瀏覽器,但卻分別得到陸續印出或一次印出兩種結果。

我又另外試了Firefox及Chrome,得到更有趣的結果: Firefox永遠陸續印出,Chrome則永遠一次印出。

我大膽推論,當收到的HTML碼還不完整時,要不要Render出元素出來,取決於Browser。Firefox選擇了收到立即處理,Chrome則是等收齊再說。而IE最彈性,當發現接收資料的速率較慢時,怕會收到太多破碎不完整的HTML片段做白工,選擇收集齊再產出;當接收速度不差時,就採行收到立即處理。這個推論可以解釋,為何在本機總是成功,在遠端第一次失敗,Reload會成功,但是否為真我就不敢確定了。

當HTML不完整時,各瀏覽器的處理原則不一,看來這個方法並不理想。我想到另一招,<script>中的段落應該都會即時處理才對,所以將程式修改如下:

<%@ Page Language="C#" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.BufferOutput = false;
        Response.Clear();
        Response.Write("<html><body><span id='spnDisp'></span>");
        Response.Flush();
        for (int i = 1; i < 10; i++)
        {
            Response.Write("<script type='text/javascript'>");
            Response.Write("document.getElementById('spnDisp').innerHTML='" 
+ i.ToString() + "';");
            Response.Write("</" + "script>");
            Response.Flush();
            System.Threading.Thread.Sleep(1000);
        }
        Response.Write("</body></html>");
        Response.End();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    </form>
</body>
</html>

Bingo!! 使用IE, Firefox, Chrome測試都可成功運作! 不過我還是不確定,會不會在某些特例下失常? 大家看看還有沒有什麼點子,歡迎討論。


Comments

# by 讚啊!

不錯,很好的東西!

# by Will 保哥

這一行有讓我會心一笑: Response.Write("</" + "script>"); P.S. 這是 ASP.NET 的 Behind 喔! ^_^

# by Jeffrey

to Will, 經驗裡放在Inline Code時會有這個問題,如果寫在Code Behind的cs中就沒這個顧忌。巧得很,才讀到一篇相關文章沒幾小時(http://www.dotblogs.com.tw/yilinliu/archive/2008/08/14/4909.aspx ),馬上就給我來個臨時抽考。

# by Johnny

如果使用 Response.Write 輸出 JavaScript 的話, 如果網頁中有使用 UpdatePanel, 我記得是會發生問題。

# by Martin

請問一下, 這個效果在UpdatePanel中要怎麼樣才能做到呢?

# by Jeffrey

to Martin, 如果是UpdatePanel,應該做法會很不相同,我的想法是分成兩個網頁,一個用來跑程式,一個則用來看進度。跑程式時要定期將狀態更新在Server端的Session或Cache,進度程式就可以用定期觸發UpdatePanel的方式讀到最近的進度。大概的會從這個方向去研究,但似乎稍有難度就是了。

# by 貓霸

真是難以為情,今天才發生RESPONSE.BINARYWRITE的狀況,因為過年前換了台全SSD網頁+MSSQL伺服器,一個輸出EXCEL的頁面出了問題,上估狗搜到這裡,加了一句Thread.Sleep(1000);,搞定! 看來伺服器跑太快也會有問題,尷尬

Post a comment


83 - 80 =