快捷導(dǎo)航

asp.net 在客戶(hù)端顯示服務(wù)器端任務(wù)處理進(jìn)度條的探討

更新時(shí)間：2009年09月12日 21:41:53 作者：

由于 HTTP 協(xié)議本身的無(wú)狀態(tài)性，B/S結(jié)構(gòu)的程序無(wú)法像C/S程序那樣，實(shí)時(shí)顯示程序處理的進(jìn)度。搜索一下網(wǎng)上，一般都是采用靜態(tài)變量保存程序執(zhí)行進(jìn)度的方法實(shí)現(xiàn)，但是，這種方法是完全錯(cuò)誤的，在并發(fā)的情況下，多個(gè)用戶(hù)訪問(wèn)一個(gè)程序，會(huì)造成混亂。

下面就是采用靜態(tài)變量的方法實(shí)現(xiàn)的：

復(fù)制代碼代碼如下:

 
<%@ Page Language="C#" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd"> 
<script runat="server"> 
private static int Processbar = 0; 
private static int TotalCount = 100; //設(shè)置初始值，防止出現(xiàn)被0除。 
protected void ProcessTask() 
{ 
//通過(guò)計(jì)算，得出TotalCount的值，比如查詢(xún)數(shù)據(jù)庫(kù)等 
TotalCount = 150; 
while (Processbar < TotalCount) 
{ 
Processbar += 5; 
System.Threading.Thread.Sleep(1000); 
} 
} 

protected void Page_Load(object sender, EventArgs e) 
{ 
if (Request.QueryString["step"] != null && Request.QueryString["step"].Equals(String.Empty) == false) 
{ 
if (Request.QueryString["step"].Equals("1")) 
{ 
Processbar = 0; 
System.Threading.Thread thread = new System.Threading.Thread(new System.Threading.ThreadStart(ProcessTask)); 
thread.Start(); 
Response.ClearContent(); 
Response.Write(0); 
Response.End(); 
} 
else 
{ 
Response.ClearContent(); 
if (Processbar < TotalCount) 
{ 
Response.Write(Processbar * 100 / TotalCount); 
} 
else 
{ 
Response.Write("ok"); 
} 
Response.End(); 
} 
} 
} 
</script> 

<html xmlns="http://www.w3.org/1999/xhtml "> 
<head runat="server"> 
<title>在客戶(hù)端顯示服務(wù)器端任務(wù)處理進(jìn)度條的探討</title> 
<script type="text/javascript"> 
var http = null; 
var count = 1; 
var timer = null; 
function createXMLHTTP() { 
return window.XMLHttpRequest ? new window.XMLHttpRequest() : new window.ActiveXObject("MSXML2.XMLHTTP"); 
} 
function showProcess() { 
http = createXMLHTTP() 
http.open("GET", "<%=Request.Url.ToString() %>?step=" + (count++) + "&" + Date.parse(new Date()), true); 
http.onreadystatechange = function() { 
if (http.readyState == 4 && http.status == 200) 
if ("ok" == http.responseText) { 
document.getElementById("process").innerHTML = "完成"; 
window.clearInterval(timer); 
} 
else { 
document.getElementById("process").innerHTML = http.responseText + "%"; 
} 
} 
http.send(null); 
} 

function startTask() { 
count = 1; 
document.getElementById("process").innerHTML = "0%"; 
timer = window.setInterval("showProcess()", 1000); 
return false; 
} 
</script> 

</head> 
<body> 
<form id="form1" runat="server"> 
<input type="button" value="開(kāi)始處理長(zhǎng)時(shí)間操作" onclick="return startTask();" /> 
<div id="process"></div> 
</form> 
</body> 
</html> 

這種方法，在一個(gè)用戶(hù)訪問(wèn)的情況下是沒(méi)有問(wèn)題的，但多個(gè)用戶(hù)訪問(wèn)時(shí)就會(huì)造成混亂。

下面這這種方法，是常用的方法，一般情況下可以滿(mǎn)足需求：

復(fù)制代碼代碼如下:

 
<%@ Page Language="C#" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 - 

transitional.dtd"> 

