random logic l forum.net l 20061 ajax behind the buzz word forum.net ● january 23, 2006

Random Logic l Forum .NET l 2006 1

AJAX

Behind the buzz word

Forum .NET ● January 23, 2006


What is Ajax?

- Not a technology but a methodology.

- A set of technologies being used together in a particular way.


AJAX

Which stands for Asynchronous JavaScript and XML which is itself short for... Asynchronous JavaScript XHTML DOM CSS XMLHTTPRequest


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.


Is it new?

Not really

- Hidden frames- Good old JavaScript


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.


Traditional Web Application

Client

CSSHTML

HTML GET

HTML POST

DatabaseServer


Traditional Web Application


Breaking the stop start paradigm


AJAX the new generation


AJAX Web Application

Client

HTML / XHTML

XML Data

CSSXSLDOM

XMLHTTP

DatabaseServer

Controller spans the network Standards based rich internet

applications


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


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


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


AJAX in the real world


Examples of AJAX

GMail Google Maps Google Suggest NetVibes


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


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


A simple example

XML file


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


Demo AJAX.NET


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“);



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



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


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.


Questions?


TThank Youhank You

random logic l forum.net l 20061 ajax behind the buzz word forum.net ● january 23, 2006

Documents