AJAX is an acronym for Asynchronous JavaScript and XML. If you think it doesn’t say much, we agree. Simply put, AJAX can be read “empowered JavaScript”, because it essentially offers a technique for client-side JavaScript to make background server calls and retrieve additional data as needed, updating certain portions of the page without causing full page reloads. The next figure offers a visual representation of what happens when a typical AJAX-enabled web page is requested by a visitor.
 |
Figure 1-4 A Typical AJAX Call
When put into perspective, AJAX is about reaching a better balance between client functionality and server functionality when executing the action requested by the user. Up until now, client-side functionality and server-side functionality were regarded as separate bits of functionality that work one at a time to respond to user’s actions. AJAX comes with the solution to balance the load between the client and the server by allowing them to communicate in the background while the user is working on the page.
To explain with a simple example, consider web registration forms where the user is asked to write some data (such as name, e-mail address, password, credit card number, etc) that has to be validated before being used by the server-side code of your application. There are three important ways to implement this:
1. Let the user type all the required data, let him or her submit the page, and perform the validation on the server. If the validation doesn’t succeed, the server sends back the form, asking the visitor to correct the invalid entries. In this scenario the user experiences a dead time after submitting the form, while waiting for the new page to load.
2. Do the validation at the client side, using JavaScript. This way, the user is told about invalid data, and he or she can correct the invalid entires, before submitting the form. However this technique only works for very simple validation that doesn’t require additional data from the server while the user is filling the form in. Also, it doesn’t work with proprietary or secret validation algorithms that can’t be transferred to the client in the form of JavaScript code.
3. Use AJAX form validation so that the web application can validate the entered data by making server calls in the background, while the user keeps typing. For example, after the user types the first letter of the city, the web browser calls the server to load the list of cities that start with that letter, without interrupting the user’s current activity.
The situations where AJAX can make a difference are endless. Here are just a few of them:
Windows Local Live (
http://local.live.com): Microsoft maps service equivalent to other similar services offered by Google (Google Maps –http://maps.google.com) and Yahoo (Yahoo Maps –http://maps.yahoo.com).Flickr (
http://flickr.com/): “the best way to store, search, sort and share your photos”.PageFlakes (
http://pageflakes.com): “your personalized start page with news, photos, music, bookmarks, blogs, weather and much more”.Google Suggest (
http://www.google.com/webhp?complete=1): a Google query autocompletion feature that helps you with your Google searches. Similar functionality is offered by Yahoo! Instant Search, accessible athttp://instant.search.yahoo.com/.GMail (
http://www.gmail.com): a very popular service by now and doesn’t need any introduction. Other web-based email services such as Yahoo! Mail and Hotmail have followed this trend and offer AJAX-based interfaces.Digg (
http://www.digg.com): This is a hugely popular social bookmarking website featuring community-powered content.
So AJAX is about creating more versatile and interactive web applications by enabling web pages to make asynchronous calls to the server transparently while the user is working. AJAX is a tool that web developers can use to create smarter web applications that behave better than traditional web applications when interacting with humans.
The technologies AJAX is made of are already implemented in all modern web browsers, such as Mozilla Firefox, Internet Explorer, Opera, or Safari, so the client doesn’t need to install any extra modules to run an AJAX website. AJAX is made up of the following:
JavaScript is the essential ingredient of AJAX, allowing you to build the client-side functionality. In your JavaScript functions you’ll make heavy use of the Document Object Model (DOM) to manipulate parts of the HTML page.
The XMLHttpRequest object enables JavaScript to access the server asynchronously, so that the user can continue working, while functionality is performed in the background. Accessing the server just involves a simple HTTP request for a file or script located on the server. HTTP requests are easy to make and don’t cause any firewall-related problems.
Except for the simplest applications, a server-side technology is required to handle requests that come from the JavaScript client. In this book, we’ll use ASP.NET to perform the server-side part of the job.
Note
 |
None of the AJAX components is new, or revolutionary (or even evolutionary) as the current buzz around AJAX might suggest. The newest AJAX component is XMLHttpRequest, which was released by Microsoft in 1998. The name “Ajax” was born in 2005, in Jesse James Garret’s article at
http://www.adaptivepath.com/publications/essays/archives/000385.php
, and gained much popularity when used by Google in many of its applications. You can read more on the history of AJAX at
http://en.wikipedia.org/wiki/AJAX
.
What’s new with AJAX is that, for the first time, there is enough energy in the market to encourage standardization and define a clear direction of evolution. As a consequence, many AJAX frameworks are being developed, and many AJAX-enabled websites have appeared. Microsoft through its ASP.NET AJAX project is pushing AJAX development as well.
For client-server communication, the JavaScript client code and the ASP.NET server-side code need a way to pass data and understand that data. Passing the data is the simple part. The client script accessing the server (using the XMLHttpRequest object) can send name-value pairs using GET or POST. It’s very simple to read these values with any server script.
The server script simply sends back the response via HTTP, but unlike with a usual website, the response will be in a format that can be simply parsed by the JavaScript code on the client. The two popular formats are XML and JavaScript Object Notation (JSON), both of which will be introduced in Chapter 3.
This book assumes that you are already familiar with the AJAX ingredients, except maybe the XMLHttpRequest object, which is less popular. However, to make sure that we’re all on the same level, we’ll have a look together at how these pieces work, and how they work together, in Chapter 2. Until then, for the remainder of this chapter we’ll focus on the big picture, and we will write an AJAX program for the joy of the most impatient readers.
As noted earlier, AJAX can improve your visitors’ experience with your web site, but it can also worsen it when used inappropriately. In the vast majority of cases, AJAX is best used in addition to the traditional web development paradigms, rather than changing or replacing them.
For example, unless your application has really special requirements, it’s wise to let your users navigate your content using the good, old hyperlinks. Web browsers have a long history of dealing with content navigation, and web users have a long history of using browsers’ navigational features.
Let’s quickly review the potential benefits AJAX can bring to your projects:
It makes it possible to create better and more responsive web applications.
It encourages the development of patterns and frameworks, such as ASP.NET AJAX, that help developers avoid re-inventing the wheel when performing common tasks.
It makes use of existing technologies and features supported by all modern web browsers.
It makes use of many existing developer skills.
Potential problems with AJAX are:
Using AJAX for the wrong purposes. Increased awareness of usability, accessibility, web standards and search engine optimization will help you make better decisions when designing and implementing web sites.
You can’t easily allow for bookmarking AJAX-enabled pages. Typically AJAX applications run inside a web page whose URL doesn’t change in response to user actions, in which case you can only bookmark the entry page. It is possible to enable bookmarking by dynamically adding page anchors using your JavaScript code, such as in
http://www.example.com/my-ajax-app.html#Page2. You also need to create supporting code that loads and saves the state of your application through the anchor parameter.The Back and Forward buttons in browsers don’t produce the same result as with classic web sites, unless your AJAX application is programmed to support loading and saving states.
Search engines cannot index content dynamically generated by JavaScript in an AJAX application, because they don’t execute any JavaScript code when indexing the web site. If search engine optimization is important for your web site, you shouldn’t use AJAX for content delivery and navigation.
JavaScript can be disabled at the client side, which makes the AJAX application non-functional.
To enable AJAX page bookmarking and the Back and Forward browser buttons, you can use frameworks such as Really Simple History by Brad Neuberg (
http://codinginparadise.org/projects/dhtml_history/README.html
), or Nikhil Kothari’s UpdateHistory control for ASP.NET AJAX (
http://www.nikhilk.net/UpdateControls.aspx
).
Following the popularity of AJAX, a large numbers of AJAX-enabled frameworks and toolkits have been developed, including common features and offering great, tested features. Max Kiesler (
http://www.maxkiesler.com/
) has put a list of such products on his weblog, but in reality there are many more. Some are server-agnostic, while others are specifically created for ASP.NET, Java, PHP, Coldfusion, Flash and Perl backends. Among the most popular server-agnostic toolkits are Dojo (
http://dojotoolkit.org
), Prototype (
http://prototype.conio.net), and script.aculo.us (
http://script.aculo.us
).
As far as ASP.NET developers are concerned, their main choice—strongly promoted by Microsoft—is ASP.NET AJAX. Another popular choice is Ajax.NET Professional—developed by Michael Schwartz (
http://www.ajaxpro.info
).
ASP.NET AJAX (
http://ajax.asp.net/
), initially known only by its code name, Atlas, is a powerful AJAX framework written by Microsoft for ASP.NET developers. ASP.NET AJAX includes a wealth of tested functionality allowing you to build solid, cross-browser AJAX-based interfaces.
ASP.NET AJAX is a complex framework which includes AJAX-enabled ASP.NET server controls, as well as a very powerful client-side library. The native integration with Visual Studio .NET 2005 allows the developer to build rich internet applications (RIA) that are built upon the .NET 2.0, .NET 3.0, and .NET 3.5 frameworks without forcing the end user to have anything installed on the client.
The world of ASP.NET AJAX is composed of:
1. Microsoft AJAX Library. This is a powerful client-side Javascript library that offers a common API for all modern browsers, and supports any backend web technology. In theory at least, you can use the Microsoft AJAX Library with a PHP or Java server script. In practice, the Microsoft AJAX Library is really meant to be used togehter with its server-side companion from the ASP.NET AJAX Extensions. Keep an eye on Jay Kimble’s Java integration project for Microsoft AJAX Library at
http://www.codeplex.com/dtajax/, and on the PHP integration athttp://www.codeplex.com/phpmsajax.2. ASP.NET AJAX Extensions includes the Microsoft AJAX Library, and also a set of server-side AJAX-enabled controls that integrate well with that library (
ScriptManager,UpdatePanel,Timer,UpdateProgress, andAsyncPostbackTrigger). At installation the product integrates with Visual Studio 2005 so that you can access its controls through the Visual Studio Toolbox, and will be included into the next version of Visual Studio, which at the time of writing this book is code-named Orcas.3. The ASP.NET AJAX Control Toolkit is a set of free, shared source controls and components that help you get the most value from the ASP.NET AJAX Extensions. At the time of writing this book, the control toolkit is still under development, and it isn’t part of the 1.0 release of ASP.NET AJAX. However, it will ship together with Visual Studio “Orcas”.
This book is dedicated to the first of these three parts of ASP.NET AJAX. We’ll cover the Microsoft AJAX Library in detail, and by end of it you’ll be able to masterfully use its features at their full potential.
Note
|
The Microsoft AJAX Library is the kind of technology that’s easy to start with, but as you dwelve into its details, you’ll notice that its complexity requires a longer learning curve than you may expect. In our opinion, there aren’t any real shortcuts to this process: you need to understand the foundations of this framework very well before you can be efficient with it.
Understanding the Microsoft AJAX Library also requires a good knowledge of JavaScript and its object-oriented model. In theory, working with an API only requires knowledge of that API’s publicly exposed features. In practice however, dealing with a JavaScript framework—especially one that is young and sometimes imperfect—frequently requires an understanding of the details of its inner workings. Sooner or later, you’ll be tempted to open the source code of the Microsoft AJAX Library. This is not something that you’d expect from a C# library, but we’re dealing with a different kind of “monster” here.
The first part of this book will cover the basics of AJAX with JavaScript and ASP.NET, without involving the Microsoft AJAX Library. You will find that you can implement simple AJAX features by hand, simply coding the necessary asynchronous server calls yourself. Then we’ll set the ground for ASP.NET AJAX by teaching the more advanced features of JavaScript, such as prototypes and closures.
If you already understand the theory of JavaScript and its interaction with ASP.NET, feel free to skip to Chapter 4. However, we advise you to look at Chapters 2 and 3 so that we’re on the same level when we meet again in Chapter 4.
Finally, here are a few places that may help you in your journey into the exciting world of AJAX. For starters, here are a few useful generic AJAX resources:
http://www.ajaxian.comis the AJAX website of Ben Galbraith and Dion Almaer, the authors of Pragmatic Ajax (Pragmatic Bookshelf, 2006).http://ajaxpatterns.orgis an informative website about AJAX design patterns, and the home page of Ajax Design Patterns by Michael Mahemoff (O’Reilly, 2006).http://www.fiftyfoureleven.com/resources/programming/xmlhttprequestis a comprehensive collection of articles about AJAX.http://www.sitepoint.com/subcat/javascriptis Sitepoint’s AJAX home, featuring some excellent articles.http://developer.mozilla.org/en/docs/AJAXis Mozilla’s page on AJAX.http://en.wikipedia.org/wiki/Ajaxis the Wikipedia page on AJAX.
This list is by no means complete. If you need more online resources, search engines will surely be available for help. For specific information on ASP.NET AJAX and related technologies, we recommend that you visit the following resources from time to time—ideally by subscribing to their RSS or Atom feeds:
|
Blogger or Resource Name |
URL |
|---|---|
|
Atlas team | |
|
Dino Esposito | |
|
Eilon Lipton | |
|
Alessandro Galo | |
|
Jay Kimble | |
|
Luis Abreu | |
|
Nikhil Kothari | |
|
Steve Marx |