有時候我們的web程序要在后台運行一個比較費時的任務,以往我們都是在天台弄個假的gif圖片在哪里轉轉,騙騙用戶。一般很少人做成實時的進度條。最近我又收到一個在后台生成文件的任務,后台生成文件,查詢數據庫N次,比較費時,所以我就想做一個實時的進度條給用戶展示但前文件生成到哪一步了。這個是我項目的需求,根據這個需求,我自己先寫了一個實時進度條的demo。思路如下:
1.首先,我用一個ajax發往后台(異步的),去執行一個耗時比較大的任務,比如我的需求,去查詢n次數據庫然后將結果寫成一個word或者是excel等文件。然后將這個大任務我們手動給它分段,分成多少段這個可以自定義,同時有一個變量用來保存代碼執行到哪一段了,每執行一段,這個變量的值相應的增加。(這個里面的增加邏輯,可以自己控制),我這個demo里面使用了隨機數,以至於前台進度條看起來不那么假(每次沖的進度可能會不一樣)。這個變量值保存在一個全局的Dictionary里面(我暫時還木有找到更好的保存方法,希望有高手給出更好的存儲方案),用一個guid來作為鍵值,這個guid是頁面一加載就生成了的,一直保存在前台js變量里面。
2.用循環 想后台發送一個ajax異步請求,不斷去請求 那個保存進度條值的變量。然后回來改變div的寬度(這里我做進度條是用的兩個div一個是外面的帶邊框的,另一個是里面的帶背景色的)。
基本就是這個思路。代碼附上(我用的asp.net MVC 3),請高手給出更好的建議。