A1AX

Chapter 1
Welcome to the History and Revival oI AJAX course. We will be talking about the history oI AJAX and how it has enjoyed a
revival oI popularity. AJAX or Asynchronous JavaScript with XML is a technology Ior adding dynamism and
interactivity to Web pages. The history oI AJAX is really more oI an analysis oI Web development as a whole. Since this
development has moved so rapidly, and has had such surprising twists and turns along the way, it is appropriate to look at it in
terms oI decades rather than in individual years. Browser developments, oI course, have played a key role, as have the shiIts
Irom static Web pages to dynamic Web pages AJAX has played a key role in that, oI course.

The 1970s saw the beginnings oI network-based technology with the creation oI the ARPAnet, the Iorerunner to the internet.
The Iirst Iew nodes oI the ARPAnet were linked on the West Coast oI the United States, as shown here. J.C.R. Licklider leIt
the ARPANet beIore the implementation oI his concepts, but his 1962 series oI memos would pave the way Ior the Internet that
you and I use today. Bill Gates and Paul Allen developed BASIC Ior the MITS Altair 8800 around 1975, leading to the
creation oI MicrosoIt. The Iirst USENet discussion groups were started in 1979. The term "Internet" was born in 1991 with the
release oI World Wide Web soItware and the liIting oI commercial restrictions on the Internet. These two actions paved the
way Ior corporate networking opportunities. CompuServe brought e-mail to the masses beIore its purchase by AOL in 1997.

The National Center Ior Supercomputing Applications (NCSA) released Mozilla, the Iirst graphics-based browser Ior the Web,
in 1993. A Windows-based version oI AOL brought the general public to a Web previously dominated by scientists, hobbyists,
and "nerds" all using text-based applications. Mozilla's support oI inline images brought an entirely new dimension to the Web.
Most Internet or Web historians would point to 1993 as the year that the Web exploded onto everyone's consciousness. The
Iirst version oI the Netscape browser was released in 1994, and quickly became the Web-browsing tool oI choice Ior many.
The Netscape browser supported multiple TCP/IP connections and client-side "cookies" (small pieces oI customization and
personalization inIormation), unlike Mozilla. The general public accepted having to purchase Netscape to receive these
Ieatures; students, teachers and various targeted organizations could receive it Ior Iree. Later versions would introduce Irames,
JavaScript and mouseovers.

MicrosoIt released Internet Explorer versions 1 and 2 in 1995. These versions were very Ieature-shy compared to Netscape, but
that would soon change. Sun released Java and MicrosoIt released Active Server Pages technology in 1996, leading a Ilood oI
server-side Web development tools. MicrosoIt released Internet Explorer version 3, which included support Ior Cascading
Style Sheets (CSS). Dynamic HTML, or DHTML, was a key Ieature in allowing a Web page to redraw, or "repaint" itselI upon
modiIication. Netscape and MicrosoIt pushed diIIerent means oI extending JavaScript. MicrosoIt's ability to use the Document
Object Model to redraw Web pages, along with its ability to continue to give away its Web browser Ior Iree, was key in
reversing Netscape's once-Iormidable Web browser market share. MicrosoIt released Outlook Ior Web Applications (OWA),
an extremely popular AJAX application in 1998. Ii is estimated that over 80 million people use OWA. MicrosoIt released IE 5
in 1999, solidiIying its dominance over Netscape Navigator. IE 5 was the Iirst browser to support a good chunk oI theW3C's
Document Object Model standard, and its Cascading Style Sheet (CSS) support exceeded anything Netscape had produced up
to that point. The XMLHttpRequest object, the ultimate heart oI AJAX, was introduced in IE v5, but since it was not picked up
by other browsers Ior several years, it would lay dormant and unused.

Internet spending reached then-all-time highs in 2000 everyone had to be on the Internet, and there was the Y2K scare to
deal with. All oI this spending leIt an almost inevitable crash in tech spending in 2001. Investment capital ceased to Ilow, and
the developer realm was racked by waves oI downsizings. Internet Explorer had become Iirmly entrenched as the browser oI
choice, so there was little reason to stretch the limits oI browser capabilities. IE version 6 was released in 2001, adding a Iew
DHTML improvements and improved support Ior DOM and CSS speciIications.

lash, JavaScript and IIrame (internal Irame) applications received the Iocus oI developers' attention in 2002 through 2004, as
dynamic HTML took a back seat. MicrosoIt Iocused on releasing ASP.NET, bringing Windows application developers to the
world oI Internet technology by allowing them to leverage their Iamiliar control-and-component-based architecture. Google
released their e-mail service Google Mail, or Gmail which brought to the world a large-scale realization oI AJAX
concepts. lickr, which started out as a Web-based role playing game beIore evolving into a photo tagging and social content
classiIication tool, was also released at this time. Google Suggest really made the Web sit up and take notice as to the
possibilities oI AJAX, by using autocompletion and cached search results to rapidly search an indexed database and oIIer
suggestions based upon the values you type and it's Iast enough to keep up with most people on a character-by-character
basis. Google Maps Iurthered the use oI AJAX by allowing a user to drag a map around within a browser, and zoom in and out
Ior alternative detail. Requests Ior areas outside the current browser's display cause AJAX to Iire oII a request to the server to
get the new map graphics and push them back to the Web page. This concludes the history and revival oI AJAX course. You
have learned about the history oI AJAX and it revival oI popularity.

Chapter 2
Welcome to the Introducing JavaScript course, you will be learning about JavaScript Ieatures and Iunctionality during this
course. JavaScript is a key component oI AJAX - it provides the client-side programming platIorm on which AJAX has come
to depend. JavaScript has very little in common with Java it was developed at Netscape and was originally called LiveScript.
Some developers have avoided it, thinking that one would have to learn Java in order to learn JavaScript, but its syntax is
actually rather closer to C#. Most oI the problems that developers have associated with JavaScript have turned out to be
Cascading Style Sheet (CSS) or Document Object Model (DOM) element issues, and not actually JavaScript issues.

Since JavaScript is at the heart oI AJAX, it is important to know how to bring JavaScript code into our HTML pages. We do
this through the script~ tag, as shown here. Note that we use both the type and language attributes to speciIy that we are
creating a JavaScript code. It is imperative that you keep your scripting within your tags; otherwise, you can run into strange
and hard-to-debug errors, such as your page working up to a certain point and then Iailing because you coded outside oI the
tags.

A popular coding technique among MicrosoIt Web and C# programmers is a "code-behind" Iile a Iile oI code that executes
tasks behind the scenes, separating content (the code) Irom presentation (the HTML) and allowing each group oI developers to
concentrate on appropriate strengths. We can apply those same concepts here by adding the src (Ior "source") attribute to the
script tag and speciIying the location oI the JavaScript Iile there.

JavaScript can execute script at established points in time: during a document load, aIter a document load, or when called by
other JavaScript statements. JavaScript statements in the body oI your Web page are executed as the page is rendered in the
Web browser. You may write your own JavaScript Iunctions, or implement existing JavaScript Iunctions, within the Web
page's onLoad Iunction. The onLoad Iunction is automatically called aIter the page has completed its load cycle.

JavaScript is a weakly-typed language, so variables are very Ilexible. JavaScript variables are open-ended objects and have Iew
requirements Ior their instantiation. It is a good practice to initialize variables at their Iirst declaration, but it is not required.
You may initialize variables by assignment aIter they have been declared. Boolean variables are assigned Iamiliar true and
Ialse values.

JavaScript overloads the plus operator to act slightly diIIerently Ior strings and Ior numbers. When the operator is between
strings, it acts to concatenate, or glue, strings together. As shown here, the value in the variable "Iullname" will be the string
"John Doe," with an appropriate space between the Iirst name and last name. Note that the space between the names must be
explicitly requested. II we put the plus sign between two numbers, we get Iamiliar addition.

JavaScript has rather simple visibility (or "scoping") rules Ior its variables. We will teach you how to deIine a JavaScript
Iunction shortly. All variables that are deIined within a Iunction are considered to be local to that Iunction, and will only be
visible to other variables and Iunctions that are within the scope oI that Iunction. All variables that are deIined outside oI a
Iunction are considered "global" variables and are accessible to all JavaScript Iunctions deIined within the current Web page

JavaScript supports the standard iI / then / else conditional statement oI most structured languages. The "iI" keyword is
Iollowed by a parenthesized Boolean condition (such as x ~ 10). II that condition is evaluated to true, then a set oI statements in
curly braces is executed. (The "then" keyword is implied.) II that condition is evaluated to Ialse, the else keyword introduces a
second set oI statements in curly braces, which is then executed. Note that the "else" keyword is explicit, although the "then"
keyword is implicit. The "ternary" statement is like a one-line iI / then / else statement. The parenthesized Boolean condition
remains, but instead oI being preceded by an "iI" keyword, it is simply Iollowed by a question mark. II the parenthesized
Boolean condition evaluates to true, the statement (usually single statement; iI there are multiple statements, they must be
separated by semicolons and enclosed by parentheses) Iollowing the question mark is executed. II the parenthesized Boolean
condition evaluates to Ialse, the statement Iollowing the colon is executed.

JavaScript supports the standard looping and iterative constructs Iamiliar to structured programmers the while loop, the do
loop, and the Ior loop.

A while loop will execute the bracketed statements only while the conditional expression (in parentheses) is true. It is possible
Ior the while loop to be not executed at all; thereIore, iI the conditional statement starts out as Ialse.

A JavaScript do while loop evaluates the conditional expression aIter the code block, so the code block is guaranteed to run at
least once. The do loop shown here displays alert boxes with the values Irom 1 to 10.

The structure oI the Ior loop is a bit diIIerent Irom that oI the other iteration loops, but it uses the same methodology. We
initialize a section oI code and execute a set oI statements repeatedly until a speciIied condition is met. The Ior loop initializes
the variable I to 1. It then checks to see whether the value oI that variable is less than or equal to max. II it is less than or equal
to max, the statements in braces are executed. Once the statements in braces are executed, the value oI I is incremented, and
then we test again to see iI the value oI I is less than or equal to max. We continue in that loop oI testing, executing and
incrementing until the value oI I exceeds that oI max, at which time the Ior loop terminates and execution continues with the
next available statement.

A switch statement allows JavaScript to perIorm conditional (multiple-way) branching or decision-making across multiple
alternatives. Here, we have set a variable called "counter" equal to three. The switch statement evaluates the variable "counter"
and compares it to each oI the values in the "case" labels. Since it does not match any oI the explicit labeled values, execution
starts at the "deIault" label and continues until the "break;" statement is encountered, at which time the switch statement
terminates and execution continues aIter the switch statement (in this case, at the alert statement).

A JavaScript Iunction is the workhorse oI the scripting language. It is where you will place a majority oI your client-side
Iunctionality. unctions are, at their core, JavaScript objects. They are declared using the Iunction keyword, and their code
goes inside curly braces. They are made up oI multiple JavaScript statements, separated by semicolons. You may pass a
comma-separated list oI parameters. You may use the return keyword to return a value. You do not need to declare the return
value in the Iunction's header.

Arrays provide a Ilexible means oI storing and passing ordered data between the client and the server. Since JavaScript is a
"weakly-typed" language, elements oI an array may be oI diIIerent data types.

You will use a single variable to store your array, but you should realize that an array is just a deIined set oI objects. You
create, or "instantiate," an array using the new keyword. Note that you don't have to provide an explicit size Ior the array in
JavaScript; you may declare an "empty" array and then add elements to it later, as shown here.

JavaScript supports a series oI pre-deIined "objects" reusable data structures with properties (attributes) and Iunctions
(behaviors that use or act upon those attributes).

II you deIine your own object in JavaScript, you will Irequently want to create multiple instances oI that object, and have
control over how instances oI that object get initialized. One accomplishes this through a constructor method; a method with
the same name as that oI your user-deIined object. The constructor method will assign values to properties oI the object. The
special keyword "this" may be used within the constructor method to reIer to the object itselI.

The best way to see how all this works is with an example. We have emboldened the constructor Iunction Ior the person object.
When we instantiate a person object with the new keyword, the JavaScript interpreter automatically invokes the constructor to
initialize the properties oI the object.

Properties may be added in the constructor, as we have seen, or dynamically aIter instantiation. Rest assured that properties
added dynamically aIter instantiation apply to all instances oI the object, not just to the one speciIically associated with the
addition.

You may declare JavaScript Iunctions and associate them with an object in much the same way that you would declare
properties: either through the constructor or dynamically aIter instantiation. The usual method is to add methods in the
constructor, as shown here.

We do not recommend dynamically adding Iunctions to objects aIter instantiation, because the Iunction only applies to the
deIined object, not to other objects oI the same type (unlike properties). There may be times when you want to dynamically add
Iunctions, so we show the syntax here.

JavaScript supports structured error handling using the "try" block. II you place code that could generate errors inside a "try"
block (a set oI curly braces preceded by the keyword "try"), and that code encounters an error, then execution will immediately
jump into the "catch" block (a set oI curly braces preceded by the keyword "catch"). The keyword "error" indicates that an
error object is passed into the catch block. or example, the numerical value oI the error code is indicated by error value within
the catch block. The "catch" block is skipped, oI course, iI no error is encountered. The "Iinally" block (set oI curly braces
preceded by the keyword "Iinally") is optional, but iI used, code within it is guaranteed to be executed. This concludes the
Introducing JavaScript course. You've learn about JavaScript Ieatures and Iunctionality during this course.

