Developing Future Web Application with AJAX and ASP.NET Project "Atlas"

Size: px

Start display at page:

Download "Developing Future Web Application with AJAX and ASP.NET Project "Atlas""

Ezra Todd
6 years ago
Views:

2 Developing Future Web Application with AJAX and ASP.NET Project "Atlas" Smith Suksmith Microsoft MVP Solution Architect

3 Web Application Rich UI can t delivered by Browser Technology How about Google Earth Google Search Suggestion OWA

4 A Brief History Java Applet NS 2.0B3 JavaScript ECMAScript Flash 3 XSL-T WSDL Mozilla 1.0 FF 1.5 Beta SVG FF 1.0 E4X CSS DOM 1 XHTML SVG Flash IE 3 IFrames CSS JScript IE 4 DOM IE 5 XML XSL-T XMLHTTP IE 6 It Works! XForms RDF DOM 3 XSL-T 2 Browser Wars The Web Depression Web 2.0 Source: ebusinessapps

5 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.

6 Transformations Web 1.0 DoubleClick Ofoto Akamai Britannica Online Personal websites Domain name speculation Page views Publishing Content management systems Directories (taxonomy) Stickiness --> --> --> --> --> --> --> --> --> --> --> Web 2.0 Google AdSense Flickr BitTorrent Wikipedia Blogging Search engine optimization (SEO) Cost per click Participation Wikis Tagging ("folksonomy") Syndication Source:

7 Source:

8 What s AJAX?

9 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???

10 Classic Web Application Model (Sync)

11 AJAX Web Application Model (Async)

12 AJAX Client Model No more single Request/Response restrictions Have flexibility to go back to the server when we want

13 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

14 Async is not new

15 XMLHttpRequest: Example Asynchronously update fields

16 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

17 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 <a href="javascript:xmlget('get','notes.xml',notesresponsehandler);"> here</a> to get the contents of <code>notes.xml</code> from the server.<br /> <div class="notes" id="notessection"></div>

18 XMLHttpRequest: Handling HTTP Response Handle the response callback from the server State checking Getting response text/xml/html/customs Handling XML DOM returned 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;

19 Demo: Simple AJAX

20 ASP.NET Script Callback

21 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)

22 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

23 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

24 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.

25 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.

26 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

27 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

28 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

29 Microsoft ASP.NET Atlas

30 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

31 Atlas Architecture HTML, Script, Atlas Markup Atlas Service Proxies Atlas -enabled ASP.NET Pages Web Services (ASMX or WCF) Atlas Client Application Services Local Store Browser Integration Atlas Client Script Library Controls, Components Component Model and UI Framework Base Class Library Script Core Browser Compatibility ASP.NET Atlas Server Extensions Atlas Server Controls ASP.NET 2.0 Page Framework, Server Controls App Services Bridge Web Services Bridge Application Services Atlas Client Framework and Services Atlas Server Framework

32 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.

33 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 <script src= MyService.asmx/js /> Integrated with ASP.NET intrinsics Wire format: Javascript object notation public class Location { public Point Coordinates; public String Name; } { Coordinates : { X: 2.17, Y: }, Name : "Eiffel Tower" }

34 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

35 Demo: Atlas

36 Other features of Atlas Components, controls, and behaviors Client-side data binding Client-side validation Upcoming features Templates UI Enhancement Extensible Framework

37 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

38 Web Sites atlas.asp.net

39 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

40 Thank you

42 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.

43 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.

44 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;

45 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("");

46 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); } } }

47 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.

48 Simple Ways To Use AJAX.NET Java Ruby Microsoft s Atlas Toolkit AjaxAnywhere AjaxTags Ruby On Rails Python PHP TurboGears 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

49 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

50 The Application Photo Browser

51 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

52 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

53 Implementing Script Types Sequence Component

54 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

55 Implementing Data Access PhotoList Component

56 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.

57 Implementing Script Controls SlideShow Control

58 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

Module7: AJAX. Click, wait, and refresh user interaction. Synchronous request/response communication model. Page-driven: Workflow is based on pages

Module7: AJAX. Click, wait, and refresh user interaction. Synchronous request/response communication model. Page-driven: Workflow is based on pages INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module7: Objectives/Outline Objectives Outline Understand the role of Learn how to use in your web applications Rich User Experience