AJAX Development Mike Ormond Developer & Platform Group Microsoft Ltd mike.ormond@microsoft.com

AJAX Development

Mike Ormond Developer & Platform GroupMicrosoft Ltdmike.ormond@microsoft.comhttp://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 Ltdmike.ormond@microsoft.comhttp://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.