CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

This is an excerpt of Chapter 1 from the book, ASP.NET 3.5 AJAX Unleashed, authored by Rob Foster, published by SAMS as part of the Unleashed Series, ISBN 0672329735, Copyright 2009 by Pearson Education, Inc. Please visit www.informit.com/sams for more info or Safari Books Online subscribers can access the book here: http://my.safaribooksonline.com/9780768680539.

Chapter 1: Introduction to AJAX Technologies

In This Chapter

• AJAX and Web 2.0
• Why Use AJAX?
• AJAX: An Example
• Using the AJAX Library

If you’ve purchased this book, you probably are interested in AJAX technologies. If you are not familiar with the technology or are new to AJAX, it is important that you take some time and understand where AJAX fits into the big picture of web development. This section helps bring you up to speed with AJAX’s place in your web development toolbox.

One problem with the design of web pages (especially ASP.NET web pages) is that to refresh the data on the page, it must postback to the server. This causes the page to flicker while the page is posting, and then the page is reloaded in the browser with the results of the post. You can view the amount of data with tools such as IEHTTPHeaders and HTTPWatch. You will quickly notice that the amount of information getting posted is quite sizeable because ASP.NET applications not only postback the controls, but also post the page’s ViewState. Although the technique of a postback works, it creates a lot of traffic over the wire and inherently reduces the overall scalability of your application.

Asynchronous JavaScript and XML (AJAX) is a development pattern that you can use to provide your users with a much richer user experience in your web applications. Simply stated, AJAX allows you to asynchronously load data into pieces of a page on demand instead of loading the whole page each time data is requested.

An example of where a user experience can be enhanced by AJAX is a web page that contains related dropdown boxes. For example, say that you have a web page that supplies information on cars in which a user must select the year, make, and model of his car from dropdown boxes on the page. When a user selects a year, she populates all makes for a selected year in the make dropdown box. Additionally, when a user selects a make of car, the models dropdown is populated with models for a given year and make.

If you use traditional ASP.NET without AJAX, you will probably set the AutoPostBack property of your dropdowns to true and the page will postback (and flicker) when your user makes selections on the page.

Conversely, if you use AJAX, data can be loaded asynchronously into the list boxes as the user makes selections on the page. This is much more efficient because only the data being requested will travel in the request to the server, which could be as simple as a query string appended to the end of a page request. Also, the page will not flicker as the user makes selections in the dropdowns because the post actually is happening in the background.

---

Note – An example of AJAX is described later in the chapter.

---

AJAX and Web 2.0

Web 2.0 is a term (or rather buzzword) that you often hear when describing most “modern” web sites; however, it shouldn’t be a new concept to web developers. Web 2.0 is actually a consolidation of many existing technologies that allows you to provide a rich interactive user experience over the web. Examples of Web 2.0 technologies include, but aren’t limited to, the following areas:

• Rich Internet Applications (RIAs), which include AJAX, Adobe Flash, Silverlight, and Moonlight
• Web services
• Blogs
• Wikis
• Social networking
• Social bookmarking
• RSS/Atom

Before the Web 2.0 movement began on the Internet, web pages often focused solely on providing the user with data. The user would simply request a page, view the page, request another page, view that page, and so on.

In contrast, the patterns and techniques behind Web 2.0 are all about the user experience with the web: AJAX and web services for rich, efficient user experiences, blogs, wikis, social networking, and social bookmarking for collaboration, and RSS/Atom so that users can “subscribe” to data.

As technologies such as AJAX evolve and are adopted in large scale on the web, Web 2.0 techniques are quickly becoming the expected user experience for the web. Mainstream examples of AJAX include the Google-based applications, such as Google’s Maps, Docs, and Calendar, as well as Microsoft-based applications, such as Hotmail, and Windows Live-based applications. As users start utilizing these types of applications in their everyday lives, they will come to expect the same type of functionality in the applications you develop.

Why Use AJAX?

