DevelopingDeveloping FutureFuture WebWeb ApplicationApplication withwith AJAXAJAX andand ASP.NETASP.NET ProjectProject "Atlas""Atlas"
SmithSmith SuksmithSuksmith Microsoft MVP – Solution Architect Web Application…
Rich UI can’t delivered by Browser Technology
How about Google Earth Google Search Suggestion OWA A Brief History
FF 1.5 Beta SVG Java Applet E4X NS 2.0B3 ECMAScript XSL-T Mozilla 1.0 JavaScript Flash 3 WSDL FF 1.0 CSS DOM 1 XHTML SVG Flash 8
96 97 98 99 00 01 02 03 04 05 XSL-T 2 IE 3 IE 4 IE 5 IE 6 XForms IFrames DOM XML It Works! DOM 3 CSS XSL-T RDF JScript XMLHTTP
Browser Wars The Web Depression Web 2.0
Source: eBusinessApps What Is Web 2.0?
After the Internet bubble burst in 2001, many people thought the Web was over-hyped.* In fact, bubbles and subsequent shakeouts are common to all technological revolutions. Shakeouts typically mark the point at which ascendant technologies are ready to take their place at center stage. Web 2.0 confirms this view. Web 1.0 was transformed into a new medium.
* “What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software,” Tim O’Reilly. http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html. Transformations
Web 1.0 Web 2.0 DoubleClick --> Google AdSense Ofoto --> Flickr Akamai --> BitTorrent Britannica Online --> Wikipedia Personal websites --> Blogging Domain name speculation --> Search engine optimization (SEO) Page views --> Cost per click Publishing --> Participation Content management --> Wikis systems Directories (taxonomy) --> Tagging ("folksonomy") Stickiness --> Syndication
Source: http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html Source: http://nonfiction.ig-gestaltung.de/archives/2005/11/11/the-huge-cloud-lens-bubble-map-web20/ What’s AJAX? So, What’s AJAX for us (Geek?)
Asynchronous JavaScript and XML Standards-based presentation using XHTML and CSS Dynamic display and interaction using DOM Data interchange and manipulation using XML and XSLT Asynchronous data retrieval using XMLHttpRequest JavaScript binding everything together
??? New Technology ??? Classic Web Application Model (Sync) AJAX Web Application Model (Async) AJAX Client Model
No more single Request/Response restrictions Have flexibility to go back to the server when we want XMLHttpRequest
Invented by Microsoft, First implement in IE5 as ActiveX (MSXML2) Asynchronous Processing Allows to kick off an HTTP request in the background Callbacks into the JavaScript code Supported in various browsers (Firefox 1.0, Safari, Opera8) Why’s it the big deal? Changes the request/response paradigm Async is not new XMLHttpRequest: Example
Asynchronously update fields XMLHttpRequest: Working with Browsers
Browser Dependent Code – The old problems never die
function xmlGet(method, url, responseHandler) {
if (window.XMLHttpRequest) { // browser has native support for XMLHttpRequest object req = new XMLHttpRequest();
} else if (window.ActiveXObject) { // try XMLHTTP ActiveX (Internet Explorer) version req = new ActiveXObject("Microsoft.XMLHTTP"); } .....
Cross Browser XMLHttpRequest Code XMLHttpRequest: Make the Request Handle the response callback from the server Setup the HTTP request URL Configure the callback for the response Send the async message
function xmlGet(method, url, responseHandler) { ..... if(req) { Asynchronous req.onreadystatechange = responseHandler; req.open(method, url, true ); req.setRequestHeader("content-type","application/x-www-form-urlencoded"); req.send(null); }
Click here to get the contents of notes.xml from the server.
function notesResponseHandler() { // Make sure the request is loaded (readyState = 4) if (req.readyState == 4) { if (req.status == 200) { var swappableSection = document.getElementById('notesSection'); var notes = req.responseXML.getElementsByTagName('note'); ..... swappableSection.innerHTML = str; notes.innerHTML = strNote; Demo:Demo: SimpleSimple AJAXAJAX ASP.NET Script Callback ASP.NET 2.0 Script Callback
Implement interface System.Web.UI.ICallbackEventHandler Implement method RaiseCallbackEvent Public string RaiseCallbackEvent(string eventArgs) Invoke Page.ClientScript.GetCallbackEventReference() method on Page_Load to glue back to client side method Page.ClientScript.GetCallbackEventReference(this , arg, [client-side function name], ctx, [client-side error handler function], async) AJAX draws back
The back, stop, and refresh buttons don’t always work. Since Ajax applications generate pages dynamically, there generally aren’t static links available for bookmarking or sharing with others. Pages don’t always print well. Applications don’t run offline. Clicks and actions generally don’t get included into a browser’s history table Ajax requires JavaScript AJAX concerns
Do not load entire pages Do not break what the user is focusing on Do not use it to eliminate acceptance Do not over use it Consider how to handle users that cannot use XMLHttpRequest How to best use AJAX
Use it for small updates to the web page. Build as much of the user interface for the web page statically as possible in order to limit how many AJAX calls are needed. How Not To Use AJAX
Each AJAX operation causes a new HTTP transaction so overuse can quickly bring down a heavily trafficked webserver. Don’t use it where it makes more sense to submit a form. Don’t use it for calculations and interface updates that can be done with client-side operations only. Good stuff
Much more responsive user interface Desktop application functionality in familiar Web browser interface Client responsible for state management Zero effort software updates (for users!) “Cool” factor Bad stuff
Requires “modern” browser DChart support currently limited to IE 6, Firefox 1.0.x, Mozilla Covers > 90% of users and alternative would be downloading desktop app Debugging is difficult A lot for developers to learn: XML,XPath,XSLT,JavaScript, CSS, DHTML, DOM… Libraries/frameworks immature Maintenance and testing difficult And the ugly…
Browser incompatibilities still an issue: GET limited to 2048 characters in IE IE window coordinate system different than Firefox IE memory leaks Legacy ActiveX reference counting Transparent images with alpha channel Disappearing DOM nodes with XSLT in IE Ugly kludges required: GET/POST through Iframe to retain history MicrosoftMicrosoft ASP.NETASP.NET ““AtlasAtlas ”” Microsoft ASP.NET Atlas
Microsoft AJAX Implementation on .NET Framework 2.0 Base on System.Web.UI.ICallBackEventHandler Cross-Browsers ***WOW*** Include 3 components Client script library Web server controls Web services
Currently under Beta, planned release H1/2006 http://atlas.asp.net “Atlas” Architecture
HTML, Script, “Atlas ” “Atlas ” Service “Atlas ”-enabled Web Services Markup Proxies ASP.NET Pages (ASMX or WCF)
“Atlas” Client Script Library ASP.NET “Atlas” Server Extensions
Controls, Components App Services “Atlas” Bridge “Atlas” Client Server Controls Component Model and Web Services Application UI Framework Bridge Services Base Class Library Local Store ASP.NET 2.0 Script Core Page Application Browser Framework, Services Integration Browser Compatibility Server Controls
“Atlas ” Client Framework and “Atlas ” Server Services Framework “Atlas” Client Script Library
“Atlas” script core – a full type system for Javascript Classes and interfaces, inheritance, virtual and abstract methods Enumerations Multi-cast event handlers similar to .NET
Base class library StringBuilder, extensions to existing types Serializers Debugging and tracing classes Networking “Atlas” Networking
Client networking stack layered on XMLHTTP WebRequest , WebResponse , MethodRequest classes ASP.NET “Atlas” Web Services Bridge Access to ASP.NET-hosted and serviced components ASMX and WCF services, .NET objects, ASP.NET page-level services Automatic client proxy generation Integrated with ASP.NET intrinsics Wire format: Javascript object notation
public class Location { public Point Coordinates; { Coordinates : { X: 2.17, Y: 48.51 }, public String Name; Name : "Eiffel Tower" } } “Atlas” Behaviors
Behaviors add interactivity to any “Atlas” UI Easily attached to a DHTML element Built-in behaviors Richer data presentation: tooltips, floating windows Interactive input: autocomplete, drag and drop Glitz: animation and visual effects Work on all major browsers Demo:Demo: AtlasAtlas Other features of “Atlas”
Components, controls, and behaviors Client-side data binding Client-side validation
Upcoming features Templates UI Enhancement Extensible Framework Preparing for “Atlas”
Structure your application for reuse Separate application UI functionality into web services Build UI components using user controls Use CSS to style web apps
Use ASP.NET 2.0 ASP.NET client callbacks (ICallbackEventHandler) UI personalization Application building-block services
Start thinking about richer web UI experiences Web Sites
atlas.asp.net www.ajaxian.com www.ajaxgoals.com http://ajax.schwarz-interactive.de/csharpsample Conclusion
Don’t use for the technology sake Understand usability testing Users’ve been trained with SUBMIT button Can’t redefine the way a UI works Understand restrictions Implicit JavaScript restrictions Programming constructs that you wish you had ThankThank youyou
smith.suksmith@fns.usda.gov ssuksmith@id.co.th © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. XMLHttpRequest Methods
abort() – Terminates a transaction getAllResponseHeaders() – Retrieves all of the HTTP headers and bodies for the response. open(httpMethod, url, [isAsynchronous, username, password]) – Opens a connection to the server. Parameters in [ ] are optional and may be left out entirely. send(content) – Send either a string or a DOM object to the server. setRequestHeader(key, value) – Sets the value for a request header. This can be particularly useful for using XMLHttpRequest objects with multipart form posts. XMLHttpRequest Properties
onreadystatechange – This is a method delegate for a function that handles the processing of the HTTP transaction as well as the response text or XML. readyState – The state of the transaction 0 – uninitialized 1 – loading 2 – loaded 3 – interactive 4 – complete status – The HTTP response code for the operation. All processing should occur when this flag is equal to 200 only. Error handling should be invoked on either 404 or 500. statusText – The text that explains the status code. responseText – The text of the response from the server. responseXML – If XML is sent back by the server, you may handle the response as a XML document using this property which returns a DOM tree of the responseText. How A XMLHttpRequest Is Created
function createAJAXObject() { var req = null; if(window.XMLHttpRequest) req = new XMLHttpRequest(); else if(window.ActiveXObject) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { req = false; } } }
return req; } Setting Up The XMLHttpRequest
var httpRequest = null; var textField = document.getElementById(“username”); var uValue = ""; function getChecksum() { httpRequest = createAJAXObject(); httpRequest.onreadystatechange = applyChanges; uValue = textField.value; httpRequest.open("GET", "/presentation/getchecksum.jsp?username=" + uValue); httpRequest.send(""); } Processing The Response
This is how you set up the method delegate for onreadystatechange: function applyChanges() { if (httpRequest.readyState == 4) { if (httpRequest.status == 200) { var responseDoc = httpRequest.responseXML.documentElement; var checksums = responseDoc.getElementsByTagName("checksum"); var chksum = checksums.item(0).firstChild.nodeValue; var message = document.getElementById("message"); var newP = document.createElement("p"); var newNode = document.createTextNode(uValue + " processed with SHA1 is: " + chksum); newP.appendChild(newNode); message.appendChild(newP); } } } A Quick Guide To Using XMLHttpRequest
Create a function that returns a XMLHttpRequest/XMLHTTP object appropriate for the browser in use. Create a function for processing the response XML from the server. Associate your XMLHttpRequest instance’s onreadystatechange delegate with your function. Ex: httpRequest.onreadystatechange = applyChanges; Use the open method to connect to the server. Use the send method to do a transaction. If POST, the parameter must be a proper POST string such as, var1=1&var2=2&var3=3 If GET, “” and null may be passed since parameters will have to be passed as part of the URL. When you need to repeat, reinitialize the XMLHttpRequest and reset its onreadystatechange delegate. Simple Ways To Use AJAX
.NET Microsoft’s Atlas Toolkit Java AjaxAnywhere AjaxTags Ruby Ruby On Rails Python TurboGears PHP Sajax HTML_AJAX (In the PEAR Repository) “Atlas” Overview
End-to-end application framework Enables building rich, interactive DHTML applications Component oriented framework Imperative and declarative programming models Integrates with ASP.NET
Extensible Application framework Custom script components, controls, behaviors Custom server controls Enables complex script-based applications Makes script development more approachable TheThe ApplicationApplication
PhotoPhoto BrowserBrowser “Atlas” Approach to Development
Application development Simple inclusion of script-based functionality via script components, server controls Separation of UI and behavior Component development Enables disciplined approach to scripting Framework for encapsulating data, and logic Abstracts browser differences Provides building blocks for higher level development Script Types and Components
Scenario: Script code can be ad-hoc, unmaintainable, etc. Solution: Encapsulate data and logic into classes Expose intuitive object model “Atlas” provides OOP constructs for script Namespaces, classes, interfaces, inheritance, etc. “Atlas” enables classes to be wired together Web.Component Describe their object model Participate in dispose mechanism Support declarative usage ImplementingImplementing ScriptScript TypesTypes
SequenceSequence ComponentComponent Communicating with the Server
Scenarios: Applications need to access data and other server-side infrastructure Solution: Expose server functionality as web services and access them using XMLHTTP “Atlas” provides key building blocks to address the scenario WebRequest abstracts XMLHTTP ServiceMethodRequest, and PageMethodRequest allow invoking WebMethods Auto-generated script proxies make it super simple DataSource allows retrieving and modifying data tables ImplementingImplementing DataData AccessAccess
PhotoListPhotoList ComponentComponent Script Controls
Scenario: Applications provide dynamic and interactive user interfaces and visualize data Solution: Build and package UI logic as components associated with HTML markup “Atlas” Control Classes that derive from Web.UI.Control Web.UI.TextBox, Web.UI.ListView Core set of controls built-in Allows defining behavior separate from UI Can manipulate DOM, handle events, participate in validation etc. ImplementingImplementing ScriptScript ControlsControls
SlideShowSlideShow ControlControl Server Controls
Scenario: Server-side applications need to be enriched with client functionality Solution: Enhance server controls to generate “Atlas”-enabled pages while preserving server programming model “Atlas” server control and components framework Built on top of ASP.NET v2.0 IScriptComponent, ScriptManager RenderScript and related methods Server-side representations of bindings, actions, behaviors, … Server-side properties, events etc. Support for postback scenarios