<script runat="server"> 
/// <summary> 
/// 設(shè)置全局變量，以便不同的方法是用 
/// </summary> 
private int Processbar = 0; //設(shè)置初始的狀態(tài)，也可以代表一系列步驟中的每個(gè)步驟。 
private int TotalCount = 100; //設(shè)置初始值，防止出現(xiàn)被0除。 
private String key; 
protected void ProcessTask() 
{ 
while (Processbar < TotalCount) 
{ 
Processbar = this.GetProcessbar() + 5; //這里只是模擬一下，每次加 5 
System.Threading.Thread.Sleep(1000); //這里只是模擬一個(gè)長(zhǎng)時(shí)間的執(zhí)行過(guò)程。 
SaveData(); 
} 
} 

protected void Page_Load(object sender, EventArgs e) 
{ 
key = Request.QueryString["guid"]; //多個(gè)并發(fā)請(qǐng)求時(shí)，用來(lái)區(qū)分客戶(hù)端的請(qǐng)求。 
if (String.IsNullOrEmpty(key)) key = Guid.NewGuid().ToString(); 
Processbar = this.GetProcessbar(); 
TotalCount = this.GetTotalCount(); 

//以下判斷原來(lái)判斷請(qǐng)求的不同過(guò)程，是第一次請(qǐng)求，還是更新進(jìn)度條的請(qǐng)求，實(shí)現(xiàn)方法也可以劃分為多個(gè)程序來(lái)實(shí)現(xiàn)。 
if (Request.QueryString["step"] != null && Request.QueryString["step"].Equals(String.Empty) == false) 
{ 
if (Request.QueryString["step"].Equals("1")) 
{ 
// 開(kāi)始執(zhí)行任務(wù)的請(qǐng)求，啟動(dòng)長(zhǎng)時(shí)間的任務(wù)處理。 
Processbar = 0; 
//通過(guò)計(jì)算，得出TotalCount的值，比如查詢(xún)數(shù)據(jù)庫(kù)等，也可以是一個(gè)任務(wù)的多個(gè)步驟的總和。 
TotalCount = 200; //假如完成一個(gè)任務(wù)需要200個(gè)步驟 
SaveData(); 
System.Threading.Thread thread = new System.Threading.Thread(new System.Threading.ThreadStart(ProcessTask)); 
thread.Start(); 
Response.ClearContent(); 
Response.Write(0); 
Response.End(); 
} 
else 
{ 
Response.ClearContent(); 
if (Processbar < TotalCount) 
{ 
// 輸出處理的過(guò)程 
Response.Write(Processbar * 100 / TotalCount); 
} 
else 
{ 
// 所有的任務(wù)都完成了，輸出結(jié)束信息，終止前端的請(qǐng)求。 
Response.Write("ok"); 
Cache.Remove(key); 
} 
Response.End(); 
} 
} 
else 
{ 
G.Text = key; 
if (System.IO.File.Exists(Server.MapPath(key + ".txt"))) 
{ 
System.IO.File.Delete(Server.MapPath(key + ".txt")); 
} 
} 
} 

/// <summary> 
/// 得到執(zhí)行過(guò)程的階段 
/// </summary> 
/// <returns></returns> 
private int GetProcessbar() 
{ 
String data = Convert.ToString(Cache.Get(key)); 
if (String.IsNullOrEmpty(data)) 
return 0; 
else 
{ 
return Convert.ToInt32(data.Split(',')[0]); 
} 
} 

/// <summary> 
/// 得到全部的過(guò)程數(shù) 
/// </summary> 
/// <returns></returns> 
private int GetTotalCount() 
{ 
String data = Convert.ToString(Cache.Get(key)); 
if (String.IsNullOrEmpty(data)) 
return 0; 
else 
{ 
return Convert.ToInt32(data.Split(',')[1]); 
} 
} 

/// <summary> 
/// 將過(guò)程保存。 
/// </summary> 
private void SaveData() 
{ 
WriteLog(); 
Cache.Insert(key, Processbar.ToString() + "," + TotalCount.ToString()); 
} 