As stated previously in this chapter, you can use AJAX to help provide a rich user experience. Of all the new, cool techniques and technologies that are available in Web 2.0 and rich Internet applications, AJAX is clearly the most widely used today. Should you use AJAX simply because it’s cool? The short answer is “No,” which is explained in the next section.

AJAX Rationale

Although the user experience that results from AJAX development patterns is a much richer experience, the rationale for utilizing AJAX is the total amount of traffic that is reduced from users accessing your web pages. When you have a web application with a large user base, using AJAX significantly increases the scalability of the application due to the amount of web traffic that is reduced every time a page is loaded.

The following list gives advantages and disadvantages of AJAX:

Advantages

• Reduced page bandwidth
• Load page data on demand
• Service-based approach to web development
• Rich user experience

Disadvantages

• Unexpected browser functionality (when the user clicks the back or refresh button)
• Business logic can exist in the JavaScript
• Difficult to test with automated tools

Although this book highlights and focuses on the advantages of AJAX, several disadvantages should be noted. The first thing your users will notice is that when they click the refresh or back button in the browser, the page has a possibility of losing its state when the page reloads. This is a result of dynamically loading data on demand (which was one of the advantages of AJAX).

The second disadvantage of AJAX that you will see in the development world is actually JavaScript. You might wonder that if AJAX is initiated from client-side JavaScript, how can JavaScript be a disadvantage? The answer is that JavaScript eventually will be considered a disadvantage for AJAX in your web applications. Over time, you will be quite shocked at the amount of JavaScript that is required (which is an evolution throughout the lifecycle of your application) for AJAX functionality in your application. It will start out very small and clean, but can quickly spiral out of control.

From the architecture perspective, there is not a clean way to reverse-engineer JavaScript into an architecture model. An architecture document will probably define how a page should function, and there could be thousands of lines of JavaScript behind the scenes to enable this functionality. Depending on your environment and Software Development Lifecycle (SDLC), this could become a problem because it is very difficult to validate the JavaScript against the architecture models.

The third (and certainly not the last) disadvantage is the potential difficulty of testing AJAX functionality with automated tools. For example, Visual Studio Team Suite (VSTS) 2005 had limited support for AJAX when creating web tests. This problem was easily circumvented with tools such as Fiddler (http://www.fiddlertool.com/fiddler/), which helps you capture AJAX requests, which then can be loaded into the VSTS Web Test. It is important to note that these issues have been resolved in VSTS 2008.

This section is designed not to scare you away from AJAX, but to create an awareness of things that can affect you and your AJAX development experience. Best practices and warnings are highlighted in upcoming chapters so that you can be aware of the pitfalls that can show up in your applications.

In the next section, you learn the basics of implementing AJAX in your applications.

AJAX: An Example

Now that you understand the advantages and disadvantages of AJAX, it is helpful to learn about the code behind AJAX requests. This section introduces an example of using AJAX and JavaScript Object Notation (JSON).

The XMLHttpRequest object

The main object behind AJAX is the XMLHttpRequest object. This object exposes functionality that allows you to send and receive data (usually XML-based, but not required) from client-side JavaScript code to a server page.

XMLHttpRequest has six methods, listed in Table 1.1, and seven properties, listed in Table 1.2.

Deep knowledge of the capabilities of the XMLHttpRequest object’s properties and methods is required learning for any AJAX developer. At its core, every library that encapsulates AJAX functionality (ASP.NET AJAX, AJAX.NET, Yahoo YUI, and so on) uses the XMLHttpRequest object.

The next section defines a simple AJAX JavaScript library that can be used to make AJAX calls in your web applications.

Table 1.1  XMLHttpRequest Methods

Abort

getAllResponseHeaders

getResponseHeader

headerName

Open

method, url
method, url, async
method, url, async,
   username
method, url, async,
   username, password

Send

Content

DOMString

Document

setRequestHeader

label, value

Table 1.2  XMLHttpRequest Properties

onreadyStatechange

readyState

responseText

responseXML

responseBody

Status

statusText