怎么实现，数据正在载入，请等待
日期：2014-05-20 浏览次数：20418 次
如何实现，数据正在载入，请等待…
最近小弟学习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);
最近小弟学习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);
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
