Welcome!

Cloud Expo Authors: Sue Poremba, Pat Romanski, Elizabeth White, Patrick Burke, Jeremy Geelan

Related Topics: AJAX & REA, .NET

AJAX & REA: Article

Google Maps! AJAX-Style Web Development Using ASP.NET

Taking asynchronous Web forms to the next level
By Vishwas Lele
Article Rating:
June 1, 2006 11:45 AM EDT
Reads:
 158,478

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

I have three goals in this article. First, I want to provide a high-level overview of AJAX-style applications. My second goal is to provide a detailed description of asynchronous callback features of ASP.NET 2.0. Finally, I want to provide an insight into upcoming enhancements of tools and frameworks for building AJAX-style applications.

AJAX-style Web applications exhibit the following characteristics:

  • Asynchronous requests made to the Web server. The browser user interface is not blocked while waiting for a response from the Web server. The browser can continue to respond to user interaction while awaiting a server response.
  • High dependence on browser-based logic written in JavaScript. Recent enhancements to and standardization of the W3C DOM provide support for dynamic client-side updates to UI.
  • Exchange of nonpresentation XML-based data between the browser and the Web server. The XMLHttp object makes it possible to communicate with the Web server without the need to reload the page.
The big difference between an AJAX application and a traditional Web application is that every user interaction does not result in an HTTP request being sent to the Web server. Instead, browser-based logic implemented in JavaScript receives control that, in turn, decides whether to handle the request locally or to make an asynchronous call to the server. Upon the completion of the asynchronous call to the server, the client-side logic appropriately updates the relevant sections of the UI. This approach provides the following benefits:
  • The user experience is richer. For example, when a Google map user drags the map in one direction, an asynchronous request is made to the server in the background, to continue to fetch tiles beyond the edge of the screen. This way when the user drags the map further, the new image is readily available. This creates a perception of a speedier response.
  • Since the state is not lost across XMLHttp-based calls to the server, AJAX applications can avoid rerendering the UI widgets each time.
  • More logic residing in the browser reduces the number of roundtrips to the Web server, thereby improving the overall latency of the system.
For all the pros, AJAX-style applications have a number of cons associated with them as well. AJAX-style development is difficult because of the absence of framework (a collection of UI classes similar to the MFC toolkit for Windows) and IDE support (i.e., debugging, visual designers, etc.). One has to know at least two languages well (DHTML and JavaScript). Further, AJAX-style applications take longer to code because of the additional testing required to support multiple browser versions and types. Finally, as the JavaScript-based source is accessible to the end user, threat analysis becomes very important.

Fortunately, the arrival of things such as Atlas, AJAX.NET, and the Google Maps API etc. is a sign of better support for building AJAX-style applications in the future. In the next section, we will look into how the support for building AJAX applications is evolving over time and what to expect from the newly announced toolkits such as Atlas.

Let's start with the XMLHttp object, which was introduced by Microsoft and later implemented on other platforms including Mozilla and Apple's Safari browser. XMLHttp enables asynchronous requests to the Web server, which allows Javascript- based logic on the client to call the Web server without the need to reload the page.

In other words, it is possible to have interaction with the Web server in the background without causing a page reload - a side effect of the exchange between the browser and the Web server.

Using the XMLHttp object is straightforward. For the sake of simplicity, let's just consider IE specific syntax. The syntax for XMLHttp implementations on other browsers is similar. 


request = new ActiveXObject("Microsoft.XMLHTTP");
if (request)
{
    request.onreadystatechange = CallbackHandler;
    request.open("GET", URL, true);
    request.send();
}

