基于无刷新的搜索

基于无刷新的搜索

近来网上弄的很火的技术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

后置代码:

 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        }

看懂了上面的例子,基本上做出其它的对数据库的增,删除,改,查基本上没有问题.因为程序都是通的。

posted on 2006-10-22 00:04 我就是烟鬼 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/paleyyang/archive/2006/10/22/536156.html