private void WriteLog() 
{ 
System.IO.StreamWriter sw = new System.IO.StreamWriter(Server.MapPath(key + ".txt"), true); 
sw.WriteLine("Processbar = " + Processbar + " TotalCount = " + TotalCount + " " + System.DateTime.Now.ToString 

()); 
sw.Close(); 
} 
</script> 

<html xmlns="http://www.w3.org/1999/xhtml "> 
<head id="Head1" runat="server"> 
<title>在客戶(hù)端顯示服務(wù)器端任務(wù)處理進(jìn)度條的探討</title> 

<script type="text/javascript"> 
var http = null; 
var count = 1; 
var timer = null; 
var guid = "<asp:Literal id='G' runat='server'/>"; 
function createXMLHTTP() { 
return window.XMLHttpRequest ? new window.XMLHttpRequest() : new window.ActiveXObject("MSXML2.XMLHTTP"); 
} 
function showProcess() { 
http = createXMLHTTP(); 
http.open("GET", "<%=Request.Url.ToString() %>?step=" + (count++) + "&guid=" + guid + "&" + Date.parse(new 

Date()), true); 
http.setRequestHeader("Connection", "close"); 
http.onreadystatechange = function() { 
if (http.readyState == 4 && http.status == 200) 
if ("ok" == http.responseText) { 
document.getElementById("process").innerHTML = document.getElementById("processbar1").innerHTML = "完成"; 
document.getElementById("processbar2").style.width = "100%"; 
window.clearInterval(timer); 
} 
else { 
document.getElementById("process").innerHTML = document.getElementById("processbar1").innerHTML = 

http.responseText + "%"; 
document.getElementById("processbar2").style.width = http.responseText + "%"; 
} 
} 
http.send(null); 
} 

function startTask() { 
count = 1; 
document.getElementById("process").innerHTML = document.getElementById("processbar1").innerHTML = "0%"; 
document.getElementById("processbar2").style.width = "0%"; 
timer = window.setInterval("showProcess()", 1000); 
return false; 
} 
</script> 

</head> 
<body> 
<form id="form1" runat="server"> 
<input type="button" value="啟動(dòng)處理長(zhǎng)時(shí)間操作" onclick="return startTask();" /> 
<div style="border: 1px solid blue; width: 600px; position: relative;margin:10px 0;"> 
<div style="background: #f00; width: 0; height: 20px;" id="processbar2"></div> 
<div style="position: absolute; text-align: center; top: 0; width: 100%" id="processbar1"></div> 
</div> 
<div id="process"></div> 
</form> 
</body> 
</html> 

代碼執(zhí)行效果：
孟憲會(huì)

但是，這種方法就是萬(wàn)事大吉了嗎？完全錯(cuò)誤，這種方法仍然存在顯示不準(zhǔn)確的現(xiàn)象，造成顯示不準(zhǔn)確的原因就是 Cache 的使用，IIS 6之后，增加了應(yīng)用程序池的功能，這個(gè)功能可以大大提高程序的性能，減少程序本身的錯(cuò)誤導(dǎo)致的整個(gè)網(wǎng)站的崩潰。但是，如果應(yīng)用程序池的“性能”-“Web 園”數(shù)目設(shè)置大于1的情況下，HttpApplicationState（Application）、Cache、HttpSessionState（Session）這些變量都是都是無(wú)法使用了，這是因?yàn)椋好總€(gè)Web 園會(huì)啟動(dòng)一個(gè)w3wp.exe工作進(jìn)程，每個(gè)工作進(jìn)程之間是相互獨(dú)立的，以上這些變量也就是不是共享的了，所以，使用Cache保存程序執(zhí)行進(jìn)度的方法也是不完全正確的。

那么終極的方法是什么呢？對(duì)，將程序執(zhí)行進(jìn)度保存在第三方的存儲(chǔ)介質(zhì)上，如數(shù)據(jù)庫(kù)，文件系統(tǒng)等等都是可以的。這個(gè)方法代碼我就不寫(xiě)了，就是增加訪問(wèn)數(shù)據(jù)庫(kù)的部分即可。

您可能感興趣的文章: