Embed Size (px)
Citation preview
AJAX Development
Mike Ormond Developer & Platform GroupMicrosoft [email protected]://blogs.msdn.com/mikeormond
Asynchronous
• Communication• (XMLHttpRequest)
JavaScript
• Client side processing• DHTML
XML
• Data Exchange Format• (JSON, HTML etc)
What is AJAX?
XmlHttpRequest (XHR)var req;
function loadXMLDoc(url) { req = false; // branch for native XMLHttpRequest object if(window.XMLHttpRequest && !(window.ActiveXObject)) { try { req = new XMLHttpRequest(); } catch(e) { req = false; } // branch for IE/Windows ActiveX version } else if(window.ActiveXObject) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { req = false; } }}
if(req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send("");}
function processReqChange() { // only if req shows "loaded" if (req.readyState == 4) { // only if "OK" if (req.status == 200) { // ...processing statements go here... } else { alert("There was a problem retrieving the XML data:\n“ + req.statusText); } }
From: http://developer.apple.com/internet/webcontent/xmlhttpreq.html
ASP.NET AJAX ArchitectureClient Components
Server Components
Server Controls
UpdatePanel
UpdateProgress
ScriptManager
ScriptManagerProxy
Timer
ASP.NET AJAX ExtensionsServer Controls
UpdatePanel
<asp:UpdatePanel runat="server" UpdateMode="Always | Conditional" ChildrenAsTriggers="false | true" RenderMode="Block | Inline ">
<ContentTemplate> <!-- Content Goes Here --> </ContentTemplate>
<Triggers> <asp:AsyncPostBackTrigger ControlID="SomeControl" EventName="Event1" /> <asp:PostBackTrigger "SomeControl" /> </Triggers>
</asp:UpdatePanel>
UpdateProgress<asp:UpdateProgress runat="server" AssociatedUpdatePanelID="u1" DisplayAfter="500" DynamicLayout="true | false" >
<ProgressTemplate> <!-- Content Goes Here --> </ProgressTemplate>
</asp:UpdateProgress>
<asp:Timer runat="server" Enabled="true | false" Interval="500" OnTick="Handler" />
Timer
ScriptManager
<asp:ScriptManager runat="server" AllowCustomErrorsRedirect="true | false" AsyncPostBackErrorMessage="Some Error Message" AsyncPostBackTimeout="500" EnablePageMethods="true | false" EnablePartialRendering="true | false“ LoadScriptsBeforeUI="true | false" ScriptMode="Auto | Debug | Inherit | Release" <AuthenticationService Path="" /> <ProfileService LoadProperties="" Path="" />
<Scripts> <asp:ScriptReference Path="" /> </Scripts>
<Services> <asp:ServiceReference Path="" /> </Services>
</asp:ScriptManager>
UpdatePanel Under the Covers
Extender Control Framework
Enhance ASP.NET controls with client behaviors
Add to aspx to control the client behavior of a server controlHandle events from browser DOM using a behavior
Creating ExtendersCreate JavaScript File for client behaviorEither
– Inherit the ExtenderControl Abstract Class– Implement the IExtenderControl interface
Control Toolkit
ClientComponents
ServerComponents
ASP.NET AJAX
Extensions
ASP.NET 2.0
ASP.NET AJAX Control Toolkit
Controls
Extenders
Extender Controls
Server ASMX RequirementsReference Microsoft.Web.Script.Services [ScriptService] Attribute on Class
Add [WebMethod] Attribute to Method
Web Service
Networking and ServicesAuthentication
Service
Profile Service
ASP.
NET
App
licati
on
Serv
ices
ASPX Page Method
<asp:ScriptManager runat="server" ID=“SM1"> <Services> <asp:ServiceReference path="~/WebService.asmx" /> </Services> </asp:ScriptManager>
Calling Services
Other Host
There’s More…
ASP.NET Futures CTP
Microsoft AJAX Library
ClientComponents
ServerComponents
ASP.NET AJAX
Extensions
ASP.NET 2.0
ASP.NET AJAX Control Toolkit
Controls
Extenders
Visual Studio 2008 (Orcas)
Mike Ormond Developer & Platform GroupMicrosoft [email protected]://blogs.msdn.com/mikeormond
Orcas
Multi-Targeting Support
CSS Support
DataAJAX &
JavaScript Support
Orcas
© 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only.MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.
