Figure 1 闪光更新
<script type=”text/javascript”> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_pageLoaded(pageLoaded); var _panels, _count; function pageLoaded(sender, args) { if (_panels != undefined && _panels.length > 0) { for (i=0; i < _panels.length; i++) _panels[i].dispose(); } var panels = args.get_panelsUpdated(); if (panels.length > 0) { _panels = new Array(panels.length); for (i=0; i < panels.length; i++) _panels[i] = new Sys.UI.Control(panels[i]); flashPanels(3); } } function flashPanels(count) { _count = (count << 1) + 1; for (i=0; i < _panels.length; i++) _panels[i].set_visible(false); window.setTimeout(toggleVisibility, 50); } function toggleVisibility() { for (i=0; i < _panels.length; i++) _panels[i].set_visible(!_panels[i].get_visible()); if (--_count > 0) window.setTimeout(toggleVisibility, 50); } </script>
Figure 2 使用 UpdatePanel 填写“城市”和“州”字段
<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”> <ContentTemplate> City:<br /> <asp:TextBox ID=”City” runat=”server” /> <br /><br /> State:<br /> <asp:DropDownList ID=”Region” runat=”server”> <asp:ListItem Value=”AL”>Alabama</asp:ListItem> <asp:ListItem Value=”AK”>Alaska</asp:ListItem> <asp:ListItem Value=”AZ”>Arizona</asp:ListItem> ... <asp:ListItem Value=”WV”>West Virginia</asp:ListItem> <asp:ListItem Value=”WI”>Wisconsin</asp:ListItem> <asp:ListItem Value=”WY”>Wyoming</asp:ListItem> </asp:DropDownList> <br /><br /> Zip Code:<br /> <asp:TextBox ID=”ZipCode” runat=”server” /> <asp:Button ID=”AutofillButton” Text=”Autofill” OnClick=”GetCityAndState” runat=”server” /> </ContentTemplate> </asp:UpdatePanel>
Figure 4 不使用 UpdatePanel 填写“城市”和“州”字段
<asp:ScriptManager ID=”ScriptManager1” runat=”server”> <Services> <asp:ServiceReference Path=”ZipCodeService.asmx” /> </Services> <Scripts> <asp:ScriptReference Name=”PreviewScript.js” Assembly=”Microsoft.Web.Preview” /> </Scripts> </asp:ScriptManager> City:<br /> <asp:TextBox ID=”City” runat=”server” /> <br /><br /> State:<br /> <asp:DropDownList ID=”Region” runat=”server”> <asp:ListItem Value=”AL”>Alabama</asp:ListItem> <asp:ListItem Value=”AK”>Alaska</asp:ListItem> <asp:ListItem Value=”AZ”>Arizona</asp:ListItem> ... <asp:ListItem Value=”WV”>West Virginia</asp:ListItem> <asp:ListItem Value=”WI”>Wisconsin</asp:ListItem> <asp:ListItem Value=”WY”>Wyoming</asp:ListItem> </asp:DropDownList> <br /><br /> Zip Code:<br /> <asp:TextBox ID=”ZipCode” runat=”server” /> <asp:Button ID=”AutofillButton” Text=”Autofill” OnClientClick=”autoFill(); return false;” runat=”server” /> <script type=”text/javascript”> function autoFill() { var tb = new Sys.Preview.UI.TextBox ($get(‘ZipCode’)); var zip = tb.get_text(); if (zip.length == 5) ZipCodeService.GetCityAndState (zip, onGetCityAndStateCompleted); } function onGetCityAndStateCompleted(result) { if (result != null) { var tb = new Sys.Preview.UI.TextBox ($get(‘City’)); tb.set_text(result[0]); var select = new Sys.Preview.UI.Selector ($get(‘Region’)); select.set_selectedValue(result[1]); } } </script>
Figure 5 JSON 编码的输入和输出
请求
POST /Ajax/ZipCodeService.asmx/GetCityAndState HTTP/1.1 Accept: */* Accept-Language: en-us Referer: http://localhost:1997/Ajax/ZipCodePage.aspx UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; ...) Host: localhost:1997 Content-Length: 15 Connection: Keep-Alive Cache-Control: no-cache {"zip":"98052"}响应
HTTP/1.1 200 OK Server: ASP.NET Development Server/8.0.0.0 Date: Fri, 29 Dec 2006 21:06:17 GMT X-AspNet-Version: 2.0.50727 Cache-Control: private, max-age=0 Content-Type: application/json; charset=utf-8 Content-Length: 16 Connection: Close {"REDMOND", "WA"}