Transcript With Ajax Without Ajax

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