如何实现,数据正在载入,请等待…
最近小弟学习VS2005加AJAX,刚实现了文本框显示随机数
上面没问题,下面想实现一个表格来显示数据,是这样实现的,点击按钮,然后呢,提示一个动画,动画内容是:数据正在载入,请等待…
数据显示完成,动画就消失,,想实现这样的效果,不知道任何实现,高人教我呀!
[解决办法]
http.js:
var xmlHttp;
function FunGetHttp(url,ObjectID)
{
var ID = document.getElementById(ObjectID);
if (window.ActiveXObject) //IE
{
xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP ");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
///////////////////////////////////////////////////////////////////////
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState==2)
{
ID.innerHTML = " <img src= 'loading.gif '> ... 正在提交数据 ";
}
else if(xmlHttp.readyState==3)
{
ID.innerHTML = " <img src= 'loading.gif '> ... 数据传送中 ";
}
else if(xmlHttp.readyState==4)
{
ID.innerHTML = " ";
if(xmlHttp.status==200)
{
ID.innerHTML = xmlHttp.responseText;
}
else
{
result.innerHTML = " 查询错误,请检查输入是否正确 ";
}
}
else
{
ID.innerHTML = " <img src= 'loading.gif '> 正在查询,请稍后... ";
}
}
/////////////////////////////////////////////////////////////////////////
xmlHttp.open( "GET ", url ,true);
xmlHttp.send(null);
}
===============================================================================
Ajax.html:
<!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>
<title> Ajax示例一 </title>
</head>
<body>
<script src= "http.js " language= "javascript " type= "text/javascript "> </script>
<script language= "javascript " type= "text/javascript ">
function test(){
var s = document.getElementById( "DropDownList1 ");
FunGetHttp( "Ajax1.aspx?state= "+s.value, "result ");
}
</script>
<select name= "DropDownList1 " onchange= "test() " id= "DropDownList1 ">
<option value= " "> 请选择... </option>
<option value= "CA "> CA </option>
<option value= "IN "> IN </option>
<option value= "KS "> KS </option>
<option value= "MD "> MD </option>
<option value= "MI "> MI </option>
<option value= "OR "> OR </option>
<option value= "TN "> TN </option>
<option value= "UT "> UT </option>
</select>
<div id= "result "> </div>
</body>
</html>
=================================================================================
Ajax1.aspx:
<%@ Page Language= "c# " %>
<%@ Import Namespace= "System.Data " %>
<%@ Import Namespace= "System.Data.SqlClient " %>
<script language= "C# " runat= "server ">
DataTable DT;
void Page_Load(object sender, EventArgs e)
{
SqlConnection MyConnection = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings[ "Pubs "].ConnectionString);
SqlDataAdapter MyCommand = new SqlDataAdapter( "SELECT [au_id], [au_lname], [au_fname], [phone], [address], [city], [state], [zip], [contract] FROM [authors] WHERE [state] = @state ", MyConnection);
string state = "CA ";
if (!String.IsNullOrEmpty(Request.QueryString[ "state "])) state = Request.QueryString[ "state "];
MyCommand.SelectCommand.Parameters.Add(new SqlParameter( "@state ", SqlDbType.VarChar)).Value = state;
DataSet DS = new DataSet();
MyCommand.Fill(DS, "table ");
DT = DS.Tables[0];
}
</script>
<table cellspacing= "0 " rules= "all " border= "1 " id= "Table1 " style= "border-collapse:collapse; ">
<tr>
<th scope= "col "> ID </th> <th scope= "col "> Last Name </th> <th scope= "col "> First Name </th> <th scope= "col "> Phone </th> <th scope= "col "> Address </th> <th scope= "col "> City </th> <th scope= "col "> State </th> <th scope= "col "> Zip Code </th> <th scope= "col "> Contract </th>
</tr>
<%
int i = 0;
for (; i < DT.Rows.Count; i++)
{
%> <tr>
<td > <% = DT.Rows[i][ "au_id "] %> </td> <td> <% = DT.Rows[i][ "au_lname "]%> </td> <td> <% = DT.Rows[i][ "au_fname "]%> </td> <td> <% = DT.Rows[i][ "Phone "]%> </td> <td> <% = DT.Rows[i][ "Address "] %> </td> <td> <% = DT.Rows[i][ "City "] %> </td> <td> <% = DT.Rows[i][ "State "] %> </td> <td> <% = DT.Rows[i][ "Zip "] %> </td> <td> <% = DT.Rows[i][ "Contract "] %> </td>
</tr>
<%} %>
</table>
[解决办法]
up
[解决办法]
学习中...
[解决办法]
你是用微软的asp.net ajax控件做的吗?
是的话放个UpdateProgress控件,然后在UpdateProgress控件中放入你要显示的动画就行了
[解决办法]
好东西