我与ajax的第一次亲密接触！

ajax出来好长时间了，但是一直都没有看过，今天闲来无事，看了一下，做了两个小例子，一个是验证注册的，一个是提交数据在girdview中显示的，初次接触，没有什么很深的见解，只是把自己理解的记录一下：

 

我用的vs2008，framework用的是2.0，因为在vs2008的framework3.5下已经有了ajax的控件，所以就不用安装了，直接下个ajax的模板，具体操作借鉴http://www.evget.com/zh-CN/Info/ReadInfo.aspx?id=7628（使用VS2008开发运行在.net 2.0环境下的 ASP.NET AJAX 网站）。我是直接下个ASPAJAXExtSetup.msi和ASPNETAJAXVS2008.msi装上就行了，然后在web.config的 <system.web></system.web>中加入下面这段代码就ok了，这段代码从网上找的，不加的话运行会出javascript错误，说是sys未定义。

1.     <httpHandlers>
2.       <remove verb="*" path="*.asmx"/>
3.       <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
4.       <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
5.       <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
6.     </httpHandlers>

做的两个小例子主要用到了ajax的UpdatePanel控件，其用法属性如下：

属性	说明
ChildrenAsTriggers	当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送才会引发UpdatePanle的更新
RenderMode	表示UpdatePanel最终输出的HTML元素。Block（默认）表示<div>，Inline表示<span>
UpdateMode	表示UpdatePanel的更新模式，有两个选项：Always（默认）和Conditional。Always是不管有没有Trigger，其他控件都将更新该UpdatePanel，Conditional表示只有当前UpdatePanel的Trigger，或ChildrenAsTriggers属性为true时当前UpdatePanel中控件引发的异步回送或者整页回送，或是服务器端调用Update()方法才会引发更新该UpdatePanel。

 

AJAX的UpdatePanel有个比较重要的属性 Triggers，它有两个值分别为AsyncPostBackTrigger和PostBackTrigger。AsyncPostBackTrigge用来指定某个服务器端控件以及其将触发的服务器端事件，作为该UpdatePanel异步更新的触发器，它需要设置的属性有控件ID和服务端控件的事件；PostBackTrigger用来指定在UpdatePanel中的某个服务端控件，它所引发的回送不使用异步回送，而仍然是传统的回送，换句话说就是，用提交表单的形式来交互。

举例：

定义一个gridview控件，将这个控件放入updatepanel中

1. <form id="form1" runat="server">
2. <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
3. <asp:UpdatePanel ID="UpdatePanel1" runat="server">
4. <ContentTemplate>
5.     <div>
6.           <asp:Button ID="Button1" runat="server" Text="只刷新GirdView" OnClick="Button2_Click" />  
7.           <asp:Button ID="Button2" runat="server" Text="整页刷新" OnClick="Button3_Click" /><br />
9.         <asp:GridView ID="GridView1" runat="server" BackColor="White" 
10.             BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="4" 
11.             ForeColor="Black" GridLines="Horizontal">
12.             <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
13.             <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
14.             <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
15.             <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
16.         </asp:GridView>
17.     </div>
18. </ContentTemplate>
19. <Triggers>
20.             <asp:AsyncPostBackTrigger ControlID="Button1" />
21.             <asp:PostBackTrigger ControlID="Button2" />
22.     </Triggers>
23. </asp:UpdatePanel>
24. </form>

<asp:AsyncPostBackTrigger ControlID="Button1" />将button1的行为定义为异步更新

<asp:PostBackTrigger ControlID="Button2" />将button2的行为定义为传统形式，默认状态下在updatepanel中的控件行为为AsyncPostBackTrigger异步更新。

button1的代码为随机搜索1-10条记录，button2同上，运行时就会发现点击button2时是整页刷新，下面会出现页面打开的进度条，而点击button1就不会出现进度条，他的刷新范围只是gridview控件。

 

Timer控件可以做到定时刷新updatepanel中控件的内容。