Click here to close now.



Welcome!

IoT User Interface Authors: Martin Etmajer, Anders Wallgren, Jason Bloomberg, David Bermingham, Jayaram Krishnaswamy

Related Topics: IoT User Interface, Microsoft Cloud

IoT User Interface: Article

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

Taking asynchronous Web forms to the next level

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.

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.

@CloudExpo Stories
Predictive analytics tools monitor, report, and troubleshoot in order to make proactive decisions about the health, performance, and utilization of storage. Most enterprises combine cloud and on-premise storage, resulting in blended environments of physical, virtual, cloud, and other platforms, which justifies more sophisticated storage analytics. In his session at 18th Cloud Expo, Peter McCallum, Vice President of Datacenter Solutions at FalconStor, will discuss using predictive analytics to ...
Let’s face it, embracing new storage technologies, capabilities and upgrading to new hardware often adds complexity and increases costs. In his session at 18th Cloud Expo, Seth Oxenhorn, Vice President of Business Development & Alliances at FalconStor, will discuss how a truly heterogeneous software-defined storage approach can add value to legacy platforms and heterogeneous environments. The result reduces complexity, significantly lowers cost, and provides IT organizations with improved effi...
The cloud promises new levels of agility and cost-savings for Big Data, data warehousing and analytics. But it’s challenging to understand all the options – from IaaS and PaaS to newer services like HaaS (Hadoop as a Service) and BDaaS (Big Data as a Service). In her session at @BigDataExpo at @ThingsExpo, Hannah Smalltree, a director at Cazena, will provide an educational overview of emerging “as-a-service” options for Big Data in the cloud. This is critical background for IT and data profes...
SYS-CON Events announced today that Men & Mice, the leading global provider of DNS, DHCP and IP address management overlay solutions, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. The Men & Mice Suite overlay solution is already known for its powerful application in heterogeneous operating environments, enabling enterprises to scale without fuss. Building on a solid range of diverse platform support,...
Father business cycles and digital consumers are forcing enterprises to respond faster to customer needs and competitive demands. Successful integration of DevOps and Agile development will be key for business success in today’s digital economy. In his session at DevOps Summit, Pradeep Prabhu, Co-Founder & CEO of Cloudmunch, covered the critical practices that enterprises should consider to seamlessly integrate Agile and DevOps processes, barriers to implementing this in the enterprise, and pr...
Sensors and effectors of IoT are solving problems in new ways, but small businesses have been slow to join the quantified world. They’ll need information from IoT using applications as varied as the businesses themselves. In his session at @ThingsExpo, Roger Meike, Distinguished Engineer, Director of Technology Innovation at Intuit, showed how IoT manufacturers can use open standards, public APIs and custom apps to enable the Quantified Small Business. He used a Raspberry Pi to connect sensors...
Data-as-a-Service is the complete package for the transformation of raw data into meaningful data assets and the delivery of those data assets. In her session at 18th Cloud Expo, Lakshmi Randall, an industry expert, analyst and strategist, will address: What is DaaS (Data-as-a-Service)? Challenges addressed by DaaS Vendors that are enabling DaaS Architecture options for DaaS
SYS-CON Events announced today that Avere Systems, a leading provider of enterprise storage for the hybrid cloud, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. Avere delivers a more modern architectural approach to storage that doesn’t require the overprovisioning of storage capacity to achieve performance, overspending on expensive storage media for inactive data or the overbuilding of data centers ...
SYS-CON Events announced today that Catchpoint Systems, Inc., a provider of innovative web and infrastructure monitoring solutions, has been named “Silver Sponsor” of SYS-CON's DevOps Summit at 18th Cloud Expo New York, which will take place June 7-9, 2016, at the Javits Center in New York City, NY. Catchpoint is a leading Digital Performance Analytics company that provides unparalleled insight into customer-critical services to help consistently deliver an amazing customer experience. Designed...
With the proliferation of both SQL and NoSQL databases, organizations can now target specific fit-for-purpose database tools for their different application needs regarding scalability, ease of use, ACID support, etc. Platform as a Service offerings make this even easier now, enabling developers to roll out their own database infrastructure in minutes with minimal management overhead. However, this same amount of flexibility also comes with the challenges of picking the right tool, on the right ...
SYS-CON Events announced today that Alert Logic, Inc., the leading provider of Security-as-a-Service solutions for the cloud, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. Alert Logic, Inc., provides Security-as-a-Service for on-premises, cloud, and hybrid infrastructures, delivering deep security insight and continuous protection for customers at a lower cost than traditional security solutions. Ful...
SYS-CON Events announced today that Interoute, owner-operator of one of Europe's largest networks and a global cloud services platform, has been named “Bronze Sponsor” of SYS-CON's 18th Cloud Expo, which will take place on June 7-9, 2015 at the Javits Center in New York, New York. Interoute is the owner-operator of one of Europe's largest networks and a global cloud services platform which encompasses 12 data centers, 14 virtual data centers and 31 colocation centers, with connections to 195 ad...
Recognizing the need to identify and validate information security professionals’ competency in securing cloud services, the two leading membership organizations focused on cloud and information security, the Cloud Security Alliance (CSA) and (ISC)^2, joined together to develop an international cloud security credential that reflects the most current and comprehensive best practices for securing and optimizing cloud computing environments.
Companies can harness IoT and predictive analytics to sustain business continuity; predict and manage site performance during emergencies; minimize expensive reactive maintenance; and forecast equipment and maintenance budgets and expenditures. Providing cost-effective, uninterrupted service is challenging, particularly for organizations with geographically dispersed operations.
SYS-CON Events announced today that Commvault, a global leader in enterprise data protection and information management, has been named “Bronze Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Commvault is a leading provider of data protection and information management...
SYS-CON Events announced today that VAI, a leading ERP software provider, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. VAI (Vormittag Associates, Inc.) is a leading independent mid-market ERP software developer renowned for its flexible solutions and ability to automate critical business functions for the distribution, manufacturing, specialty retail and service sectors. An IBM Premier Business Part...
It's easy to assume that your app will run on a fast and reliable network. The reality for your app's users, though, is often a slow, unreliable network with spotty coverage. What happens when the network doesn't work, or when the device is in airplane mode? You get unhappy, frustrated users. An offline-first app is an app that works, without error, when there is no network connection.
With an estimated 50 billion devices connected to the Internet by 2020, several industries will begin to expand their capabilities for retaining end point data at the edge to better utilize the range of data types and sheer volume of M2M data generated by the Internet of Things. In his session at @ThingsExpo, Don DeLoach, CEO and President of Infobright, will discuss the infrastructures businesses will need to implement to handle this explosion of data by providing specific use cases for filte...
In most cases, it is convenient to have some human interaction with a web (micro-)service, no matter how small it is. A traditional approach would be to create an HTTP interface, where user requests will be dispatched and HTML/CSS pages must be served. This approach is indeed very traditional for a web site, but not really convenient for a web service, which is not intended to be good looking, 24x7 up and running and UX-optimized. Instead, talking to a web service in a chat-bot mode would be muc...
More and more companies are looking to microservices as an architectural pattern for breaking apart applications into more manageable pieces so that agile teams can deliver new features quicker and more effectively. What this pattern has done more than anything to date is spark organizational transformations, setting the foundation for future application development. In practice, however, there are a number of considerations to make that go beyond simply “build, ship, and run,” which changes ho...