Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
ASNApalooza 2007 Understanding Ajax and the changes it brings Ajax dramatically changes how Web applications are presented and used by Roger Pence ASNA Education Director 1 ASNApalooza 2007 What is Ajax? • Ajax is a lightweight alternative to the traditional Web request and response • The traditional request returns a full page response—every time – Each page = one request and one response • An Ajax request returns just a small portion of a page – There may be many Ajax requests for any one page ASNApalooza 2007 A traditional Web request/response • A traditional Web request/response is heavy and monolithic • A page is requested and a page is returned • This round trip is slow, uses lots of server resources, and usually causes some screen flicker 3 ASNApalooza 2007 An Ajax request and response • An Ajax request/request is granular and thin • An Ajax request returns a precise, well focused response – Typically a small chunk of XML or HTML • An Ajax request is fast • There may be many for any one page—they often occur relative to other Ajax requests 4 ASNApalooza 2007 Think of it this way… Traditional request/response: Clumsy, clunky, large 5 Ah, now I see! ASNApalooza 2007 Without Ajax With Ajax Ajax request/response: Nimble, graceful, light Traditional request/response: Clumsy, clunky, large 6 ASNApalooza 2007 The roots of Ajax • Ajax has its roots in the MS Outlook Web client • MS created an ActiveX object that enabled clientside HTTP requests • These requests returned granular parts of the page, avoiding the traditional “full page” response • After MS cracked the nut on rich browser-based HTML interfaces (in 1999!), it quickly propagated the model to all of its other products and enabled its customers to do so as well – Not! 7 You need a fat client ASNApalooza 2007 • Microsoft didn’t do anything with this new technology – It was proprietary—being ActiveX driven it worked only with Internet Explorer – On the darker side, the MS Office fat client team lobbied, and won, that a rich browser-based interface wasn’t in MS Office’s best interest 8 Thanks Google ASNApalooza 2007 • Google, in the effort to create rich, responsive Web apps, picked up where MS left off – Google Maps, Calendar, Mail, Docs, Spreadsheet, etc • Google pretty much singlehandedly reminded that, with a little work, a nimble and responsive UI is possible with HTML (and a little help from some other technologies) • Show Google 9 ASNApalooza 2007 Enter the XMLHttpRequest • Outlook Web’s core facility was known as XMLHttp • It’s capabilities came to be very popular and were implemented in most browsers’ versions of JavaScript—implemented as the XMLHttpRequest object • Alas, guess who didn’t think the XMLHttpRequest object was necessary in JavaScript until Internet Explorer 7.0? 10 Enter Jesse James Garrett ASNApalooza 2007 • On February 18, 2005, Jesse James Garrett, a Web development pioneer, coined the name Ajax – The essay that started it call can be read here: – http://www.adaptivepath.com/ideas/essays/archives/000385.php • Ajax originally stood for Asynchronous JavaScript and XML • Name later changed because responses aren’t limited to XML 11 ASNApalooza 2007 Ajax today • Because data is returned in more formats than just XML, Ajax is no longer considered an acronym; it’s just the name of a family of technologies • Ajax isn’t a single technology–you don’t buy it. • Ajax is the synergy of CSS, HTML, JavaScript, and other acronym-driven standards to enable client-side calls to server-side methods 12 An Ajax definition ASNApalooza 2007 • Ajax incorporates – Standards-based presentation using XHTML and CSS – Dynamic display and interaction using the HTML Document Object Model – Data interchange and manipulation using XML, Javascript Object Notation (JSON), HTML, and text – Asynchronous data retrieval using XmlHttpRequest – Using JavaScript to glue it all together 13 ASNApalooza 2007 Show us the code! • We’re going to look at Ajax at a very low level to see how it does what it does • Fully understanding all of Ajax at this level requires a solid knowledge of HTML, CSS, and JavaScript. • It’s likely, though, that many of you won’t use Ajax at this level—the third-party control market, and MS, are working overtime to abstract Ajax’s low levels (more on this in a bit) 14 ASNApalooza 2007 A very simple example 15 Contents of MyFile.txt ASNApalooza 2007 • The text file MyFile.txt is used to provide a static response to XMLHttpRequest GET request 16 ASNApalooza 2007 Minimal HTML for Ajax 17 Minimal JavaScript for Ajax Something just a bit more dynamic ASNApalooza 2007 • Same code as before, except now we’re asking for a response from MyFile.aspx 19 ASNApalooza 2007 The simplest way to get data back from ASP.NET with Ajax • When we used MyFile.txt, we were using a static file to provide the HTTP response • Now, we’re expecting the output of MyFile.aspx to provide the HTTP response • MyFile.aspx is simply a typical ASP.NET Web form with a code behind, except… – Its UI will never show and is therefore empty – It uses Response.Write() and Response.End() to build its response 20 The “code behind” is very simple! All we do is use Response.Write() and Response.End() to the page’s HTTP response. Static? No. Dynamic? Not very. Promising? You bet! 21 The result… 22 ASNApalooza 2007 Getting customer info dynamically • This example passes a customer number to the HTTP request • The customer name and address are return • Data format still very simple: delimited text 23 The HTML The JavaScript: 25 GetCustomerInfo.aspx: The code-behind 26 GetCustomerInfo.aspx: The class it uses 27 Calling GetCustomerInfo.aspx directly: Calling GetCustomerInfo.aspx with Ajax Notice that the file is an HTML file! Still, it’s calling an ASPX page! 28 ASNApalooza 2007 JSON: JavaScript Object Notation 29 JavaScript to work with JSON: No parsing needed! 30 Writing JSON from ASPX 31 Sending JSON with AVR GetStructure is a static method in the JSON class that returns the JSON representation of a given populated DataTable. GetStructure() returns this JSON: 32 RESTful Web services • Put RESTful Web services on your radar— especially for hand-created Ajax work ASNApalooza 2007 – REST = Representational State Transfer • A way to transmit domain-specific data directly over HTTP without additional layers such as SOAP • Very simple to create with AVR; an ASPX page with no UI and Response.Write() and Response.End() 33 ASNApalooza 2007 Other ways to receive data • In these examples, I used a simple HTTP response, with plain text, to provide the output for the Ajax calls • You can also return XML, but beware challenging parsing issues – My first Ajax used XML and I wouldn’t do it that way again – If you’re using controls, they may dictate XML (but they’ll also probably hide parsing that XML) 34 ASNApalooza 2007 Microsoft’s Ajax • Microsoft has a free Ajax framework, with many controls, available at www.asp.net/ajax • While these are very interesting, they will be quickly be obsolete given the pending release of Visual Studio 2008 • Use them for dabbling, but go gentle into their wholesale adoption just yet 35 Using the MS ASP.NET Ajax UpdatePanel and ScriptManager The ScriptManager and the UpdatePanel are in the MS Ajax toolkit. The UpdatePanel, while adding Ajax capabilities to a page, doesn’t do so with nimbleness and grace—at least under the covers. It does, though, eliminate screen flicker and works in both IE and FF. And, drum roll please, it works without adding any code to the page— anywhere! The MS Ajax toolkit is in its infancy and will improve with age. http://www.asp.net/ajax 36 ASNApalooza 2007 Things to consider • Security • Bookmarks/back button • Requires JavaScript 37 Ajax in action The Libretto is an Ajax site, using JavaScript to call AVR SOAP Web services that return XML. It’s a code prompting tool that prepares code snippets and puts them on the clipboard to paste into your code. Check it out! http://developer.asna.com/libretto 38 Books… ASNApalooza 2007 Bulletproof Ajax by Jeremy Keith This is a very good book about Ajax. It provides simple, platform independent examples. It’s not a think, imposing book and is a good intro into the topic. 39 Books… ASNApalooza 2007 Head Rush Ajax by Bret McLaughlin This is also a very good book about Ajax. Don’t be put off by its use of PHP as its server-side provider. Where it shows PHP server-side code, plug in simple Response.Write() /Response.End() ASP.NET pages. 40 Books… ASNApalooza 2007 RESTful Web services by Leonard Richardson and Sam Ruby This is a great book that shows that you don’t always have to use a SOAP-wrapped Web service. This book teaches a simple, rational approach to Web services that is especially well-suited for ASP.NET and Ajax. 41