如何利用AJAX实现，数据正在载入，请等待…

最新推荐文章于 2019-04-23 11:00:31 发布

dljinsui

最新推荐文章于 2019-04-23 11:00:31 发布

阅读量2.8k

点赞数

文章标签： ajax xmlhttprequest dataset javascript function table

本文链接：https://blog.csdn.net/dljinsui/article/details/1723787

版权

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" οnchange="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>