近来网上弄的很火的技术ajax,个人感觉就是通过xmlHttp获取服务端数据返回客户端可以实现无刷新,小试牛刀,感觉还不错.
做了一个基于无刷新的搜索,代码如下：
首先在web.config文件配置如下信息:
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory,Ajax" />
</httpHandlers>
这段不用我多说了,相信大家都明白
HTML代码如下：
1
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="自动搜索.WebForm1" %>
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
3<HTML>
4 <HEAD>
5 <title>WebForm1</title>
6 <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
7 <meta name="CODE_LANGUAGE" Content="C#">
8 <meta name="vs_defaultClientScript" content="JavaScript">
9 <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
10 <script language="javascript">
11
function areaResult()//开始调用服务端方法
12
{
13 var area = document.getElementById("TextBox1");
14 WebForm1.StartAction(area.value,get_Result_CallBack);
15
}
16 function get_Result_CallBack(result)//将返回结果处理后在客户端显示
17 {
18
19 if (result.value != null)
20 {
21 var ds = result.value;
22 if (ds != null && typeof(ds) == "object" && ds.Tables != null)
23 {
24 for(var i=0; i<ds.Tables[0].Rows.length; i++)
25 {
26 var city = ds.Tables[0].Rows[i].city;
27 document.all("DropDownList1").options.add(new Option(city,city));
28 }
29
30 }
31 }
32
33 }
34 function clearCity()//清除上次搜索结果
35 {
36 var models = document.all("DropDownList1");
37 while(models.childNodes.length > 0)
38 {
39 models.removeChild(models.childNodes[0]);
40 }
41 }
42
</script>
43 </HEAD>
44 <body MS_POSITIONING="GridLayout">
45 <form id="Form1" method="post" runat="server">
46 <FONT face="宋体">
47 <asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 192px; POSITION: absolute; TOP: 56px" runat="server"></asp:TextBox>
48 <asp:DropDownList id="DropDownList1" style="Z-INDEX: 102; LEFT: 216px; POSITION: absolute; TOP: 104px"
49 runat="server"></asp:DropDownList>
50 <INPUT style="Z-INDEX: 103; LEFT: 384px; POSITION: absolute; TOP: 56px" type="button" value="搜搜" onclick="areaResult();">
51 </FONT>
52 </form>
53 </body>
54</HTML>
55
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="自动搜索.WebForm1" %>
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >3
<HTML>4
<HEAD>5
<title>WebForm1</title>6
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">7
<meta name="CODE_LANGUAGE" Content="C#">8
<meta name="vs_defaultClientScript" content="JavaScript">9
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">10
<script language="javascript">11
function areaResult()//开始调用服务端方法12
{
13
var area = document.getElementById("TextBox1");14
WebForm1.StartAction(area.value,get_Result_CallBack);15
}16
function get_Result_CallBack(result)//将返回结果处理后在客户端显示17
{18
19
if (result.value != null)20
{21
var ds = result.value;22
if (ds != null && typeof(ds) == "object" && ds.Tables != null)23
{24
for(var i=0; i<ds.Tables[0].Rows.length; i++)25
{26
var city = ds.Tables[0].Rows[i].city;27
document.all("DropDownList1").options.add(new Option(city,city));28
}29
30
}31
}32
33
}34
function clearCity()//清除上次搜索结果35
{36
var models = document.all("DropDownList1");37
while(models.childNodes.length > 0)38
{39
models.removeChild(models.childNodes[0]);40
}41
}42
</script>43
</HEAD>44
<body MS_POSITIONING="GridLayout">45
<form id="Form1" method="post" runat="server">46
<FONT face="宋体">47
<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 192px; POSITION: absolute; TOP: 56px" runat="server"></asp:TextBox>48
<asp:DropDownList id="DropDownList1" style="Z-INDEX: 102; LEFT: 216px; POSITION: absolute; TOP: 104px"49
runat="server"></asp:DropDownList>50
<INPUT style="Z-INDEX: 103; LEFT: 384px; POSITION: absolute; TOP: 56px" type="button" value="搜搜" onclick="areaResult();">51
</FONT>52
</form>53
</body>54
</HTML>55
后置代码:
1 protected System.Web.UI.WebControls.DropDownList DropDownList1;
2 protected System.Web.UI.WebControls.TextBox TextBox1;
3
4 private void Page_Load(object sender, System.EventArgs e)
5 {
6 Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));//对当前类进行注册
7 this.TextBox1.Attributes.Add("onblur","clearCity();");//当失去焦点时清除搜索结果
8 }
9
10 [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]//声明此方法属性为ajax方法
11 public DataSet StartAction(string key)
12 {
13 SqlConnection myConn = new SqlConnection("server=.;database=area;uid=paleyyang;pwd=paleyyang");
14 myConn.Open();
15 SqlDataAdapter myDa = new SqlDataAdapter("select * from city where city LIKE '%"+key+"%'",myConn);
16 DataSet ds = new DataSet();
17 myDa.Fill(ds);
18 return ds;
19 }
protected System.Web.UI.WebControls.DropDownList DropDownList1;2
protected System.Web.UI.WebControls.TextBox TextBox1;3
4
private void Page_Load(object sender, System.EventArgs e)5
{6
Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));//对当前类进行注册7
this.TextBox1.Attributes.Add("onblur","clearCity();");//当失去焦点时清除搜索结果8
}9
10
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]//声明此方法属性为ajax方法11
public DataSet StartAction(string key)12
{13
SqlConnection myConn = new SqlConnection("server=.;database=area;uid=paleyyang;pwd=paleyyang");14
myConn.Open();15
SqlDataAdapter myDa = new SqlDataAdapter("select * from city where city LIKE '%"+key+"%'",myConn);16
DataSet ds = new DataSet();17
myDa.Fill(ds);18
return ds;19
}看懂了上面的例子,基本上做出其它的对数据库的增,删除,改,查基本上没有问题.因为程序都是通的。
