ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

by Roger PenceASNA Education Director

Understanding Ajax and the Understanding Ajax and the changes it bringschanges it brings

Ajax dramatically changes how Web applications are presented and used

1

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

What is Ajax?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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

A traditional Web request/responseA 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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

An Ajax request and responseAn 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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Think of it this way…Think of it this way…

5

Traditional request/response:Clumsy, clunky, large

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Ah, now I see!Ah, now I see!

6

Traditional request/response:Clumsy, clunky, large

Ajax request/response:Nimble, graceful, light

With AjaxWithout Ajax

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

The roots of AjaxThe roots of Ajax

• Ajax has its roots in the MS Outlook Web client• MS created an ActiveX object that enabled client-

side 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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

You need a fat clientYou need a fat client

• 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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Thanks GoogleThanks Google

• 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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Enter the XMLHttpRequestEnter 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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Enter Jesse James GarrettEnter Jesse James Garrett

• 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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Ajax todayAjax 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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

An Ajax definitionAn Ajax definition

• 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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Show us the code!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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

A very simple exampleA very simple example

15

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Contents of MyFile.txtContents of MyFile.txt

• The text file MyFile.txt is used to provide a static response to XMLHttpRequest GET request

16

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Minimal HTML for Ajax Minimal HTML for Ajax

17

Minimal JavaScript for AjaxMinimal JavaScript for Ajax

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Something just a bit more dynamicSomething just a bit more dynamic

• Same code as before, except now we’re asking for a response from MyFile.aspx

19

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

The simplest way to get data back The simplest way to get data back from ASP.NET with Ajaxfrom 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

21

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!

22

The result…

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Getting customer info dynamicallyGetting 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

25

The JavaScript:

26

GetCustomerInfo.aspx: The code-behind

27

GetCustomerInfo.aspx: The class it uses

28

Calling GetCustomerInfo.aspx directly:

Calling GetCustomerInfo.aspx with Ajax

Notice that the file is an HTML file! Still, it’s calling an ASPX page!

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

JSON: JavaScript Object NotationJSON: JavaScript Object Notation

29

30

JavaScript to work with JSON: No parsing needed!

31

Writing JSON from ASPX

32

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:

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

RESTful Web servicesRESTful Web services

• Put RESTful Web services on your radar—especially for hand-created Ajax work– 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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Other ways to receive dataOther 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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Microsoft’s AjaxMicrosoft’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

36

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

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Things to considerThings to consider

• Security• Bookmarks/back button• Requires JavaScript

37

38

http://developer.asna.com/libretto

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!

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Books…Books…

Bulletproof Ajaxby Jeremy Keith

39

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.

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Books…Books…

Head Rush Ajax by Bret McLaughlin

40

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.

ASN

Apalo

oza

20

07

ASN

Apalo

oza

20

07

Books…Books…

RESTful Web services by Leonard Richardson and Sam Ruby

41

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.