Chapter 3
The XMLHttpRequest object has a responseXML property, which may be parsed and manipulated to work with XML content
returned in the XMLHttpRequest object.

The readyState property speciIies the current state oI the XMLHTTP request (sending, processing, Iinished, et cetera). The
onReadyStateChange property identiIies the appropriate event handler Ior use when the readyState property changes. The
response to the request may come back in an XML Iormat, in which case we would look at the XMLHttpRequest object's
responseXML property

JavaScript Object Notation, or JSON, is a technology that can be used as an alternative to XML Ior client-side scripting. In
many cases, JSON can actually be Iaster and more eIIicient than XML Ior client-side scripting.

JSON descriptors consist oI the Iollowing general elements: a) Objects, which are enclosed in curly braces; b) Object members,
which are colon-separated name-value pairs. Multiple object members are separated by a comma. c) Arrays, which begin and
end with square brackets, and whose constituent elements are separated by commas; d) Double-quoted strings; e) Values,
which could be strings, numbers, objects, arrays, or literal values (true, Ialse, null).

There are some things that you will want to keep in mind when you are comparing or converting XML to JSON:
a) You will want to have at least one top-level object that will represent the response -- something easy to remember, like
Results. b) Nested, complex XML elements become nested JSON objects. c) XML attributes will convert to JSON name-value
pairs. d) Simple XML elements will become JSON name-value pairs. e) Repeated XML elements, such as "computer" Irom our
data example, will become JSON arrays.

Here is a simple XML Iile, describing a data layout Ior a hypothetical set oI results. This set oI results returns two computers --
each consisting oI a manuIacturer, a model and a price.

Here is the same inIormation, reIormatted into JSON

Chapter 4
Modern business applications generally separate their activities into a minimum oI three layers, or "tiers" inIormation
gathering and presentation; inIormation processing and corporate logic; and data retrieval. AJAX's Ilexibility gives it the
capacity to blur, or even destroy, the separation between the inIormation processing and corporate logic layer more
commonly known as the "business layer" and the data retrieval layer oIten shortened to just the "data layer." AJAX is a
powerIul tool, but as with any powerIul tool, it is best used with discipline in restrained situations. This course will describe the
layers, or tiers, oI a multi-tiered business application - usually reIerred to as an "N-tiered" application and discuss how
AJAX Iits into those tiers.

A tiered application is one in which inIormation Ilows through well-deIined layers, or "tiers." Usually, there is a minimum oI
three tiers: a "presentation" layer which handles the user interIace, a "business" layer which handles business rules and
corporate logic, and a "data" layer which handles data retrieval and manipulation. Security is a necessary part oI modern
business applications, so security Iunctions may be Iound as a part oI the three layers mentioned, or may be in a separate layer.
We use the term "N-tier" to indicate that there might be more than three tiers.

Here is a graphical representation oI the layers, or tiers, oI an N-tiered application. The presentation layer oIten known as
the application layer is charged with data gathering and presentation. Most modern applications handle the application layer
through a Web interIace, although some older applications use a desktop interIace. InIormation that is gathered at the
application / presentation layer then Ilows to the business layer, where the inIormation is processed according to the "business
logic" (corporate rules / requirements) necessary Ior operation oI the organization. Those rules, in turn, require communication
with a set oI Iunctions known as the "data layer." The data layer manages communications with external data storage, and
provides data to the business layer as needed. In most modern applications, the code Ior the diIIerent layers runs on physically
separate machines; the physical data store is also on a separate machine.

Where does AJAX Iit in the overall scheme oI things? How can we incorporate something as dynamic as AJAX into something
as structured as HTML? We know that our user interIace will be communicating via XMLHttpRequest coding. Our AJAX
library will provide with an interIace appropriate Ior such communications, so we can plug the combination into a revised
version oI our previous N-tiered structure. We must make a conscious decision, when using AJAX in an N-tiered design, to
make it adhere to the same constraints that would apply to other layers oI coding. As a result, the AJAX library must bear the
burden oI communicating with the business layer Ior all oI its dynamic interIace requests.

One oI the Iirst steps to take when designing an application is to establish a name space that makes sense Ior that particular
solution. The name space might include the company name, corporate division, or the application name itselI. The simulation
demonstrates the startup page and presentation layer oI an N-tier business application. Behind the scenes, the Utility class
stores a set oI site-wide constants, such as web page URLs, in the Utility.Constants class. The Utility.ProcessControl class
stores a set oI behaviors that allow us to conveniently perIorm tasks such as obtaining a home page URL, a search page URL
and a destination page URL. Methods in that class also allow you to generate a clickable URL with the ability to pass
parameters. The presentation layer centers on the acquisition and display oI store inIormation. The client page makes a minimal
set oI calls into the business tier, discussed shortly, keeping application-level coding to a minimum.

The business tier Ior this application Ieatures classes that encapsulate application data and methods that operate on that data.
The basic Store class holds inIormation that is relevant to store data, as well as methods to Iill the class or return inIormation
that is associated with a particular store object. The basic Store class also contains a GetStoreNames method that returns a
StoreCollection object a collection oI stores matching a particular search criterion that gets Iilled in a data layer call,
GetStoreNames. It is a good idea to make your object's data access calls static this ensures that you have a consistent
method oI calling various retrieval processes. Our application will probably need to work against more than one store, so the
application uses a StoreCollection class to hold a custom collection oI Store objects.

Chapter 5
Traditional Internet applications Iollowed an established client / server design pattern. A request was made to the
server where all oI the page-processing logic took place. The resulting data was passed back to the browser, where it
was rendered and displayed to the user. OI course, you will recognize this as little more than a generic request /
response model. UnIortunately, this particular model Iorces all oI the workload onto the server. Very little
processing occurs on the client. A true Rich Internet Application (RIA), on the other hand, expands upon the request
/ response model and seeks to put some oI the processing responsibilities on the browser.

Rich Internet applications should, at a minimum, support the Iollowing: a. The application should run Irom a Web
browser -- and in this day and age, it should oIIer cross-browser support; b. The application needs to be capable oI
client-side logic processing. This contributes to scalability oI client-side resources. c. The application should need
little or no installation, other than third party add-ons such as Java or lash. d. The application should preserve your
browser's navigational logic, such as the "orward" and "Back" buttons.

A well-designed browser-based application takes time and eIIort to integrate support Ior all major browsers. Avoid
designing applications that support only Internet Explorer. One should not presume the type oI Web platIorm that a
client will be using to visit one's Web site. ireIox, Ior example, accounts Ior 10 percent oI total browser usage all
by itselI, and other browsers, such as Opera and SaIari, combine to account Ior a signiIicant percentage oI browser
usage. One should not begin by designing one's application and intentionally isolating as much as one-IiIth oI one's
potential users Irom the start. It does require extra eIIort on the developer's part to implement cross-browser support.
You will encounter a Iew browser inconsistencies at various times throughout this series oI courses, but ultimately,
you will discover that many oI your issues have been encountered and resolved by others.

One oI the beneIits oI AJAX technology is that it allows us to move some oI the processing logic onto the client's
computer, giving the client's computer the opportunity to help carry the load. Removing some oI the strain Irom the
server can dramatically improve the scalability oI your site. However, it is possible to overdo things pushing
everything onto the client and trying to do everything in JavaScript will cause the site to load very slowly, leading to
Irustrated users.

Consistent, rich Internet applications take advantage oI pre-existing soItware, such as the browser. Whether Internet
Explorer, ireIox, or any other web browser, your application should be generic enough to run on a majority oI
them. II you have to install a desktop application to access data, your application cannot be classiIied as a rich
Internet application, or RIA.

Here is an example oI an Internet application that requires installation oI a desktop client Google Earth.

One oI the issues that you will eventually run into when working with AJAX technology is that is quite easy to
"break" the BACK button on the browser. JavaScript and the Back button do not work well together. Some
developers try to provide an easy path back to previous pages on their own site, but it is something that you will
want to monitor with testing and quality assurance veriIication.

BeIore you use AJAX to totally redesign your site, we should discuss some tips, techniques and yes, even some
mistakes that you should keep in mind as you are designing pages. This is not meant to be a discussion oI best
practices and patterns, but rather an examination oI common concepts that pop up across the Web.

Use AJAX controls where they are simple, obvious and make sense to the user. When you choose to implement
dynamic content on the site, it is imperative that the interactive portion oI the site be obvious and easy to use. One
should never go to a site and have one's Iirst thought be "What do I do here?" Nothing will turn an anonymous user
away Irom a site Iaster than conIusion. When you use an AJAX control that is primarily responsible Ior the direct
modiIication oI other content on the same page, put the AJAX control close to the content that it will modiIy, so that
the user is assured oI immediate Ieedback to the interactive process. You should also provide visual cues to the user,
such as changing a list oI entries, so that the user does not have to hunt around on the page to see iI an action were
accepted. Sometimes, an obvious page postback is not available Ior a web user to pick up on. As a result you will
want some way to indicate that something is going on.
AJAX allows a web page to be dynamically updated and reIreshed with new content, which is a good thing.
However, shiIting around current page content to accommodate timed events, or data that is returned Irom an
asynchronous call, can be very disruptive to users. Consider alternative means oI notiIying users oI new or updated
content, such as modiIying the background color oI the new content, then gradually Iading the color back to the
original background. This technique is sometimes called the "Yellow ade" technique, because the new content
starts out with a yellow background beIore Iading back to the original background color.

HalI the battle oI good site design involves encouraging the user to move Irom the home page deeper into the Web
site. Simple hyperlinks and navigational tabs are oIten generic, boring and unexciting. One essential tool to motivate
users is a JavaScript hover or tooltip. Positioning the mouse over the link can provide a detailed description oI what
lies beyond the link, thereby encouraging the user to explore Iurther.

Another Ieature oI good design involves avoiding minor page transIers when the Iunctionality that you want Ior
example, checking Ior the available oI a username on a Web site -- is somewhat trivial. Rather than Iilling out an
entire registration Iorm only to have it be rejected because a username is unavailable, a more thoughtIul design
would involve simply entering a desired username and clicking on an "availability" button. The page would then use
AJAX to call back to the server and look up the proposed name on the server. II the name is available, then the
registration could proceed. This cuts down on server bandwidth, as it makes Iar more sense to Iind out iI the
username "jsmith" is available beIore submitting a Iull registration Iorm rather than Iilling out the Iull registration
Iorm only to Iind that the name is unavailable.

AJAX makes it very easy to dynamically bring content to the browser. II you were to visit a community site where
you have sought out and Iound a particular piece oI content, such as a Web log post, that was displayed with AJAX
technology, the URL Ior the parent page will not reIlect the dynamic content included within. This lack oI proper
method oI URL reIerral will become Irustrating iI you wish to 'bookmark' or note a particular piece oI online content
oI Iuture reIerence. There really is no way around this this is an unIortunate drawback oI AJAX's dynamic
recreation oI content, and will be a permanent drawback to implementing AJAX Ior large volumes oI searchable
content.

Chapter 6
Welcome to the Rich Internet Applications course. We will talk about Rich Internet Applications and how they
diIIer Irom traditional Internet Applications during this course.

Traditional Internet applications Iollowed an established client / server design pattern. A request was made to the
server where all oI the page-processing logic took place. The resulting data was passed back to the browser, where it
was rendered and displayed to the user. OI course, you will recognize this as little more than a generic request /
response model. UnIortunately, this particular model Iorces all oI the workload onto the server. Very little
processing occurs on the client. A true Rich Internet Application (RIA), on the other hand, expands upon the request
/ response model and seeks to put some oI the processing responsibilities on the browser.

Rich Internet applications should, at a minimum, support the Iollowing: a. The application should run Irom a Web
browser -- and in this day and age, it should oIIer cross-browser support; b. The application needs to be capable oI
client-side logic processing. This contributes to scalability oI client-side resources. c. The application should need
little or no installation, other than third party add-ons such as Java or lash. d. The application should preserve your
browser's navigational logic, such as the "orward" and "Back" buttons.

A well-designed browser-based application takes time and eIIort to integrate support Ior all major browsers. Avoid
designing applications that support only Internet Explorer. One should not presume the type oI Web platIorm that a
client will be using to visit one's Web site. ireIox, Ior example, accounts Ior 10 percent oI total browser usage all
by itselI, and other browsers, such as Opera and SaIari, combine to account Ior a signiIicant percentage oI browser
usage. One should not begin by designing one's application and intentionally isolating as much as one-IiIth oI one's
potential users Irom the start. It does require extra eIIort on the developer's part to implement cross-browser support.
You will encounter a Iew browser inconsistencies at various times throughout this series oI courses, but ultimately,
you will discover that many oI your issues have been encountered and resolved by others.

One oI the beneIits oI AJAX technology is that it allows us to move some oI the processing logic onto the client's
computer, giving the client's computer the opportunity to help carry the load. Removing some oI the strain Irom the
server can dramatically improve the scalability oI your site. However, it is possible to overdo things pushing
everything onto the client and trying to do everything in JavaScript will cause the site to load very slowly, leading to
Irustrated users.

