Ajax简单示例之改变下拉框动态生成表格

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > UntitledPage </ title >
< script type ="text/javascript" >
var xmlHttp;

function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}

function startRequest()
{
// debugger;
var ProvinceID = document.getElementById( " DropDownList1 " );
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open( " GET " , " ?ProvinceID= " + ProvinceID.value, true );
xmlHttp.send( null );
}

function handleStateChange()
{
if (xmlHttp.readyState == 4 ) // 0(未初始化);1(正在装载);2(装载完毕);3(交互中);4(完成)
{
if (xmlHttp.status == 200 ) // 200(OK);404(notfound)
{
document.getElementById( " gridiv " ).innerHTML = xmlHttp.responseText;
}
}
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:DropDownList ID ="DropDownList1" runat ="server" >
</ asp:DropDownList >
</ div >
< div id ="gridiv" ></ div >
</ form >
</ body >
</ html >

using System.Data.SqlClient;

protected void Page_Load( object sender,EventArgse)
{
if ( ! Page.IsPostBack)
{
this .DropDownList1.Attributes.Add( " onchange " , " returnstartRequest(); " );
ListProvince();
if (ProvinceID != "" )
{
GetCityByProvinceID(ProvinceID);
}
}
}

property #region property
private string ProvinceID
{
get
{
if (Request[ " ProvinceID " ] != null && Request[ " ProvinceID " ].ToString() != "" )
{
return Request[ " ProvinceID " ];
}
else
{
return "" ;
}
}
}
#endregion

GetDataSet #region GetDataSet
private DataSetGetDataSet( string sql)
{
string constring = System.Configuration.ConfigurationSettings.AppSettings[ " ConnectionString " ];
SqlDataAdaptersda = new SqlDataAdapter(sql,constring);
DataSetds = new DataSet();
sda.Fill(ds);
return ds;
}
#endregion

GetCityByProvinceID #region GetCityByProvinceID
private void GetCityByProvinceID( string ProvinceID)
{
string connStr = ConfigurationSettings.AppSettings[ " ConnectionString " ];
SqlConnectionconn = new SqlConnection(connStr);
string sql = " select*fromcitywherefather=' " + ProvinceID + " ' " ;
SqlCommandcmd = new SqlCommand(sql,conn);
conn.Open();
SqlDataReaderdr = cmd.ExecuteReader();

string s = @" <tablecellspacing='0'cellpadding='4'border='0'id='GridView1'style='color:#333333;border-collapse:collapse;'> " ;
s += " <trstyle='color:White;background-color:#990000;font-weight:bold;'> " ;
s += " <thscope='col'>流水号</th><thscope='col'>代号</th><thscope='col'>城市</th></tr> " ;
int m = 0 ;
while (dr.Read())
{
if (m % 2 == 0 )
{
s += " <trstyle='color:#333333;background-color:#FFFBD6;'> " ;
}
else
{
s += " <trstyle='color:#333333;background-color:White;'> " ;
}
m ++ ;
s += " <td> " + dr[ " id " ] + " </td> " ;
s += " <td> " + dr[ " cityID " ] + " </td> " ;
s += " <td> " + dr[ " city " ] + " </td> " ;
s += " </tr> " ;
}
s += " </table> " ;
dr.Close();
conn.Close();
this .Response.Write(s);
this .Response.End();
}
#endregion

ListProvince #region ListProvince
private void ListProvince()
{
string sql = " select*fromprovince " ;
DataSetds = GetDataSet(sql);
DropDownList1.DataSource = ds;
DropDownList1.DataTextField = " province " ;
DropDownList1.DataValueField = " provinceID " ;
DropDownList1.DataBind();
}
#endregion