表单界面 Default.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JS 进度条和等待框</title>
<script language="javascript" type="text/javascript">
var AjaxService = function(url,param)
{
//创建XMLHTTP
var createXmlHttp = function()
{
var xmlhttp = null;
try
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{ }
if(xmlhttp == null)
{
try
{
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e)
{ }
if(xmlhttp == null)
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch(e)
{ }
}
}
}
catch(e)
{ }
return xmlhttp;
}
// 给 URL 参数增加随机数字
String.prototype.toRandom = function()
{
var res;
if(this == "")
{
res = "s="+ Math.random();
}
else
{
res = this + "&s=" + Math.random();
}
return res;
}
// 同步操作
this.inPhase = function()
{
var msg;
var xmlhttp = createXmlHttp();
if(xmlhttp == null)
{
alert("创建XMLHTTP出错！");
return -1;
}
xmlhttp.Open("GET", url+"?"+param.toRandom(), false);
xmlhttp.Send();
if (xmlhttp.status == 200)
{
msg = xmlhttp.responseText;
xmlhttp = null;
}
return msg;
}
// 异步执行 completeMethod : 封装的一个方法，包含一个参数
this.asynchronism = function(completeMethod)
{
var msg;
var xmlhttp = createXmlHttp();
if(xmlhttp == null)
{
alert("创建XMLHTTP出错！");
return -1;
}
//打开连接，true表示异步提交，url 为接收请求并进行处理的页面
xmlhttp.open("post",url+"?"+param.toRandom(), true);
//当方法为post时需要如下设置http头
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//发送数据
xmlhttp.send(null);
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
msg = xmlhttp.responseText;
xmlhttp = null;
if(completeMethod != null)
{
completeMethod(msg);
}
}
}
}
}
// GIF 等待框
function waitGif()
{
var name,age;
name = document.getElementById("txtUserName").value;
age = document.getElementById("txtAge").value;
var url = "AjaxPage.aspx"
var param = "name="+escape(name)+"&age="+escape(age)+"×="+escape(document.getElementById("txtWaitTimes").value);
var ajax = new AjaxService(url,param);
// 同步执行，锁屏无效果
// document.getElementById("divMsg").innerHTML = "Request Value :" + ajax.inPhase();
//异步执行
/// XmlHttp 异步执行后回调方法
var completeMethod = function(msg)
{
document.getElementById("divMsg").innerHTML = "Request Value " + msg;
unLockScreen();
}
lockscreen(); //锁屏
ajax.asynchronism(completeMethod);
}
/// 锁屏
function lockscreen()
{
var sWidth,sHeight;
var imgPath = "Images/WaitProcess.gif";
sWidth = screen.width - 20;
sHeight = screen.height- 170;
var bgObj=document.createElement("div");
bgObj.setAttribute("id","divLock");
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "100";
document.body.appendChild(bgObj);
var html = "<table border=\"0\" width=\""+sWidth+"\" height=\""+sHeight+"\"><tr><td valign=\"middle\" align=\"center\"><image src=\""+imgPath+"\"></td></tr></table>";
bgObj.innerHTML = html;
/// 解锁
bgObj.onclick = function()
{
// unLockScreen();
}
}
/// 解锁
function unLockScreen()
{
var divLock = document.getElementById("divLock");
if(divLock == null) return;
document.body.removeChild(divLock);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divMsg">
</div>
<br />
Your name:<input type="text" id="txtUserName" value="陈浩南" /><br />
Your age:<input type="text" id="txtAge" value="28" /><br />
Wait Time:<input type="text" id="txtWaitTimes" value="2000" /><br />
<input type="button" id="btnGif" runat="server" value="提交显示Gif等待框" onclick="waitGif();" />
</div>
</form>
</body>
</html>
后台代码界面 AjaxPage.aspx
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Threading;
namespace WaitProcess
{
public partial class AjaxPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int times = 0;
int.TryParse(Request.QueryString["times"] + string.Empty, out times);
Thread.Sleep(times);
Response.Write("<br>Your name : " + Request.QueryString["name"] + string.Empty);
Response.Write("<br>Your Age : " + Request.QueryString["age"] + string.Empty);
Response.Flush();
}
}
}