Consistent, rich Internet applications take advantage oI pre-existing soItware, such as the browser. Whether Internet
Explorer, ireIox, or any other web browser, your application should be generic enough to run on a majority oI
them. II you have to install a desktop application to access data, your application cannot be classiIied as a rich
Internet application, or RIA.

Here is an example oI an Internet application that requires installation oI a desktop client Google Earth.

One oI the issues that you will eventually run into when working with AJAX technology is that is quite easy to
"break" the BACK button on the browser. JavaScript and the Back button do not work well together. Some
developers try to provide an easy path back to previous pages on their own site, but it is something that you will
want to monitor with testing and quality assurance veriIication.

BeIore you use AJAX to totally redesign your site, we should discuss some tips, techniques and yes, even some
mistakes that you should keep in mind as you are designing pages. This is not meant to be a discussion oI best
practices and patterns, but rather an examination oI common concepts that pop up across the Web.

Use AJAX controls where they are simple, obvious and make sense to the user. When you choose to implement
dynamic content on the site, it is imperative that the interactive portion oI the site be obvious and easy to use. One
should never go to a site and have one's Iirst thought be "What do I do here?" Nothing will turn an anonymous user
away Irom a site Iaster than conIusion. When you use an AJAX control that is primarily responsible Ior the direct
modiIication oI other content on the same page, put the AJAX control close to the content that it will modiIy, so that
the user is assured oI immediate Ieedback to the interactive process. You should also provide visual cues to the user,
such as changing a list oI entries, so that the user does not have to hunt around on the page to see iI an action were
accepted. Sometimes, an obvious page postback is not available Ior a web user to pick up on. As a result you will
want some way to indicate that something is going on.

AJAX allows a web page to be dynamically updated and reIreshed with new content, which is a good thing.
However, shiIting around current page content to accommodate timed events, or data that is returned Irom an
asynchronous call, can be very disruptive to users. Consider alternative means oI notiIying users oI new or updated
content, such as modiIying the background color oI the new content, then gradually Iading the color back to the
original background. This technique is sometimes called the "Yellow ade" technique, because the new content
starts out with a yellow background beIore Iading back to the original background color.

HalI the battle oI good site design involves encouraging the user to move Irom the home page deeper into the Web
site. Simple hyperlinks and navigational tabs are oIten generic, boring and unexciting. One essential tool to motivate
users is a JavaScript hover or tooltip. Positioning the mouse over the link can provide a detailed description oI what
lies beyond the link, thereby encouraging the user to explore Iurther.

Another Ieature oI good design involves avoiding minor page transIers when the Iunctionality that you want Ior
example, checking Ior the available oI a username on a Web site -- is somewhat trivial. Rather than Iilling out an
entire registration Iorm only to have it be rejected because a username is unavailable, a more thoughtIul design
would involve simply entering a desired username and clicking on an "availability" button. The page would then use
AJAX to call back to the server and look up the proposed name on the server. II the name is available, then the
registration could proceed. This cuts down on server bandwidth, as it makes Iar more sense to Iind out iI the
username "jsmith" is available beIore submitting a Iull registration Iorm rather than Iilling out the Iull registration
Iorm only to Iind that the name is unavailable.

AJAX makes it very easy to dynamically bring content to the browser. II you were to visit a community site where
you have sought out and Iound a particular piece oI content, such as a Web log post, that was displayed with AJAX
technology, the URL Ior the parent page will not reIlect the dynamic content included within. This lack oI proper
method oI URL reIerral will become Irustrating iI you wish to 'bookmark' or note a particular piece oI online content
oI Iuture reIerence. There really is no way around this this is an unIortunate drawback oI AJAX's dynamic
recreation oI content, and will be a permanent drawback to implementing AJAX Ior large volumes oI searchable
content.

Chapter 7

AJAX Irameworks provide a multitude oI libraries and code snippets to keep you Irom having to rewrite the same
JavaScript code over and over again. rameworks allow you to wrap JavaScript and server-side code into
redistributable libraries, some oI them .NET based and some oI them non-.NET based. Ultimately, they all
accomplish the same thing: have the browser Ietch data without postback. This course will survey some oI the more
popular Irameworks on the market.

Although many oI you may be taking this course with an eye to developing your Web applications using MicrosoIt
Internet Explorer, we would be remiss iI we did not discuss AJAX development platIorms that did not rely on .NET
or were not cross-platIorm. We will begin with a discussion oI the cross-platIorm Irameworks available.

Ruby on Rails (sometimes shortened to just "Rails") is a popular AJAX development environment. The project is
coded in an open-source, object-based development language called Ruby, which is similar to PERL or Python.
There is a Windows-based install package, called "Instant Rails", that provides everything you need to get up and
running with Rails very quickly: the Ruby language / interpreter; the Rails Iramework; the Apache Web server; and
the MySQL database platIorm. It has an easy to use installer that will install and conIigure all oI these products
without changing the system environment. The Instant Rails interIace, shown on the slide here, is easy to operate
and doesn't use a lot oI resources. The Instant Rails package is currently available Ior Windows, but ports are
planned Ior Linux and OSX. Ruby on Rails, oI course, will run on all three platIorms.

The Dojo toolkit is a JavaScript library that encapsulates much oI the Iunctionality needed Ior dynamic Web pages.
The product is open source and Ajax abilities are present by deIault. The power oI the library resides in the widgets
that are available. These widgets are straightIorward and require very little coding. The library is worth taking a look
at; it is available at www.dojotoolkit.org.

The Simple AJAX Toolkit, or SAJAX, is another open source option Ior coding in AJAX. It is primarily a third-
party script that you will reIerence Irom one oI the many server-side platIorm stubs that they provide. SAJAX makes
it easy to call PHP, Perl or Python Iunctions Irom your Web pages via JavaScript without perIorming a browser
reIresh. SAJAX currently supports PERL, PHP and Python; security problems have caused a temporary removal oI
ASP support, but it is hoped that ASP support will be restored.

XAJAX is an object-oriented, customizable PHP library that provides a JavaScript pump to client-side PHP coding.
XAJAX is a good library Ior using AJAX to handle dynamic PHP support.

DWR, or Direct Web Remoting, is a Java Library that allows JavaScript in a browser to interact with Java on a
server and helps you manipulate Web pages with the results oI the interactions. The DWR library supports calling
and callback Iunctions Ior interaction with server side code. This library makes working with Java and AJAX very
easy.

WebORB is a multi-platIorm AJAX presentation Iramework, available Irom an organization called Midnight
Coders. The package can communicate between AJAX clients and server packages developed using .NET
languages, Java, PHP or Ruby on Rails.

Modern implementations oI AJAX are relatively new technologies, so integration oI the AJAX and .NET
Irameworks will result in lots oI interesting combinations. Let us survey some oI the more recent oIIerings.

The AJAX.NET DLL (and the 'proIessional' version, AJAX.NET ProIessional) is an open-source DLL / source code
combination that smoothly integrates AJAX calls with the .NET environment. Detailed setup and conIiguration
instructions are available at the Web sites listed here on the slide. The library has the availability to pass many data
types back to the JavaScript layer, including datasets, data tables, data views, arrays and collections. The author has
started and supports a Google group Ior the library, and his blog has a continuous Ilow oI new and interesting
AJAX.Net related discussions.

The Anthem library adds AJAX-like Ieatures to ASP.NET. What sets Anthem apart Irom other Irameworks is that it
integrates itselI into the server-side control model made popular by ASP.NET. This includes Iull support Ior view
state, server-side events, and everything else the typical ASP.NET developer has grown accustomed to. Pages that
use Anthem get "registered" with the Anthem Manager, and server-side Iunctions are tagged with an attribute
indicating that they will be invoked through Anthem. Client-side Iunctions then invoke the server-side "tagged"
Iunctions as needed

MagicAjax.NET is a Iree open-source Iramework, designed to make it easier and more intuitive Ior developers to
integrate AJAX technology into their Web pages, without replacing the ASP.NET controls and/or writing tons oI
JavaScript code. The real magic oI MagicAjax.NET is that it is more oI a control than an actual interactive library.
MagicAjax.NET provides you with an ajaxpanel control that you use as a wrapper Ior your dynamic controls. You
handle the control events as you would handle classic ASP.NET event triggers. Your setup involves adding a Iew
lines oI code to Web.conIig, aIter which you can just drop the wrapper into the HTML.

MicrosoIt's entry into the ASP.NET world was code-named "Atlas", but has now been renamed to "ASP.NET
AJAX". ASP.NET AJAX brings legacy ASP.NET developers into the world oI dynamic development by providing
a seamless integration with their Visual Studio environment. ASP.NET AJAX supports object-oriented API
development, asynchronous calls to Web services, tight integration with Visual Studio, and runtime cross-platIorm
support.


Chapter 8

Welcome Lo Lhe undersLandlng an A!Ax Llbrary dlscusslon! We wlll Lalk abouL whaL happens behlnd Lhe scenes ln an A!Ax
llbrary