function CallbackHandler()
{
      if ((request.readyState == 4) && (request.status == 200)
      {
            string response =  request.responseXML;

            // Update the relevant sections of the UI

      }
}
In the code snippet shown above, the first step is to instantiate the Microsoft.XMLHttp class. Next, we set the properties on the XMLHttp instance we just created, including the address of callback function that will get control when the XMLHttp request is complete. The callback function address is needed because we are making asynchronous calls to the server (an intent conveyed by setting the third parameter on the open method call to true). Inside the implementation for the callback function, we make additional checks to make sure that the request is complete.

Published June 1, 2006 – Reads 158,478
Copyright © 2006 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

More Stories By Vishwas Lele

Vishwas Lele is a principal architect at Applied Information Sciences (www.appliedis.com), a system and software engineering company specializing in .NET-based solutions. Vishwas also serves as the MSDN Regional Director for the Washington, DC area.

Comments (17) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

Most Recent Comments
Shabdar 03/25/08 11:57:26 AM EDT

If you are looking for Google Maps control for ASP.Net visit following link,

http://www.shabdar.org

This is a free open source control.
Steve 06/02/06 11:11:07 AM EDT

The title of the article is misleading. I see no mention of Google Maps in the content of the article in regards to ASP.NET.

I applaud the editors for coming up with such innovatively misleading bait to entice them to read the entire article, and all the embedded ads. Bravo!
AJAX News Desk 06/01/06 11:59:33 AM EDT

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
SYS-CON India News Desk 05/31/06 12:50:59 PM EDT

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
SYS-CON Italy News Desk 05/31/06 12:20:35 PM EDT

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
AJAX News Desk 05/31/06 11:49:13 AM EDT

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
not amused 02/23/06 03:57:06 AM EST

unreadable text thanks to floating add that is impossible to close
Sanjay Gupta 02/21/06 04:41:58 PM EST

Great explaination of the article.
I appreciate it!

Sanjay
SYS-CON Italy News Desk 02/19/06 05:53:45 PM EST

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
news 12/23/05 04:31:18 PM EST

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
SYS-CON UK News Desk 12/23/05 02:32:15 PM EST

Google Maps! Ajax-Style Web Development Using ASP.NET
In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
AJAX News Desk 12/23/05 11:41:04 AM EST

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
AJAX News Desk 12/23/05 10:42:12 AM EST

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
Mike 11/14/05 02:21:56 PM EST

I am interested in Geo fencing...would any of the above technologies enable the development of a Google map which has geo fencing capabilities?

Thanks for any input,

Mike
News Desk 10/20/05 11:17:56 PM EDT

Google Maps! AJAX-Style Web Development Using ASP.NET. In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
.NET News Desk 09/08/05 12:58:07 PM EDT

AJAX-Style Web Development Using ASP.NET
In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.
Mark Petersen 09/07/05 10:22:23 AM EDT

The AJAX.NET URL is not correct.

I believe what you are looking for is:
http://ajax.schwarz-interactive.de/csharpsample/default.aspx

This library works in ASP.NET 1.1 as well.
Cloud Expo Breaking News
By Pat Romanski
Nearly every enterprise is evaluating cloud computing solutions either today or in the near term. Many have already made the leap, and many more are getting close to putting that first toe in the water. But there are key considerations that should be made, questions to be asked, and designs to consider before you can feel secure with your provider. In his session at the 10th International Cloud Expo, David Gulick, Product Manager, Hosting Product Management at Savvis, will help give you food f...
May. 16, 2012 03:06 PM EDT  Reads: 311
By Jeremy Geelan
With Cloud Expo 2012 New York (10th Cloud Expo) now under four weeks away, what better time to introduce you in greater detail to the distinguished individuals in our incredible Speaker Faculty for the technical and strategy sessions at the conference... We have technical and strategy sessions for you dealing with every nook and cranny of Cloud Computing, but what of those who are presenting? Who are they, where do they work, what else have they written and/or said about the Cloud that is t...
May. 16, 2012 02:30 PM EDT  Reads: 4,411
By Liz McMillan
SYS-CON Events announced today that Super Micro Computer, Inc., a global leader in high-performance, high-efficiency server technology and green computing, will exhibit at SYS-CON's 10th International Cloud Expo, which will take place on June 11–14, 2012, at the Javits Center in New York City, New York. Supermicro (NASDAQ: SMCI), the leading innovator in high-performance, high-efficiency server technology, is a premier provider of advanced server Building Block Solutions for Embedded Systems, E...
May. 16, 2012 02:15 PM EDT  Reads: 343
By Pat Romanski
SYS-CON Events announced today that ScaleMP, a leading provider of virtualization solutions for high-end computing, will exhibit at SYS-CON's 10th International Cloud Expo, which will take place on June 11–14, 2012, at the Javits Center in New York City, New York. ScaleMP is the leader in virtualization for high-end computing, providing maximum performance and lower total cost of ownership (TCO). The innovative Versatile SMP (vSMP) architecture aggregates multiple independent systems into a sin...
May. 16, 2012 12:00 PM EDT  Reads: 620
By Elizabeth White
Come learn real-world examples where cloud and mobile are changing the way business works and the impact they're having on efficiency and productivity. In his session at the 10th International Cloud Expo, Rodrigo Coutinho Senior Product Marketing Manager at OutSystems, will look at how mobile and the cloud are interwoven and the wave of change these two 2012 megatrends will bring to your organization. He will also provide a roadmap to assure you can navigate this sea change for business succes...
May. 16, 2012 11:58 AM EDT  Reads: 327
By Pat Romanski
Enterprise IT organizations want to deploy a virtualized data center fabric that will provide the foundation for agile private cloud computing. Getting there does not have to be difficult, but it does require a new approach to data center infrastructure design – an approach that is non-disruptive, vendor-agnostic, and very adaptable to changing business requirements. In his session at the 10th International Cloud Expo, Bruce Fingles, Chief Information Officer and VP of Product Quality at Xsigo...
May. 16, 2012 10:30 AM EDT  Reads: 1,578
By Jeremy Geelan
With Cloud Expo 2012 New York (10th Cloud Expo) now under four weeks away, what better time to introduce you in greater detail to the distinguished individuals in our incredible Speaker Faculty for the technical and strategy sessions at the conference...
May. 16, 2012 10:15 AM EDT  Reads: 1,361
By Liz McMillan
Whether you are a large enterprise, a growing business, a government organization, or a service provider, Cloud Expo New York is THE place you need to be June 11-14...so you can better understand both the provision and use of the cloud services that increasingly transforming IT and business alike. Cloud Expo covers every aspect of Cloud Computing: performance, integration, security, availability, compliance, purchasing, budgeting, development, visibility, automation...the works!
May. 16, 2012 10:00 AM EDT  Reads: 782
By Pat Romanski
How can businesses harness the power of APIs to reach new customers and markets? In his session at the 10th International Cloud Expo, Alistair Farquharson, CTO at SOA Software, will walk the audience through the growth and evolution of the API, why effective API management is important, and how the game changes when companies expose business applications to the outside world. He will also discuss: A brief history of the API How to use APIs to make money, save money, build brand "Appificatio...
May. 16, 2012 10:00 AM EDT  Reads: 646
By Jeremy Geelan
With Cloud Expo 2012 New York (10th Cloud Expo) now under four weeks away, what better time to introduce you in greater detail to the distinguished individuals in our incredible Speaker Faculty for the technical and strategy sessions at the conference...
May. 16, 2012 10:00 AM EDT  Reads: 4,920
MORE »