290 likes | 304 Views
Learn about AJAX, a set of technologies used together to create interactive web applications. Discover its benefits, drawbacks, browser support, and real-world examples.
E N D
AJAX Behind the buzz word Forum .NET ● January 23, 2006 Random Logic l Forum .NET l 2006
What is Ajax? - Not a technology but a methodology. - A set of technologies being used together in a particular way. Random Logic l Forum .NET l 2006
AJAX Which stands for • Asynchronous JavaScript and XML which is itself short for... • Asynchronous JavaScript • XHTML • DOM • CSS • XMLHTTPRequest Random Logic l Forum .NET l 2006
AJAX: From another view • standards-based presentation using XHTML and CSS; • dynamic display and interaction using the Document Object Model; • data interchange and manipulation using XML and XSLT; • asynchronous data retrieval using XMLHttpRequest; • and JavaScript binding everything together. Random Logic l Forum .NET l 2006
Is it new? Not really • Hidden frames • Good old JavaScript Random Logic l Forum .NET l 2006
So where did it come from? Adaptive Path>> Jesse James Garrett • Q. Why did you feel the need to give this a name? • A. I needed something shorter than “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest” to use when discussing this approach with clients. Random Logic l Forum .NET l 2006
Traditional Web Application HTML GET CSSHTML HTML POST Client Server Database Random Logic l Forum .NET l 2006
Traditional Web Application Random Logic l Forum .NET l 2006
Breaking the stop start paradigm Random Logic l Forum .NET l 2006
AJAX the new generation Random Logic l Forum .NET l 2006
AJAX Web Application • Controller spans the network • Standards based rich internet applications HTML / XHTML CSSXSLDOM XMLHTTP XML Data Client Server Database Random Logic l Forum .NET l 2006
Why is it popular? • Google helped popularize it in GMail • Increase Usability of Web Applications • Rich Internet Applications without Flash • Save Bandwidth • Download only data you need • Faster interfaces (sometimes) • Solves User Frustration Random Logic l Forum .NET l 2006
Why is it bad? • Breaks back button support • URL's don't change as state changes • Cross Browser Issues can be a pain • Using Ajax for the sake of Ajax • Can't access domains other than the calling domain • May be disabled (for security reasons) or not available on some browsers • Debugging Random Logic l Forum .NET l 2006
Browser support • Browsers that support Ajax • Apple Safari 1.2 and above • Konqueror • Microsoft Internet Explorer 4.0 and above • Mozilla Firefox 1.0 and above • Netscape 7.1 and above • Opera 7.6 and above Random Logic l Forum .NET l 2006
AJAX in the real world Random Logic l Forum .NET l 2006
Examples of AJAX • GMail • Google Maps • Google Suggest • NetVibes Random Logic l Forum .NET l 2006
XMLHttpRequest • A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript • Make an HTTP request from a JavaScript event • A call back JavaScript function is invoked at each state of the HTTP request and response • Native XMLHttpRequest support should be in IE7 Random Logic l Forum .NET l 2006
XMLHttpRequest Properties • onreadystatechange - call back function for state changes • readyState - the current state of the HTTP call • responseText - the text result of the request • responseXML - DOM xml object from the request • status - HTTP status code of the response • statusText - HTTP status text Random Logic l Forum .NET l 2006
A simple exampleXML file Random Logic l Forum .NET l 2006
Ajax.NET – How it works • Add reference ajax.dll to your project • Modify your web.config to configure IHttpHandler for Ajax.NET requests • Write your methods in C#/VB.NET and add the attribute [AjaxMethod] • Call Class1.Method1(param1, param2, callback, context); from client-side JavaScript Random Logic l Forum .NET l 2006
Demo AJAX.NET Random Logic l Forum .NET l 2006
Ajax.NET – Key Benefits • Methods only get attribute, no need to implement interface or inherit from class[AjaxMethod]public int GetAge(string username){…} • Source-code doesn‘t change if you want to use the method in server-side codeDemoMethods dm = new DemoMethods();int age = dm.GetAge(“michael“); Random Logic l Forum .NET l 2006
Ajax.NET – Key Benefits • Client-side JavaScript will get “real“ objects from Ajax.NET calls using JSON<script type=“text/javascript“>function test_callback(res) { alert(res.value.FirstName + ‘ ‘ + res.value.FamilyName); }</script> • DataSet, DataTable, DataRow, ArrayList, Array, DateTime, TimeSpan, … • Create your own IAjaxObjectConverters Random Logic l Forum .NET l 2006
Ajax.NET – Key Benefits • Cache requests (CacheDurationTimeSpan) • Access SessionState objects using HttpContext.Current.Session[…] • Unicode support without use of XML parser • Use Ajax.NET to retreive “events“ instead of polling Random Logic l Forum .NET l 2006
Conclusion • AJAX enable more interactive, more responsive, and smarter Web applications. • AJAX is not tied to a particular programming language. • Remember AJAX has its cons use it wisely. Random Logic l Forum .NET l 2006
Questions? Random Logic l Forum .NET l 2006
Thank You Random Logic l Forum .NET l 2006