uslng LhlrdparLy conLrols save a loL of Llme and efforL ln developlng Web slLes Assembllng soluLlons from ouLofLhebox
parLs LhaL can save Llme and debugglng headaches wlll become a qulck and deslrable means of bulldlng A[axenabled Web
slLes Powever uslng a prewrlLLen LhlrdparLy llbrary does noL relleve one of Lhe need Lo undersLand whaL ls golng on behlnd
Lhe scenes undersLandlng an A[ax llbrary should be a process accompanled by a decenL level of undersLandlng of Lhe llbrarys
funcLlonallLy 1o accompllsh Lhls we wlll look aL a small appllcaLlon LhaL uses Lhe A[ax llbrary and look aL Lhe code LhaL ls flred
off wlLhln Lhe llbrary lLself

Slnce Lhe sample llbrary LhaL we are looklng aL here ls a uLL you wlll have Lo download Lhe pro[ecL flles exLracL Lhem Lo a
proper worklng dlrecLory and bulld Lhe uLL

1he baslc appllcaLlon has a LexLbox and a buLLon 1he user enLers a name ln Lhe LexL box cllcks Lhe buLLon and recelves a
personallzed greeLlng 1hls sounds relaLlvely sLralghLforward however Lhe greeLlng ls bullL on Lhe server slde raLher Lhan
wlLh !avaScrlpL 1he buLLons onCllck evenL calls a serverslde meLhod whlch uses Lhe AnLhem llbrary Lo creaLe a cusLom sLrlng
for reLurn Lo Lhe cllenL Cnce Lhe cusLom sLrlng ls reLurned Lo Lhe cllenL regular !avaScrlpL processlng can Lake over

MeLhods LhaL we wlll creaLe on Lhe server wlll need Lo be Lagged wlLh a speclal AnLhemMeLhod aLLrlbuLe as shown here on
Lhe sllde Addlng Lhls aLLrlbuLe Lo Lhe meLhod lnforms Lhe llbrary LhaL Lhe meLhod should be made avallable Lo Lhe
asynchronous process

Cnce Lhe serverslde meLhod has been declared you lnvoke lL by passlng lL as Lhe flrsL argumenL Lo
AnLhem_lnvokeageMeLhod Any necessary argumenLs are passed (as an array) as Lhe second argumenL and Lhe cllenLslde
callback funcLlon (where Lhe response geLs manlpulaLed) ls Lhe Lhlrd argumenL

1he AnLhem Llbrary has a 8eglsLer funcLlon whlch lndlcaLes whlch funcLlons wlll be called back by Lhe cllenL and a re8ender
funcLlon whlch ls used Lo collecL resources from Lhe server prlor Lo dlsplay

1he AnLhem[s !avaScrlpL flle handles our requesL and response processlng and Lakes care of updaLlng conLrols LhaL are
modlfled Lhrough server slde modlflcaLlons and cllenL slde callback 1he AnLhem llbrary can also pass and manlpulaLe nL1
daLa Lypes and you can use !SCn (!avaScrlpL Cb[ecL neLwork) Lo exLend Lhe daLa Lypes Lhe llbrary can parse

Chapter 9

Web Servlces provlde a plaLformlndependenL means of requesLlng and recelvlng lnformaLlon over Lhe lnLerneL 1he
Lechnology uses many acronyms such as SCA WSuL and xML however vlsual SLudlo encapsulaLes many of Lhese servlces
lnLo an easyLouse pro[ecL LemplaLe maklng Web servlces wlLh A!Ax less dlfflculL Lhan Lhey could be

An lnLerneL Web servlce ls noLhlng more Lhan a plaLformlndependenL meLhod of exchanglng daLa beLween WebconnecLed
compuLers lor example one developer LhaL knows only !ava and anoLher developer LhaL only knows ASnL1 can each seL
up Web servlces on her own respecLlve compuLer and Lhe Web servlces can requesL and recelve lnformaLlon from each oLher
because Lhey communlcaLe ln plaln LexL 1helr communlcaLlons are packaged or encapsulaLed uslng a slmple LexLbased
formaL called LxLenslble Markup Language (xML) CommunlcaLlons are senL back and forLh uslng a proLocol called Lhe Slmple
Cb[ecL Access roLocol (SCA)

SCA or Lhe Slmple Cb[ecL Access roLocol ls a wldelyused means of uslng xML for LransporLlng lnformaLlon over Lhe
lnLerneL Slnce SCApackaged lnformaLlon can pass over lnLerneL porL 80 Lhe Web browser porL lL has become a
popular mechanlsm for passlng lnformaLlon beLween appllcaLlons LhaL were noL oLherwlse deslgned wlLh knowledge of each
oLhers presence

WhaL does Lhls mean for A!Ax? 1wo Lhlngs you are sLlll able Lo access Web servlce calls from wlLhln an asynchronous process
ln much Lhe same way as you are able Lo call a daLabase also as you mlgraLe Lo MlcrosofLs ALlas/ASnL1 20 Lechnology
you wlll be able Lo call Lhe Web servlce dlrecLly from Lhe cllenLslde code

ln order Lo bulld Lhe Web servlce Lo be publlshed and made avallable Lo your A!Axenabled appllcaLlon sLarL by selecLlng
new Web SlLe ln vlsual SLudlo and maklng Lhe assoclaLed vlrLual dlrecLory avallable Lo llS CreaLe a new assoclaLed Web
appllcaLlon and leL vlsual SLudlo bulld Lhe pro[ecL Cnce Lhe skeleLal pro[ecL ls bullL you can wrlLe Lhe servlce code ln vlsual
SLudlo and cllck Lhe offered llnk Lo LesL Lhe servlce

8ulldlng an A!Ax appllcaLlon LhaL accesses Web servlces asynchronously ls noL very dlfferenL from bulldlng a daLabase
appllcaLlon LhaL would lmplemenL Lhe same A!Ax llbrary one merely polnLs Lhe same A!Ax meLhod conLenL Lowards an
lnLerneL 1he baslc procedure lnvolves creaLlng an ASnL1 Web slLe ln vlsual SLudlo addlng a reference Lo a Web servlce
lnsLanLlaLlng LhaL Web servlce lnvoklng meLhods on LhaL servlce and parslng Lhe resulLs of LhaL servlce

Cn Lhe server slde we wlll creaLe code Lo lnsLanLlaLe our Web servlce creaLe a daLa seL Lo hold our lnformaLlon asslgn Lhe
ouLpuL from Lhe Web servlce Lo Lhe daLa seL and bulld daLa Lable for reLurn Lo Lhe cllenL slde 1he Lable ls asslgned Lo Lhe
lnnerP1ML properLy

MosL modern A!Ax llbrarles aslde from ALlas donL have an lmplemenLaLlon avallable for cllenLslde access Powever lL ls
posslble Lo use Lhe xMLPLLp8equesL ob[ecL Lo communlcaLe wlLh Web servlces provlded LhaL you wrlLe Lhe code Lo parse Lhe
lnbound and ouLbound xML CreaLlng Lhe xMLPLLp8equesL ob[ecL ls falrly sLralghLforward buL crossbrowser supporL
requlres LhaL you Lry Lo creaLe Lhe AcLlvex ob[ecL flrsL (for lnLerneL Lxplorer) and lf LhaL falls creaLe Lhe xMLPLLp8equesL
ob[ecL (for llrefox Mozllla Cpera and Safarl class browsers) nexL bulld Lhe SCA package and use Lhe xMLPLLp8equesL
ob[ecLs send() meLhod Lo send lL off Asslgn Lhe approprlaLe meLhod Lo Lhe ob[ecLs onreadysLaLechange properLy arse
Lhe reLurned daLa and bulld an P1ML Lable for asslgnmenL Lo Lhe lnnerP1ML properLy of your deslred dlsplay resulL

Chapter 10

1agglng or userdeflned conLenL classlflcaLlon has become a powerful way for users Lo aggregaLe and deflne conLenL ln a
flexlble manner A!Ax leLs users develop appllcaLlons LhaL allow users Lo enLer Lags LhaL classlfy conLenL and Lhen
asynchronously dellver and updaLe conLenL ln response Lo Lhose Lags 1he appllcaLlon assoclaLed wlLh Lhls parLlcular
dlscusslon wlll leL you see Lhe lnLroducLory sLeps needed for asynchronous communlcaLlon beLween Lhe serverslde code
layer and Lhe cllenLslde lnLerface



1he daLabase should be named A!Ax1agglngSample and should be bullL accordlng Lo Lhe sLrucLure shown on Lhe sllde ?ou
may bulld lL ln SCL Server or SCL Server Lxpress uslng Lhe supplled scrlpL or recreaLe lL ln anoLher daLabase producL as long
as you verlfy connecLlons ln your subsequenL codlng

Pere ls some sample daLa for Lhe lmage1ags Lable ?ou can use Lhls daLa lf you are bulldlng Lhe Lable from scraLch

1he appllcaLlon sLores userdeflned Lags ln a daLabase 1he appllcaLlon makes each lmage cllckable cllcklng on an lmage
uses A!Ax Lo asynchronously connecL Lo Lhe daLabase reLrleve Lhe Lags for Lhe assoclaLed lmage and populaLe Lhe screen
wlLh Lhose Lags 1he user also has Lhe ablllLy Lo add and deleLe Lags

1he baslc P1ML code loads up a seL of !avaScrlpL funcLlons ln Lhe page header Lo load and deleLe Lags as well as funcLlons Lo
handle Lhe asynchronous callback from Lhese meLhods

1he Loadlmage1ags funcLlon seLs up a connecLlon Lo Lhe daLabase geLs Lhe Lags assoclaLed wlLh Lhe lmage bullds an P1ML
Lable conLalnlng Lhose Lags and reLurns LhaL Lable Lo Lhe cllenL

Chapter 11

Coogle SuggesL ls an appllcaLlon LhaL crysLalllzed auLosuggesLlng posslblllLles and broughL Lhem Lo Lhe World Wlde Web

1he Coogle SuggesL feaLure uses A!Ax Lechnology Lo asynchronously access a Coogle daLabase and query for resulLs LhaL
maLch Lhe LexL LhaL ls looked up ln Lhe daLabase 1he resulLs are Lhen reLurned Lo Lhe user 1hls ablllLy Lo auLocompleLe
web conLrols ls noL ln and of lLself new whaL was new was Coogles harnesslng of A[ax Lechnology Lo make Lhe lookups so
fasL LhaL you could be Lyplng away and Coogle could make new suggesLlons ln Lhe Llme lL Look Lo Lype a slngle characLer

Coogle SuggesL ls aL hearL a dropdown llsL wlLh auLocompleLe funcLlonallLy 1here are many addlLlonal feaLures LhaL are
lmplemenLed ln Lhe full appllcaLlon buL Lhls dlscusslon wlll focus on Lhe key Loplc of uslng A!Ax Lo pass daLa back Lo code
execuLlng on Lhe cllenL

1he fundamenLal P1ML code for Lhe Coogle SuggesL appllcaLlon llves ln a page called Searchageaspx 1hls code has a form
on Lhe page LhaL has an JnKeyUp evenL handler Lled Lo Lhe forms lnpuL box 1he evenL handler called Load8esulLs makes an
A!Ax call Lo Lhe server Lo look up Lhe LexL ln Lhe lnpuL box and reLurn suggesLlon maLches for LhaL LexL 1he form has a
dlvlslon called searchresulLs ln whlch Lhe daLabase lookup resulLs geL dlsplayed (Lhrough asslgnmenL Lo Lhe dlvlslons
lnnerP1ML properLy) 1he pages code behlnd flle conLalns a 8eLrleve8ows funcLlon wrlLLen ln C# whlch connecLs Lo Lhe
daLabase and reLrleves Lhe lnformaLlon Lo be senL back Lhrough Lhe callback funcLlon

1he uaLa SeLs verslon of Lhe search page lnvolves creaLlng a new uaLa SeL and uaLa 1able ln Lhe backend code fllllng Lhe
daLa seL wlLh Lhe lookup resulLs and sendlng Lhe Lable back Lo Lhe callback funcLlon 1he daLa Lable ls Lhen parsed Lo creaLe
Lhe P1ML Lable ln Lhe cllenL slde for dlsplay

1he Cb[ecLs verslon of Lhe search page uses a cusLom SLore ob[ecL Lo hold lnformaLlon abouL lndlvldual sLores and a
SLoreCollecLlon ob[ecL Lo hold lnformaLlon abouL a group of sLores abouL whlch lnformaLlon ls belng soughL 1he lnformaLlon
ls subsequenLly manlpulaLed ln a fashlon slmllar Lo LhaL of Lhe uaLa SeLs and uaLa 1ables

1he Searchageaspxcs code uses Lhe 8eLrleve8ows meLhod Lo connecL Lo Lhe daLabase and flnd Lhe Lop 10 sLores maLchlng
Lhe users crlLerla (passed as Lhe flrsL argumenL) 1he Showulv() and Pldeulv() !avaScrlpL funcLlons ln Lurn manage Lhe
vlslblllLy of Lhe P1ML dlvlslon LhaL wlll dlsplay Lhe resulLs

1he codebehlnd C# flle Searchage_uaLaSeLsaspx connecLs Lo Lhe daLabase feLches Lhe approprlaLe lnformaLlon and
reLurns a uaLaSeL Lo Lhe cllenL slde 1he Load8esulLsCall8ack funcLlon creaLes and populaLes an P1ML Lable ob[ecL ln
memory Lhen appends Lhe Lable ob[ecL Lo Lhe approprlaLe dlvlslon elemenL Lag

1he Searchage_ob[ecLsaspx codebehlnd flle works ln a slmllar fashlon buL lL creaLes a cusLom SLore ob[ecL Lo hold Lhe
lnformaLlon abouL each lndlvldual sLore and a SLoreCollecLlon ob[ecL Lo manage Lhe collecLlve lnformaLlon abouL Lhe sLores
1he maln dlfference of meLhodology here ls Lhe lsolaLlon of Lhe SLore ob[ecL by lndex from Lhe collecLlon followed by
reLrleval of Lhe ob[ecLs name properLy

When Lhe user poslLlons Lhe cursor over a reLurn row one may hlghllghL LhaL row by asslgnlng a funcLlon Lo Lhe
JnMouseJver evenL 1he funcLlon ln Lurn asslgns a cusLom sLyle class called mouseCver Lo Lhe Lo Lhe classname
properLy of Lhe Lable cell 1he mouseCver class changes Lhe background color so LhaL Lhe LexL appears hlghllghLed Slmllarly
asslgnlng a funcLlon Lo Lhe JnMouseJut evenL asslgns Lhe cusLom sLyle class mouseCuL Lo Lhe Lable cells classname
properLy 1hls class resLores Lhe orlglnal background When Lhe user cllcks on an elemenL reLurned from Lhe suggesLlon box
we can lnLercepL LhaL value and copy lL Lo Lhe lnpuL box

Pere are some posslble exLenslons Lo Lhe example a ?ou could redlrecL Lhe user Lo anoLher search page b ?ou could flll ln
Lhe resL of Lhe lnpuL box wlLh Lhe remalnlng characLers of Lhe flrsL search resulL c ?ou could cache Lhe prevlous search
resulL Lo prevenL anoLher server hlL lf Lhe user presses Lhe backspace key

Chapter 12

A!AxnL1 makes lL feaslble Lo deslgn user conLrols LhaL encapsulaLe much funcLlonallLy ln a reusable componenL slmllar Lo a
draganddrop conLrol ln vlsual 8ASlC or oLher lnLegraLed developmenL envlronmenL CusLomlzlng a userdeflned conLrol
from A!AxnL1 has some mlnor ldlosyncrasles of whlch you should be aware

1he soluLlon sLarLs by bulldlng a new WebslLe ln vlsual SLudlo addlng a new user lLem of Lype Web user ConLrol and addlng
a reference Lo Lhe AnLhem Llbrary

1he flrsL Lask ls Lo bulld Lhe user conLrol lLself 1he prlmary purpose of Lhe conLrol ls Lo dlsplay a LexLbox and a buLLon When
Lhe user cllcks on Lhe buLLon Lhe conLrol wlll dlsplay Lhe LexLbox value back Lo Lhe user

1he LexLbox and P1ML conLrol have Lo be dropped onLo Lhe conLrol page and subsequenLly Lhe conLrol has Lo be dropped
onLo Lhe 1esLlnglorm AcLlvex page 1he code also has a uttonClicked() !avaScrlpL walLlng for an onClick evenL whlch
wlll acLually be coded lnLo Lhe Page_Load evenL on Lhe server slde

?ou can LesL Lhe user conLrol by seLLlng Lhe onClick aLLrlbuLe of Lhe buLLon Lo Lhe uttonClicked meLhod dragglng and
dropplng Lhe user conLrol onLo Lhe page enLerlng LexL lnLo Lhe LexLbox and cllcklng on Lhe buLLon 1he LesLlng wlll generaLe an
error lcon on Lhe boLLom of Lhe page doublecllcklng Lhe lcon wlll reveal Lhe deLalls of Lhe error namely ob[ecL expecLed
1hls seems somewhaL odd
1he LesLlng wlll brlng us Lo our flrsL caveaL of A!Axenabled user conLrols lL ls noL parLlcular Lo A!Ax conLrols buL ASnL1
user conLrols ln general 1he message lndlcaLes LhaL someLhlng on Lhe page ls mlsslng ln facL lL ls Lhe aLLempL Lo read Lhe
conLrols LexLbox LhaL ls generaLlng Lhe error Cllcklng on vlew Source and looklng aL Lhe renderlng of Lhe LexLbox and
buLLon wlll qulckly ldenLlfy Lhe problem 1he lus for Lhe conLrols have been modlfled aL runLlme Lhe CllenL lu properLy
followed by an underscore has been preflxed Lo Lhe lu of each conLrol As a resulL of Lhls calls Lo getElementyID need Lo
be modlfled Lo Lake Lhe CllenL lu followed by an underscore followed by Lhe conLrol name (lnsLead of [usL Lhe conLrol name)
and Lhe call Lo uttonClicked needs Lo Lake Lhe ClientID as a parameLer

1he easlesL way Lo Lurn our CoogleSuggesL appllcaLlon lnLo a user conLrol ls Lo creaLe a new Web slLe from wlLhln vlsual
SLudlo add a Web ConLrol rename Lhe uefaulLASx form LhaL ls creaLed form Lhe defaulL Web slLe and lnclude a reference
Lo AnLhemuLL We can Lhen brlng ln approprlaLe code (elLher from a prevlously wrlLLen verslon of CoogleSuggesL or from
Lhe clone verslon LhaL ls supplled wlLh Lhls course) Lo creaLe our user conLrol

Clven Lhe paLLern LhaL has been esLabllshed here one could easlly Lurn an exlsLlng componenL such as a clone of Coogle
SuggesL lnLo an ASnL1 user conLrol Cne would begln by creaLlng a new Web slLe ln a new lnsLance of vlsual SLudlo addlng
a new Web user ConLrol ln LhaL lnsLance and addlng a reference Lo AnLhemdll ln LhaL lnsLance

Cpen up Lhe Coogle SuggesL clone pro[ecL ln a separaLe lnsLance of vlsual SLudlo and add Lhe AnLhem reglsLraLlon code Lo
Lhe Page_Load evenL of Lhe conLrol SwlLch Lo Lhe Coogle SuggesL clone pro[ecL copy Lhe scrlpLlng block from Lhe pro[ecL
and pasLe LhaL lnLo Lhe ucSuggesLConLrolaspx form Also ln ucSuggesLConLrolaspx declare a global !avaScrlpL varlable called
ClientID 1hls varlable wlll be asslgned a value ln Lhe serverslde code ucSuggesLConLrolaspxcs

1he user conLrol ls affecLed by Lhe lnLroducLlon of Lhe ClientID preflx We musL accounL for LhaL when calllng our server
slde funcLlon 1he AnLhem llbrary wlll accepL LhaL lnllne ClientID as an overloaded parameLer allowlng our Lrafflc Lhe
proper navlgaLlonal ald Cn Lhe cllenL slde you wlll need Lo add Lhe runat=server modlflcaLlon Lo Lhe LexLbox and P1ML
buLLon 1hls wlll allow Lhe Lwo conLrols Lhe opporLunlLy Lo render wlLh Lhe respecLlve ClientID preflxes when Lhey are senL
ouL Lo Lhe users browser

When we lmplemenL CoogleSuggesL as a user ConLrol we musL Lake care Lo esLabllsh Lwo Lhlngs We musL drag and drop Lhe
user conLrol onLo Lhe parenL page and we musL make sure LhaL Lhe CnlnlL meLhod esLabllshes a value for Lhe CllenLlu
properLy We do Lhls by declarlng a global varlable for CllenLlu and lnlLlallzlng lL approprlaLely

lmplemenLlng dynamlc user conLrols uslng A!Ax ls relaLlvely easy conslderlng Lhe power LhaL ls provlded Several key
elemenLs Lo conslder lnclude Lhe followlng a 8e sure Lo reglsLer Lhe conLrols wlLh Lhe A!Ax llbrary b 8e sure Lo accounL for
Lhe ClientID c 8e sure LhaL your calls Lo Lhe conLrols serverslde code lnclude Lhe ClientID d ?ou may append dynamlc
!avaScrlpL code aL runLlme from Lhe server slde

Chapter 13
A mapenabled uLlllLy slLe or mashup comblnes varlous Lechnologles lnLo a useful Lool An example of such a comblned
appllcaLlon ls MlcrosofLs vlrLual LarLh appllcaLlon whlch has become a cenLral Lool Lo many of Lhe mashups on Lhe Web
1he vlrLual LarLhs llbrary provldes a scrollable A!Ax map LhaL can be dropped seamlessly onLo a Web page
vlrLual LarLh ls much more Lhan [usL a draggable map you can lnserL pushplns aL deslgnaLed polnLs on Lhe map and
creaLe layovers for varlous userlnLeracLlon Lasks A growlng number of appllcaLlons are appearlng dally on Lhe Web An
example ls Lhe lresh SLudlos Web slLe whlch uses Lhe MlcrosofL vlrLual LarLh map as lLs base Lechnology and layered (or
mashed up) addlLlonal Lools aLop Lhe map Cur appllcaLlon wlll comblne Lhe vlrLual LarLh base Lechnology ?ahoos Lrafflc
feed and A!Ax lnLo a slngle appllcaLlon
1he basellne appllcaLlons wlll dlsplay a vlrLual LarLh map cenLered on a hardcoded Zl code and pushplns wlll appear for
varlous Lrafflc delays LhaL are near Lhe aforemenLloned Zl code Lach such pushpln has a MouseCver evenL LhaL renders
popup conLalnlng deLalls of Lhe Lrafflc reporL 1he appllcaLlon conLalns Lhe AnLhemdll A!Ax class llbrary a serles of Cll flles
whlch represenL pushplns for Lhe map Lhe Web page (uefaulLaspx) and Lhe sLandard Webconflg flle
1he vlrLual LarLh conLrol has commerclal and noncommerclal verslon We wlll be uslng Lhe free noncommerclal verslon of
Lhe conLrol ln Lhls course 1he vlrLual LarLh conLrol ls really [usL a few flles LhaL you can reference from your cllenL slde
appllcaLlons Cnce you seL Lhe scrlpL locaLlons you use Lhe map by lnsLanLlaLlng and asslgnlng Lhe maps parameLers creaLlng
an lnsLance of Lhe map wlLh Lhose parameLers and addlng pushplns Lo Lhe map 1he consLrucLor Lakes Lhe myMap dlvlslon
elemenL where Lhe map ls golng Lo be as well as a llsL of parameLers lncludlng Lhe laLlLude and longlLude Lhe zoom level (1
ls counLry level and 19 ls sLreeL level)
?ou can add pushplns Lo your map uslng Lhe Addushpln meLhod ArgumenLs Lo Lhe meLhod lnclude a unlque lu for Lhe
pushpln Lhe global laLlLude and longlLude where Lhe pushpln should be placed Lhe wldLh and helghL of Lhe pushpln Lhe class
name of Lhe CSS sLyle Lo lnherlL Lhe P1ML LexL for Lhe mouseover popup and Lhe Zlndex of Lhe pushpln lf you are noL
lnLeresLed ln uslng popups ln your own vlrLual LarLh map you can use sLyleblocks and asslgn your own lmages Lo Lhe
backgroundlmage properLy
?ahoo has made avallable a raLher lnLrlcaLe 8SS feed LhaL ls capable of accepLlng a varleLy of requesL parameLers and
reLurnlng any reglsLered Lrafflc reporLs noL all clLles have Lrafflc feeds so plug ln your clLy Lo Lry lL ouL As an alLernaLlve Lo
passlng Lhe clLy and sLaLe parameLers you could pass a locaLlon parameLer and provlde lnformaLlon such as a sLreeL
clLy sLaLe and/or zlp code Any lnformaLlon passed uslng Lhe locaLlon parameLer overrldes lnformaLlon passed uslng clLy
or sLaLe parameLers
1he 8SS elemenL ls Lhe Loplevel elemenL of Lhe feed We have already menLloned LhaL Lhe ?ahoo! 1rafflc feed conforms Lo
8SS 20 speclflcaLlons 1he 8SS elemenL conLalns a channel elemenL as lLs chlld elemenL 1he channel elemenL has several
chlld elemenLs such as LlLle llnk language and lLem 1he lmage elemenL descrlbes Lhe lcon or graphlc assoclaLed wlLh Lhe
feed generally Lhe ?ahoo! Search logo 1he lmage elemenL has u8L LlLle llnk wldLh and helghL elemenLs 1he lLem
elemenLs of Lhe 8SS feed are Lhe acLual reporLs LhaL we are seeklng 1he lLem elemenLs have LlLle llnk descrlpLlon laL long
guld and pubuaLe Lags 1he descrlpLlon Lag conLalns Lhe deLalls of Lhe acLual Lrafflc reporL 1he llnk Lag conLalns Lhe address
of Lhe avallable map for Lhe alerL 1he guld Lag conLalns Lhe ?ahoo generaLed ldenLlfler for Lhe reporL 1he pubuaLe Lag
conLalns Lhe daLe and Llme of Lhe Lrafflc lncldenL
1he opulaLeMap funcLlon hardcodes Lhe Zl code for Lhe map LhaL we wlsh Lo reLrleve We could [usL as easlly provlde a
LexLbox lnLerface for Lhls elemenL buL we are hardcodlng lL for slmpllclLys sake 1he mapsmlles parameLer provldes a
radlus of coverage LhaL we would llke Lo see reLurned and Lhe mapseverlLy parameLer provldes Lhe severlLy level of Lhe
reporLs belng generaLed passlng a value of zero here means LhaL we wlll recelve all Lhe resulLs for Lhe area LhaL we have
requesLed
1he serverslde code ln uefaulLaspxcs communlcaLes wlLh ?ahoo by provldlng Lhe requlslLe parameLers and bulldlng a
uaLa1able LhaL ls passed back Lo Lhe cllenL for parslng 1he meLhod creaLes a new uaLaSeL uses Lhe 8eadxML meLhod Lo grab
Lhe xML from Lhe Lrafflc feed parses Lhe xML code Lo bulld a daLa row and appends LhaL row Lo Lhe uaLa1able Cnce Lhe
xML ls parsed Lhe uaLa1able ls reLurned
1he cllenLslde callback meLhod parses Lhe Lable and adds pushplns wlLh Lhe mapAddushpln() meLhod 1he Addushpln()
meLhod generaLes an approprlaLe seL of parameLers for Lhe severlLy of Lhe Lrafflc lncldenL 1he laLlLude and longlLude and Lhe
generaLed messages are provlded as well as Lhe generaLed message 1he pushpln ls creaLed from a cusLom dlvlslon and a
nesLed pln lmage 1he popup meLhod ls called ln Lhe CnMouseCver evenL
Chapter 14

Many users are sLarLlng Lo use A!Ax Lo creaLe Web slLes LhaL represenL a meanlngful collecLlon of personal relevanL daLa
SlLes such as MySpace and lacebook connecL people wlLh an lnLerface LhaL are personallzed reflecLlons of Lhe member
When you vlslL such a slLe you qulckly geL a feel for Lhe personallLy of Lhe member from Lhe varlous parLs of Lhe page
Commonly known as porLal slLes Lhese Web appllcaLlons Lend Lo dlssecL Lhe page lnLo varlous secLlons of grouped daLa ?ou
mlghL flnd a weaLher box deLalllng Lhe forecasL for Lhe members homeLown or a collecLlon of blogs frequenLed by Lhe
member Some porLal slLes have sLreamlng sLock quoLe parLs as well as mulLlmedla players each hosLed ln lLs own wlndow or
space on Lhe page 1he ablllLy Lo choose from an assorLmenL of componenLs Lo plug lnLo Lhe slLe lncreases Lhe
personallzaLlon of Lhe envlronmenL

An example of such a porLal slLe ls MlcrosofLs My MSn Web slLe mymsncom 1he slLe gaLhers lnformaLlon from a
assporL proflle and applles such seLLlngs as your locaLlon Lo varlous Web componenLs on Lhe Web page When you vlslL your
slLe you wlll flnd Lhe weaLher for your area posslble Lrafflc maps for Lhe surroundlng clLy and local news as well Cf course
?ahoo and Coogle are noL abouL Lo be lefL behlnd Lhey offer Lhls Lype of personallzaLlon on Lhelr slLes as well

A Web arL ls a modular componenL LhaL ls capable of cusLomlzaLlon Lhemes and relocaLlon vlsual SLudlo 2003 supporLs
Web arLs Lhrough a Web arLs LoolseL a Lool box paleLLe conslsLlng of a WebarL Manager a WebarL Zone and several
dlfferenL WebarLs Lach age musL have one and only one WebarLManager conLrol Lach page may have mulLlple
WebarLZones ?ou drop a WebarL onLo each WebarLZone

1he sample appllcaLlon has Lhree WebarLZones from whlch we can drag and drop our Lwo lndlvldual WebarLs ouL onLo an
ASnL1 page When one Lypes lnLo Lhe Search box a dropdown llsL appears as we Lype When one cllcks on Lhe sLore
locaLlon a new map ls reLrleved and ls dlsplayed above Lhe search box

Cne of Lhe Lasks LhaL we are lmplemenLlng ln Lhls appllcaLlon ls Lhe sLorage and reLrleval of Lhe Zl code daLa reLurned Lo us
from Lhe AdvenLureWorks sLore Lable We preserve Lhe Zl code across sLaLe ln a hldden fleld for use ln posLback processes
Lhrough Lhe 8eplacelnpuL funcLlon Lhe beglnnlng of whlch ls shown here lease noLe LhaL Lhe lnpuL conLrol for Lhe Zl code
should have a runaLserver Lag oLherwlse lnformaLlon wlll noL acLually be sLored ln sesslon sLaLe 1he Zl code ls used Lo
reLrleve a sLaLlc map from ?ahoo allowlng our user Lo vlsually see Lhe locaLlon of Lhe sLore

Cur appllcaLlon reLrleves Lhe sLaLlc maps as xML uslng a u8L as Lhe source We plug a Zl code ln as a parameLer and Lhe
lnformaLlon comes back as a slngle xML elemenL Slnce Lhe lnformaLlon comes back as a slngle xML elemenL raLher Lhan as
an array or seL of xML elemenLs we can use a slngle xML1exL8eader ob[ecL Lo capLure Lhe resulLs

We reLrleve Lhe sLaLlc map by Laklng Lhe Zl code and plugglng LhaL lnLo a u8L LhaL uses Lhe MapsServlce Al as shown here
We can use an xml1exL8eader Lo read Lhe lnformaLlon raLher Lhan creaLlng a uaLaSeL because only a slngle elemenL ls
reLurned by Lhe xrread call

1he sample query shown above (of course you should replace Lhe Zl code wlLh your own) reLurns an xML resulL 1he 8esulL
elemenLs lnner LexL ls acLually a u8L for an lmage map copylng and pasLlng LhaL u8L lnLo a browser wlll render Lhe map
shown on Lhe nexL sllde

Pere ls Lhe sLaLlc map LhaL comes from Lhe u8L LhaL was shown ln Lhe precedlng sllde

Cnce we have reLrleved Lhe esLabllshed u8L from ?ahoo we bulld Lhe approprlaLe P1ML on Lhe server slde of Lhe A!Ax call
and reLurn Lhe sLrlng Lo Lhe cllenL for blndlng Lo Lhe lnnerP1ML properLy of Lhe dlv Lag 1hls wlll allow us Lo creaLe an lmage
Lag on Lhe fly wlLh Lhe map embedded wlLhln As Lhe user selecLs new cusLomers we wlll sLarL Lhe process over and reLrleve a
fresh new map Cne key lLem LhaL we musL keep ln mlnd ls Lhe posslblllLy of a posLback wlplng ouL Lhe currenL lmage We
wlll need Lo reload Lhe conLrol wlLh Lhe saved Zl code Slnce dynamlcally manlpulaLlng Lhe Lags wlLh A!Ax can cause
problems wlLh keeplng Lhe serverslde and cllenLslde vlew sLaLes ln synchronlzaLlon we need Lo make sure LhaL we keep Lhls
lnformaLlon upLodaLe ourselves 1he SLarLerMap funcLlon shown here accompllshes Lhls Lask (Cf course you wlll wanL Lo
replace Lhe 98133 Zl code shown here wlLh your deslred sLarLer Zl code)
Chapter 15

Welcome Lo Lhe A!Ax and ASnL1 securlLy course Cne of Lhe flrsL concerns Lo emerge from publlc dlscusslon whenever any
klnd of Lechnology becomes malnsLream ls securlLy SecurlLy should always be a conslderaLlon for every developer as
appllcaLlons are belng coded regardless of where Lhe program runs All Loo ofLen securlng Lhe appllcaLlon ls an afLerLhoughL
Lo Lhe developmenL process raLher Lhan a dedlcaLed parL of Lhe cycle Asklng Lhe quesLlon Well Lhe appllcaLlon ls done now
how do we lock lL down? ls a dangerous way Lo go abouL bulldlng and publlshlng sofLware We wlll address Lhe quesLlons ls
A[ax a secure meLhod of Lransferrlng daLa Lo and from serverslde resources? and Pow can l Lake advanLage of Lhe nL1
lrameworks bullLln securlLy Lools?

Asynchronous serverslde calls depend upon Lhe lmplemenLaLlon of xmlPLLp8equesL whlch ls a requesL / response daLa
Lransfer model LhaL sLlll operaLes wlLhln Lhe same zone as Lhe hosLlng page An A!Ax call wlll be consldered LrusLed only lf
calls back Lo Lhe same domaln from whlch lL was lssued lf your page was dellvered from wwwdomalnonecom you may
have problems accesslng resources from wwwdomalnLwocom

ASnL1 20s lorms AuLhenLlcaLlon model helps us lmplemenL serverslde securlLy Slnce A[ax operaLes wlLhln Lhe conflnes
of pagelevel securlLy we really donL need Lo worry abouL Lhe lndlvldual calls made by Lhe llbrary We wlll be safe wlLhln our
calls as long as we have lmplemenLed Lhe framework proLecLlon 1he nL1 world supporLs Lhree meLhods of user
auLhenLlcaLlon passporL auLhenLlcaLlon wlndows auLhenLlcaLlon and forms auLhenLlcaLlon MosL of Lhe WebConflg flles LhaL
you have come across use Wlndows AuLhenLlcaLlon buL LhaL does llLLle good when we are dellverlng our appllcaLlon vla a
Webfaclng slLe assporL AuLhenLlcaLlon ls a cenLrallzed servlce provlded by and requlres reglsLraLlon wlLh MlcrosofL So for
our purposes we wlll be uslng lorms AuLhenLlcaLlon


lorms AuLhenLlcaLlon as lLs name suggesLs lndlcaLes Lo Lhe cllenL browser LhaL Lhe user musL clear a logln page prlor Lo
accesslng any resources on Lhe WebslLe

ASnL1 20 provldes several conLrols Lo handle Lhe bulk of our logln lssues a Logln SLaLus conLrol Lo lndlcaLe wheLher Lhe
user ls currenLly logged ln or logged ouL a CreaLeuserWlzard Lo allow Lhe user Lo creaLe a new accounL and a Logln conLrol
Lo acLually log lnLo Lhe sysLem wlLh Lhe newlycreaLed accounL Lach of Lhese ls handled by dragglng an approprlaLely named
conLrol onLo uefaulLASx

1he WebslLe AdmlnlsLraLlon 1ool or WA1 allows one Lo creaLe users and roles for use wlLhln an appllcaLlon ?ou can access
Lhls Lool by cllcklng on ASnL1 conflguraLlon under WebslLe ln vlsual SLudlo ?ou would subsequenLly cllck on Lhe SecurlLy
Lab Lo creaLe and manage users and roles for Lhe appllcaLlon

Would an A!Ax call work on a logln page where lorms AuLhenLlcaLlon ls hard aL work? 1he answer ls yes because Lhe
A!Ax call LhaL ls rendered on Lhe logln page ls open for anonymous usages as lL was dellvered as such ?ou wlll wanL Lo keep
Lhls ln mlnd should you wanL Lo use an A!Axenabled Lool on any logln / anonymous page Cenerally speaklng lf Lhe
anonymous user can see lL Lhe anonymous user can use lL

1he machlneconflg flle lnsLalled by Lhe nL1 20 lramework conLalns defaulL SCL Server provlder seLLlngs for membershlp
roles and proflles When you run Lhe ASnL1 conflguraLlon Lool from wlLhln vlsual SLudlo 2003 Lhese defaulL seLLlngs resulL
ln Lhe creaLlon of a local SCL Server Lxpress daLabase wlLhln Lhe App_uaLa folder of your WebslLe Lo sLore Lhe membershlp
role and proflle lnformaLlon ?ou may speclfy Lhe daLabase by Laklng advanLage of a uLlllLy program lncluded wlLh vlsual
SLudlo 2003 and maklng some mlnor modlflcaLlons Lo your WebConflg flle 1he flrsL sLep ls Lo run Lhe ASnL1_8LCSCLLxL
wlzard ln Lhe verslonnumber folder under Lhe lramework folder under MlcrosofLneL under Wlndows 1hls wlzard wlll lnsLall
Lhe Lables and sLored procedures necessary Lo hosL membershlp roles and proflles on Lhe daLabase of your cholce Cnce you
have conflgured your daLabase Lo supporL membershlp load Lhe Webconflg flle for your WebslLe lnLo Lhe edlLor ln vlsual
SLudlo 2003 and add a connecLlon sLrlng for your daLabase Lo Lhe connecLlonsLrlngs secLlon of your Webconflg flle nexL
copy Lhe SysLemWeb secLlon from Lhe machlneconflg flle and add lL Lo Lhe sysLemWeb secLlon of Lhe Webconflg flle
Change Lhe ASneLSqlMembershlprovlder ASneLSqlrofllerovlder and ASneLSql8olerovlder names Lo sulL your
envlronmenL Lhen modlfy Lhe connecLlonsLrlngname aLLrlbuLe Lo polnL Lo Lhe connecLlon sLrlng enLry ln Lhe Webconflg flle
LhaL you creaLed earller Cnce you have made Lhese changes save your Webconflg flle

ConLlnulng wlLh our conflguraLlon process we can now sLarL Lhe ASnL1 conflguraLlon Lool and cllck Lhe rovlder Lab Lo
access Lhe provlder seLLlngs Cllcklng Lhe llnk labeled SelecL a dlfferenL provlder for each feaLure (advanced) should allow you
Lo see your new membershlp provlder (under Lhe Membershlp rovlder secLlon) and your new role provlder (under Lhe 8ole
rovlder secLlon) Cllck Lhe radlo buLLon nexL Lo each of Lhe new provlders Lhen cllck Lhe 1esL llnk Lo verlfy LhaL Lhe
membershlp and role feaLures can access your daLabase ?ou have compleLed Lhe A!Ax and ASnL1 SecurlLy course ?ou
have learned how Lo lmplemenL securlLy ln A!Ax
Chapter 16

Welcome to the AJAX: PerIormance course. The dynamic user experience oI an AJAX-enabled site appears to be
one oI the most compelling reasons Ior choosing to implement this dynamic toolset. However, a postback-less
environment is secondary to the beneIits oI bandwidth reduction that are reaped through this new model oI
continuous user interaction. In a typical non-AJAX environment, a user-generated event (Ior example, clicking on a
"Buy It" button on a Web page) requires sending the entire Web page back, checking to see which values have
changed (generally, only one or two) and sending back the entire page. This constant swapping oI Iull (or nearly
Iull) pages can tax a server, particularly when asked to handle a multitude oI users. In an AJAX environment,
however, what gets sent to the server is only a 'minor' request just Ior a small portion oI a page with a
correspondingly minor response. This is Iar kinder to the server and scales Iar more readily. We will discuss
postback statistics and how they relate to AJAX data package sizes. We will also examine the beneIits oI JavaScript
Object Notation, or JSON, versus XML. inally, we will look at some key JavaScript concepts that may help to
optimize our processes.

Tracking any type oI site statistics requires having an application in place to monitor your activities. Most
developers and server admins Iind themselves really monitoring two distinct and important processes: server usage
and application events. Monitoring the events triggered by your Website involves debugging through Visual Studio,
which is covered in a separate course. Server usage, however, involves a Iew external tools that we will examine
here. The basic questions to be answered Ior server monitoring are: does the application kill the server; is the server
overwhelmed by requests, and how many applications are running on the server? The PerIMon (PerIormance
Monitor) utility provided with Windows is an easy way to monitor ASP.NET applications, as there are counters to
monitor general ASP.NET perIormance as well as counters to monitor speciIic ASP.NET applications.
SLIDE THREE:
Some oI the more useIul PERMON ASP.NET counters include the Iollowing:
O The Application Restart counter which monitors how many times your application has been restarted during
the liIe oI the server. II the application has an excessive number oI restarts an alarm should be raised and
investigations should ensue.
O The Requests Queued counter, which tracks the number oI users that are waiting in line Ior resources. II this
becomes proportional to the client load, it means that the server has reached its concurrency limit.
O The Requests Rejected counter, which is tracks the number oI times that the system simply cannot handle the
load and users are getting the "503 Server Busy" error. You hope that this counter never gets triggered
users that get a 503 error might never return to your site.
O The Worker Processes Running counter, which gives you an idea oI what IIS is processing at any given time.

PerIMon has a series oI ASP.NET Application counters, as well. The Anonymous Requests counter notes the total
number oI requests that are using anonymous authentication. The Errors Total counter speciIies the total number oI
errors during execution oI this HTTP requests. The Requests Bytes In Total counter tracks the total byte size oI all
requests. The Requests Bytes Out Total counter tracks the total byte size oI all responses sent back tot the client. The
Requests Total counter tracks the total number oI requests since the service was started. The Requests / Sec counter
tracks the total number oI requests received per second.

iddler is a Iree traIIic-monitoring tool that lets you see not only the HTTP session calls but also the underlying
HTML data that is pushed across the wire. Requests are displayed within iddler's HTTP Sessions window as they
are processed on your system.

The leIt panel oI iddler displays each streaming page hit, along with appropriate session inIormation, such as the
hostname, URL, response body size, and content type. The right side provides a tabbed interIace to view the request
/ response results in a number oI diIIerent ways. Clicking the Raw button lets you look at the raw text that was sent
and received.
You can use iddler to monitor the data that is passed back and Iorth during a session. or example, iI you build two
"identical" applications, one with postback and one with AJAX, that do nothing other than append a user-supplied
text string to "Hello" and return the augmented string, you can monitor the "postback session data" to see which
application is putting a greater load on the server. Some sample applications have shown a considerable diIIerence
as much as a seven-to-one (130 bytes vs 930 bytes) data load beneIit using AJAX as opposed to using the
traditional "postback" mechanism. What happens is that the AJAX application returns data in JavaScript Object
Notation (JSON) Ior evaluation into the display.

II your application is retrieving XML data Irom another source, continue to do so the CPU cycles required to
parse that XML into JSON would outweigh any beneIits that might be obtained during transIer. However, iI you are
retrieving or generating generic data Ior transIer to the client side, and Iind that you are not necessarily locked into
XML, you should consider using JSON data Iormat, as the actual JSON data Iile is smaller than the corresponding
XML. You have completed the AJAX: PerIormance course. You have learned techniques to optimize your AJAX
application.
Chapter 17

Welcome Lo Lhe A!Ax uebugglng ?our AppllcaLlon course uebugglng ls a dreaded buL necessary parL of creaLlng any
appllcaLlon MlcrosofL has lnLroduced some new debugglng funcLlonallLy wlLh vlsual SLudlo 2003 LhaL we wlll dlscuss here as
well as some LhlrdparLy Lools for debugglng ueeplevel debugglng (LhaL ls more Lhan flxlng an lncorrecLlynamed varlable or
flndlng a mlsslng semlcolon) can be a Ledlous chore We can Lake advanLage of some MlcrosofLprovlded enhancemenLs Lo
make Lhls parL of developmenL easler such as exlLandconLlnue debugglng vlsuallzers enhanced daLaLlps and [usL my
code debugglng

ln addlLlon Lo Lhe Lools provlded by vlsual SLudlo 2003 you may use Lwo free Lools from MlcrosofL Lo ald ln debugglng A!Ax
llddler avallable for download from wwwflddlerLoolcom and MlcrosofLs ueveloper 1oolbar avallable for download from
wwwmlcrosofLcom/downloads 1he comblnaLlon of vlsual SLudlo 2003 llddler and Lhe ueveloper 1oolbar wlll provlde you
wlLh a powerhouse of debugglng Lools Lo help you solve any problem your code may have

vlsual SLudlo now has Lhe ablllLy Lo pause Lhe appllcaLlon aL runLlme make changes and Lhen conLlnue where you lefL off
wlLhouL havlng Lo compleLely resLarL Lhe appllcaLlon from Lhe beglnnlng ?ou wlll need Lo enable Lhe LdlL and ConLlnue
opLlon by golng Lo Lhe 1ools menu selecLlng CpLlons openlng up Lhe uebugglng enLry on Lhe lefL slde of Lhe CpLlons dlalog
box and cllcklng on LdlL and ConLlnue CpLlons Lhere allow you Lo rellnk code changes afLer debugglng allow precomplllng
and Lo allow Lhe edlL and conLlnue feaLure Lo be lnvoked by debugglng commands (all of Lhese opLlons should be enabled)
Cnce you have seL and Lrlggered breakpolnLs ln your code you can LesL Lhe LdlL and ConLlnue feaLure by maklng changes and
Lhe presslng l3 or cllcklng ConLlnue ln Lhe uebug menu opLlons 1here are some llmlLaLlons Lo Lhe LdlL and ConLlnue
capablllLles however ?ou cannoL change Lhe currenL acLlve sLaLemenL or oLher acLlve sLaLemenLs (sLaLemenLs ln Lhe call
sLack LhaL were called Lo geL Lo Lhe currenL sLaLemenL) ?ou cannoL change global symbols or aLLrlbuLes ?ou cannoL remove
or change local varlables alLhough you may add local varlables

A vlsuallzer provldes a represenLaLlon of complex underlylng daLa and ls vlsual SLudlos aLLempL Lo perform auLomaLlc drlll
down and exLracLlon of Lhe daLa LhaL lles behlnd a column of daLa ln a daLa seL or an xML or P1ML represenLaLlon ?ou wlll
know LhaL a vlsuallzer ls avallable when you puL your mouse over a plece of daLa and you see a magnlfylng glass appear
Cllcklng on Lhe magnlfylng glass wlll cause Lhe daLa Lo appear lf Lhe daLa could be formaLLed ln one of several ways you wlll
have a cholce of vlsuallzers avallable slmply choose from Lhe llsL Lo formaL Lhe daLa approprlaLely Chooslng Lhe uaLa1able
vlsuallzer for example wlll brlng up Lhe column of Lhe currenL daLa

revlous verslons of vlsual SLudlo have allowed one Lo mouse over a varlable and recelve lnformaLlon on Lhe varlables value
uslng a feaLure known as a uaLa1lp lf Lhe varlable ls a complex daLa Lype you wlll flnd a plus slgn nexL Lo Lhe varlable
lndlcaLlng LhaL you can drlll down lnLo Lhe varlables properLles / values from wlLhln Lhe uaLa1lp lLself

1he !usL My Code debugglng opLlon avallable ln Lhe CpLlons menu under 1ools ln vlsual SLudlo means LhaL you wlll only
sLep Lhrough code you have wrlLLen (sysLemgeneraLed calls wlll be lgnored) ulsabllng Lhls opLlon means LhaL you wlll sLep
Lhough all calls sysLemgeneraLed or usercreaLed

We wlll dlscuss a couple of helpful LhlrdparLy Lools LhaL you may use Lo help ln debugglng your code Lhe llddler Lool and
Lhe MlcrosofL ueveloper 1oolbar

1he llddler producL avallable as a free download aL wwwflddlerLoolcom monlLors P11 Lrafflc and Lhe correspondlng
Lransferred daLa When llddler ls sLarLed lL wedges lLself and esLabllshes lLself as a proxy for Wlndows lnLerneL Servlces
Lhe P11 layer from whlch Wlndows draws lLs lnLerneL Lrafflc All Lrafflc Lo Lhe browser flows Lhrough lL flrsL allowlng lL Lo
monlLor and provlde sLaLlsLlcs on Lhe browsers daLa flow

?ou can use llddlers breakpolnL capablllLy Lo debug Lhe Lrafflc flowlng Lhrough llddler SelecLlng Lhe AuLomaLlc 8reakpolnLs
menu cholce under Lhe 8ules menu allows you Lo creaLe breakpolnLs whlch wlll elLher execuLe Lhe currenL sesslon and Lhen
sLop (8reak AfLer 8esponse) or execuLe Lhe currenL sesslon and move Lo Lhe nexL sesslon ln Lhe requesL cycle (8un Lo
CompleLlon)

MlcrosofLs ueveloper 1oolbar a free download lnsLalls ln lnLerneL Lxplorer and provldes a serles of seLLlngs Lo help wlLh
debugglng Lhe conLenLs of Web pages and appllcaLlons LhaL you develop 1he vlew uCM seLLlng leLs you vlew Lhe hlerarchy
of page elemenLs wlLhln Lhe uocumenL Cb[ecL Model (you can use Lhe Loolbar Lo flnd properLles of a glven elemenL by
enabllng Lhe SelecL LlemenL by Cllck opLlon Lhen cllcklng on Lhe lLem ln quesLlon) 1he lmages menu leLs you overlay an
lmage wlLh lLs properLles useful for calculaLlng lLs slze and resoluLlon for example 1he valldaLe menu leLs you valldaLe a
page agalnsL W3C sLandards 1he CuLllne menu ouLllnes Lables lndlvldual cells wlLhln a Lable or lmages 1he ulsable lL
SeLLlngs feaLure leLs you dynamlcally dlsable some of lLs feaLures such as lLs cache lLs scrlpLlng capablllLles or lLs popup
blocker ?ou have compleLed Lhe A!Axuebugglng ?our AppllcaLlon course ?ou have learned Lechnlques for debugglng your
appllcaLlon
Chapter 18

Your application needs to be designed in such a way that it will scale well to multiple site users and graceIully
degrade (turn users away) when it Iails to deliver pages as requested. The best way to determine its behavior is to
stress test the Web application. We will look at some mechanisms Ior doing that.

MicrosoIt's Web Application Stress Tool allows one to stress test a Web application by simulating a large number oI
requests Irom a small number oI machines. You may download the Web Application Stress Tool Irom the link
shown on the slide, or by entering Web Application Stress Tool into your Iavorite search engine.

The program comes with a pre-generated test case that you can use as a guideline Ior what the application can do.
However, we created a simple application in a prior course that compared AJAX and postback behavior, and we will
re-use that application here to perIorm stress testing in a high-traIIic environment. We will deploy the project to IIS.
II you open the supplied sample application, you can right-click the project name, select "Publish Web Site", then
click the ellipsis (three dots) button to create a new Web application called StressTest. Clicking Open, and then OK,
will build the application and cause it to deploy to IIS.

We will illustrate using the test suite by using it to test the sample application's postback page, then testing its AJAX
page. The Web Application Stress Tool generates a test report that you can use to compare the two "stress tests."

You can create a script to test the postback page by doing the Iollowing:
O Close Visual Studio, iI it is still open.
O Start the Web Application Stress Tool, and click its Record button. Leave the Iirst page oI options
unchecked, click Next (you will be warned that WAST will start recording at this point) and then click
inish.
O Enter the address oI the postback page into the browser window that comes up.
O Enter three names, clicking the Go button aIter each entry.
O Switch back to the WAST window and click Stop Recording.

Now that you have created the "stress test" script, you can test it out by doing the Iollowing:
O Click the green Run Script button in the WAST menu bar.
O Click View, then Reports, to view the application perIormance. Note the "Total Bytes Received" that's
how much data the server sent back to the client.
O The original "run" was done with one thread, simulating one user. Increasing the number oI concurrent
threads to 100 will "stress test" the application, shown by values other than 200 in the "Result Codes" area oI
the report.

Test the AJAX page by recording the script in the same way as you recorded the script Ior the postback page. Be
sure that you enter the URL Ior the AJAX page, generally DeIault2.aspx.

Now that you have created a script to test the AJAX page, you can test it in same way that you tested the postback
page, by clicking the green Run Script button in the Web Application Stress Test menu bar. AIter the script has run,
you will click Reports in the View menu to look at the resultant reports. Look at the Total Bytes Received (in the
"Socket Statistics" section oI the report) and compare it to the value in the postback report. Then, increase the
number oI concurrent sessions to 100, re-run, and look at both the Total Bytes Received and the Result Codes (see iI
there are any non-200 result codes, indicating some clients were turned away.) This concludes the AJAX and Site
Testing course. You have learned techniques to stress test your application.

Chapter 19

A!Ax as wlLh many Webbased Lechnologles has been lmplemenLed ln a surgeandplaLeau fashlon many developers
[umped on Lhe bandwagon Lhere was a surge ln Lhe lmplemenLaLlon and Lhere was a moderaLe and conLrolled usage of Lhe
Lechnology afLerwards lor example when !avaScrlpL (Lhe predecessor Lo A!Ax) flrsL appeared as a weapon ln Lhe browser
wars developers would use Lhe scrlpLlng language [usL for Lhe sake of uslng lL AfLer a few years archlLecLs and
admlnlsLraLors began Lo esLabllsh some conLrol and besL pracLlces surroundlng Lhe usage of !avaScrlpL A!Ax seems Lo be
followlng Lhe same paLLern so we wlll dlscuss some besL pracLlces wlLh worklng wlLh A!Ax Some of Lhese lssues may go
away as A!Ax llbrarles evolve and become more maLure over Lhe nexL few years

MosL pages LhaL use A!Ax suffer from Lhe problem LhaL Lhe server canL malnLaln sLaLe when Lhe user modlfles conLenL so
cllcklng on Lhe back buLLon generally glves one a page explred message Slnce Lhe purpose of Lhe 8ack buLLon ls Lo
provlde Lhe users a way Lo geL back Lo a prlor page on your slLe lL ls easy enough Lo sLore Web pages as Lhey are creaLed and
Lo provlde onslLe llnks Lo Lhose pages as you Lravel Lhrough Lhe slLe (a Lechnlque known as breadcrumb navlgaLlon) 1he
SCu1 Web slLe aL wwwspouLcom ls an example of a Web slLe LhaL uses a loL of A!Ax Lechnology and lncorporaLes
breadcrumb Lechnology Lo manage Lhls Cnpage navlgaLlonal alds help

1here has been an lnflux of A!Axenabled navlgaLlon menus popplng up on Lhe Web laLely 8ased upon user lnLeracLlon Lhe
A!Ax lmplemenLaLlon dynamlcally reLrleves a seL of page llnks and bullds Lhls lnLo a pagelevel user conLrol Cne such slLe ls
8eLfalr (wwwbeLfalrcom) an onllne sporLs beLLlng porLal 1hls slLe uses A!Ax Lo dynamlcally bulld lLs navlgaLlonal menu
sysLem Search englnes wlll have a dlfflculL Llme lndexlng and splderlng Lhe slLe whlch may or may noL be a bad Lhlng
dependlng upon your perspecLlve WlLhouL a seL of llnked u8Ls complled lnLo Lhe page Lhere ls a good chance LhaL nesLed
pages wlll never be found by Lhe world

1ypeahead search boxes can be a greaL feaLure buL can become a scalablllLy nlghLmare lf used lmproperly Some Lhlngs Lo
keep ln mlnd when uslng Lypeahead search boxes are llsLed below llrsL donL search on Lhe keyup evenL lnsLead Lry
lmplemenLlng a !avaScrlpL LlmeouL LhaL checks Lhe currenL LexLbox Lo see lf Lhe value has changed slnce Lhe prevlous search
and only hlL Lhe daLabase lf Lhe value has changed 1hls can drasLlcally cuL down on Lhe amounL of Web server and daLabase
Lrafflc ?ou should also sLore Lhe currenL search resulLs Lo malnLaln a vlable seL of prevlous daLa ln memory As Lhe user Lypes
values ln Lhe search box new search resulLs are generaLed Powever lf Lhe user presses Lhe 8ACkSACL key raLher Lhan
maklng a new call Lo Lhe daLabase Lo reLrleve alreadygeneraLed resulLs Lhe appllcaLlon should slmply redlsplay Lhose
alreadygeneraLed resulLs lnsLead of maklng anoLher call Lo Lhe daLabase 1he beneflLs become apparenL when you scale ouL
Lo a few Lhousand users

?ou have learned LhaL you cannoL bookmark pages wlLh dynamlcally generaLed A!Ax conLenL 1hls can be a problem lf you
wanL Lo forward Lhls lnformaLlon on Lo oLhers ?ou wlll have Lo evaluaLe how lmporLanL lL ls for vlslLors Lo your slLe Lo be able
Lo bookmark your slLes dynamlc Web conLenL lf Lhey need Lo so do use u8L rewrlLlng Lo generaLe posLbacks (someLlmes
known as permallnks) Lo provlde a permanenL llnk LhaL can be bookmarked or forwarded Lo oLhers ?ou wanL Lo make lL
easy for users Lo hlL Lhe pages LhaL maLLer

lf you have a dynamlc conLrol on your slLe LhaL modlfles conLenL LhaL anoLher conLrol consumes you wlll need Lo make sure
LhaL Lhe Lwo conLrols are connecLed lor lnsLance lf you have a conLrol LhaL allows Lhe user Lo add an lLem Lo a shopplng carL
you wlll wanL Lo make sure LhaL any carLllsLlng conLrol on Lhe page ls updaLed Lo reflecL Lhe new lnformaLlon ?ou may need
Lo sLeer away from A!Ax funcLlonallLy ln Lhls slLuaLlon Make sure LhaL your conLrols expllclLly updaLe / refresh Lhemselves so
LhaL Lhe user does noL have Lo manually refresh Lhe page Lo see Lhe updaLed daLa

8eLween 6 and 10 percenL of browsers have !avaScrlpL dlsabled accordlng Lo Lhe World Wlde Web ConsorLlum ?our
appllcaLlon should provlde some means have gracefully handlng Lhls slLuaLlon such as snlfflng ouL a !avaScrlpLdlsabled
browser and puLLlng up a message lndlcaLlng LhaL !avaScrlpL musL be enabled ln order Lo use Lhe slLe ?es lL does add Lo Lhe
developmenL overhead buL lL ls worLhwhlle Lo accommodaLe 10 percenL of poLenLlal cusLomers / users 1here are varlous
Lechnlques Lo handle Lhe dlsabllng of !avaScrlpL on a WebslLe

lL ls one Lhlng Lo reposlLlon page conLenL because Lhe user has asked for new daLa or lf Lhe user has physlcally relocaLed a
Web arL buL an auLorefresh of Lhe page should noL cause reposlLlonlng of conLenL on Lhe Web page As a general rule you
should noL modlfy Lhe user experlence wlLhouL user permlsslon A!Ax glves you LhaL capablllLy and mlsuse of LhaL can
cause your user Lo geL so frusLraLed ln uslng Lhe slLe LhaL Lhe user can leave Lhe slLe and never reLurn uynamlcally shlfLlng
and reposlLlonlng conLenL wlll cause Lhe user Lo lose Lhe users place or poslLlon on Lhe Web page so lf you need Lo
reposlLlon conLenL walL unLll Lhe user has Lrlggered an evenL (such as cllcklng on a buLLon or a llnk) before dolng so

Cmall (Coogle Mall) provldes a good lmplemenLaLlon of A!AxsLyle Lechnology 1he slLe provldes many dynamlc acLlvlLles LhaL
a user may Lrlgger and recelve noLlflcaLlon onscreen LhaL someLhlng ls happenlng Many A!Axenabled slLes have good
funcLlonallLy bullL lnLo lnLeresLlng A!Axenabled conLrols LhaL provlde llLLle or no vlsual means of lnformaLlon Lhe user LhaL
an acLlvlLy ls occurrlng lf a user posLs a commenL Lo a Web slLe or Web log uslng an A!Axenabled LexLbox and cllcks on
SubmlL Lhe user wlll become dlscouraged lf noLhlng happens lmmedlaLely Cmall addresses Lhls wlLh a popup Loadlng or
Worklng box ln Lhe corner of Lhe browser lnformlng Lhe user LhaL Coogle has recelved Lhe requesL and LhaL lL ls belng
processed ?ou should also asslgn vlsual cues Lo daLa LhaL have been changed on a page lor example lf you have posLed
lnformaLlon on an A!Axenabled commenL box Lhe server slde wlll sLore LhaL lnformaLlon and forward Lhe new seL of
commenLs Lo Lhe browser for dynamlc dlsplay 1haL lnformaLlon should be reflecLed ln some feedback on Lhe commenLs llsL
1he ?ellow lade 1echnlque ls a useful one here change Lhe background on new commenLs or oLher modlfled
lnformaLlon Lo pale yellow Lhen gradually fade Lhe background back Lo Lhe orlglnal color 1hls genLly noLlfles Lhe user LhaL
Lhe conLenL has changed

8e aware LhaL your !avaScrlpL code wlll be avallable for Lhe world Lo see unless you scramble lL lf you have senslLlve
corporaLe daLa bullL lnLo Lhe cllenL slde be aware LhaL Lhe world ls waLchlng lL ls always a good ldea Lo separaLe your loglc
and presenLaLlon layers 1he vulnerablllLy of vlslble !avaScrlpL code should go away wlLh ASnL1 20s ablllLy Lo precomplle
Lhe slLe provldlng LhaL developers use lL accordlngly

use a clear head when decldlng when Lo use A!Ax and when noL Lo 1here are acLlvlLles and evenLs LhaL our users wlll Lrlgger
LhaL wlll necesslLaLe a posLback versus a dynamlc page updaLe lor example lf one ls fllllng ouL a form for slLe membershlp
one expecLs Lo cllck on a SubmlL buLLon and be noLlfled of Lhe resulLs 1here are deflnlLlve slLuaLlons where you wlll flnd LhaL
lL ls [usL loglcal Lo do a posLback raLher Lhan an A!Ax call [usL because you can AlLhough we are Leachlng you how Lo use
A!Ax here should noL Lry Lo force A!Ax onLo every page and every lnLeracLlon

1here ls no governlng unlversal sLandard for A!Ax Lermlnology lf Lhere were Lhere would be a slngle call LhaL one could
make LhaL would work across all browsers Slnce LhaL doesnL exlsL you have Lo go Lhrough Lhe sLeps LhaL are llsLed here on
Lhe sllde 1hese sLeps mlghL be handled for you lf you are uslng an A!Ax llbrary buL Lhey have Lo be handled

lf you are uslng a llbrary LhaL supporLs sesslon sLaLe varlables ln Lhe A[ax calls use lL only as needed lL ls a nlce ablllLy Lo have
buL unless you have a real need Lo use Lhe conLrol values you may be beLLer off [usL sLlcklng Lo lnpuL parameLers raLher Lhan
posLlng an A!Ax call wlLh a huge page sLaLe lncluded ?ou wlll malnLaln Lhe ablllLy Lo use a posLbackless page updaLe buL
posLlng an A!Ax call wlLh a huge page sLaLe wlll cause your bandwldLh Lo reap zero rewards for your A!Axed page Cnly use
sLaLe when needed

Chapter 20

Welcome to the ATLAS discussion. We will talk about ATLAS MicrosoIt's Ioray into combining the AJAX and
ASP.NET technologies and illustrate how we can use this technology to bring AJAX into the desktop world.

The Atlas library is more than just dynamic Web controls and packaged scripting. MicrosoIt's primary goal Ior
ATLAS is to integrate client script Ieatures with the Ieatures oI ASP.NET on the server to provide a comprehensive
development platIorm. Key Ieatures oI Atlas include automatic browser capability (maintaining consistency oI code
against ireIox, SaIari and Internet Explorer), Object-oriented API in JavaScript, and controls that appear similar to
the desktop controls in Windows, declarative scripting (similar to other ASP.NET controls) and a variety oI scripting
layers that provide Iramework capabilities with ASP.NET Web applications.

You will need to download the latest and greatest version oI AJAX Irom the ATLAS Web site at ATLAS.ASP.NET.
You will need to download two Iiles the ASP.NET 2.0 AJAX extensions and the ASP.Net AJAX Control
Toolkit.

The installation oI Atlas creates several JavaScript Iiles in the ScriptLibrary Iolder. These Iiles are at the heart oI the
Atlas library and will be available to use through the Atlas Iramework. The AtlasRuntime.JS Iile is the basic script
that you use to enable Atlas Ieatures. It is a bare-bones script Iile that you will implement when you need minimal
Atlas capabilities. The Atlas.JS Iile is the "Iull-deal" Iile, which includes the Atlas runtime and Iull-Ieature pack.
When you add an Atlas Script Manager, you will include this Iile by deIault. The AtlasCompat.JS and
AtlasCompat2.JS Iiles provide cross-browser compatibility Ior Atlas Ieatures. You will use the AtlasX.JS Iile iI
you are building gadgets in a hosted environment. It has the same content as the Atlas.JS Iile but is lacking the
AtlasRuntime.JS coding.
O The AtlasUIDragDrop.JS Iile provides drag and drop Iunctionality.
O The AtlasUIGlitz.JS Iile provides user interIace special eIIects.
O The AtlasUIMap.JS Iile provides virtual mapping Iunctionality.
O The AtlasWebParts.JS script provides Web parts Iunctionality.
O The GadgetRuntime.JS runtime script is used by MicrosoIt and by MSN.

The Atlas UpdatePanel is similar to the AJAXPanel supplied by MagicAJAX.NET (a Ireeware alternative available
at www.magicajax.net). The UpdatePanel allows you to encapsulate AJAX Iunctionality Ior controls that are nested
within its bounds. IN the example shown here, we have a button and a text string. Clicking on the button causes the
date to be recalculated and reIreshed, using AJAX without the entire page having to be reIreshed. The UpdatePanel
will probably be one oI the most popular Atlas controls, as it will allow developers to add AJAX Iunctionality to
pre-existing ASP.NET pages without a huge amount oI additional code.

You can test this out by building a "standard" non-Atlas application Irom the supplied Iiles. You will need to create
a new WebSite project, add a DropDownList control to DeIault.aspx and connect to the AdventureWorks data
source. You should create a custom SQL string, oI the Iorm "SELECT DISTINCT * Irom person.stateprovince
where countryregioncode 'US' ", change the DropDownList value so that the Name is displayed and that the
StateProvinceID is retained as the Value property. Make sure that the EnableAutoPostBack property is checked on
the DropDownList options on your page.

Test the application by clicking on the play button (labeled Start Debugging), accept the Web.ConIig additions, and
make sure that you have a drop-down list with a set oI regional data. Stop debugging aIter you have tested the
application. Now, drag a GridView control onto the page just below the Iirst drop-down list, add a new SQL data
source, re-use the existing data connection, and add a custom SQL data string to get the customer ID, store name,
postal code and state Ior the appropriate stores. We are not interested in doing any kind oI updates on the GridView,
so we will not worry about the UPDATE, INSERT and DELETE tabs. SpeciIy that the data value Iield Irom the
DropDownList will be the provider Ior the state ID, and enable paging and sorting or the GridView options

Ajax Iunctionality Ior current page is managed by relocating the GridView into the UpdatePanel and using the
triggers~ tag to speciIy that when the SelectedIndex has been changed, inIormation needs to be sent back using
AJAX. In order to use the UpdatePanel, we will need to enable 'partial page rendering.' Partial page rendering lets
the server know that the page will have an updatable region, and the UpdatePanel will be that updatable region.
Controls that are dynamically updated on the client side sit between ContentTemplate tags.

The Atlas AutoCompleteBehavior class provides text completion Iunctionality. Since Atlas has much oI its
capabilities encapsulated within the Iramework, we need only provide basic inIormation Ior our application to
perIorm the autocomplete. The Atlas class makes heavy use oI Web services as the data provider Ior the control,
while with AJAX , you had more Ilexibility Ior your data provider. This concudes the AJAX: Atlas course. You
have learned about MicrosoIt's Atlas technology.