A for Ajax, Part 8: The XMLHttpRequest object (Part 3)

In this post we modify the XHR Library. This is now capabale of:
•  working with GET and POST requests
•  handling JSON formatted text and XML documents returned by the server
•  handling timeouts, and aborting requests

You can read the full article here.

India Leadership Forum 2010

Early in Feb, a colleague and I, sponsored by our company, attended Nasscom’s NILF 2010 at Mumbai. To say the least, it was a wonderful experience. Nasscom has uploaded most of the video recordings of the sessions here. And you can read their blogs, which provide a synopsis of the various sessions, here.

Many industry heavy weights were speakers, but, IMHO, the academicians stole the show at this meet with their very incisive insight into the future. Their presentations were lucid and masterful. I list below some of the sessions I attended. I urge you to go through these presentations.

Building a Learning Organisation by David Garvin, Harvard Business School
synopsis: http://indialeadershipforum.nasscom.in/blog/2010/02/building-a-learning-organisation-workshop-by-prof-garvin/

Expect (and welcome) the unexpected - a new approach to strategy by Lynda Gratton, London Business School
synopsis: http://indialeadershipforum.nasscom.in/blog/2010/02/expect-and-welcome-the-unexpected/
presentation: start with the video labeled Session VI B1 here.

Lynda Gratton also held a work shop titled Get Set Go…Building Organizations With a Vision.

Standing out in the crowd: what’s your differentiator? by Deepak Jain, Kellogg School of Management
synopsis: http://indialeadershipforum.nasscom.in/blog/2010/02/standing-out-in-the-crowd-what%E2%80%99s-your-differentiator/
presentation: start with the video labeled Be a Phoenix 1 here.

Is innovation a priority in challenging times? by MS Krishnan, University of Michigan
presentation: start with the video labeled New Age of Innovation 1 here.

The new rules of marketing and PR by David Meerman Scott, Freshspot LLC
presentation: start with the video labeled New Rules of Maketing and PR 3 here.

Some words that we heard across the sessions - innovation, eco-systems, demographics, culture, value systems, cloud - summed up the focus of this meet.

A for Ajax, Part 8: The XMLHttpRequest object (Part 2)

Part 2: Aborting a request, caching of dynamic data, handling timeouts - some of the things we need to watch out for when using the XMLHttpRequest object

In Part 1 we saw that using the XMLHttpRequest object is easy; however there are a few things we need to watch out for.

To begin with we modify Country.htm to add a ‘refresh’ button to the country dropdown from the example in Part 1. This results in the following interface:

As in the example in Part 1, the windows.onload event calls the GetAllCountries() function which populates the country dropdown with Country data after the page has loaded. Clicking the refresh button calls the GetAllCountries() function which re-populates the country dropdown.

In this post we will discuss the following questions:
What happens if the user was to click the refresh button before the request from the windows.onload event returned?
What happens if the user was to click the refresh button indiscriminately?
How do we avoid the bad effects of such actions?
How do we cancel a request once it has been sent?
How can we ensure that dynamic data is not cached by the browser?
How can we recover if a request never returns after it has been sent?

By the end of this discussion we should have a fairly robust, reusable library to handle asynchronous GET requests through the XMLHttpRequest object.

You can read the full article here.

A for Ajax, Part 8: The XMLHttpRequest object

Part 1: Asynchronous and Synchronous requests

“The XMLHttpRequest object is a data transport object that is the core of AJAX. XMLHttpRequest was introduced in 2000, mainly to enable Microsoft Outlook Web Access to display e-mails without notification. Since then, AJAX applications have gained popularity for their ability to asynchronously exchange data with a server and then display that data without having to reload the Web page on which the data appears.” [from MSDN]

The XMLHttpRequest object establishes the communication between the browser and the server over HTTP. As the video below illustrates, it is possible to setup multiple simultaneous requests bringing about a huge improvement in user experience.

In a serious Ajax based web application, you will probably be using an established javascript library, such as jQuery, which will abstract the use of the XMLHttpRequest object in efficient cross browser capable methods.

In this, and in subsequent posts, we will examine the nitty gritty of the XMLHttpRequest object.

You can read this article online here.

Code download:
You can download the example code here. This code helps you to test out the XMLHttpRequest object in an asynchronous mode. The article has details on how to set up the application.

Download the full video here [XMLHttpExample_FullVideo.rar, 384 KB] or here [XMLHttpExample_FullVideo.zip, 4.4 MB].

A for Ajax, Part 7: DOM Events

Events make a web page interactive.

Most events occur when a user interacts with the UI – for example, when a user selects a value from the dropdown list; there are others that occur due to programmatic processing of the document – for example, the load event is raised when the document fully loads in the browser.

The W3C Working Draft and the W3C Recommendation describe an event model around the following:
1. an event object: this contains contextual information about the event.
2. an event target: this is the element on which the event occurs.
3. an event listener: this implements a function that knows how to respond to an event when it occurs on the target.
4. the life cycle of the event object through its capture, target and bubble phases.

The IE model describes a similar model:
1. an event object: this contains contextual information about the event.
2. a source element: this is the element on which the event occurs.
3. an event handler: this is a function that knows how to respond to an event when it occurs on the source element.
4. the life cycle of the event object through its target and bubble phases.

You can read this article online here.

Code download:
You can download the DOMEvents.zip here. This code describes the events discussed in this article in more detail.
You can download the DOMNavigation_Enhanced.zip here. The tree representation of the DOM from the last post can now be collapsed/expanded using events.

A for Ajax, Part 6: The Document Object Model [DOM]

What is the DOM?
The W3C Recommendation defines it as: “The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.”

What can be done with the DOM?
From the W3C Recommendation: “With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions..”

You can read the article online here.

Code download
You can download the DOMNavigation.zip here. The JavaScript code has examples of:
-navigating and manipulating the DOM
-object detection
-a way to create a tree representation of the DOM. We will improve upon this code in our next post on DOM events

A for Ajax, Part 5: Object Oriented JavaScript, JavaScript libraries

JavaScript is the glue that makes Ajax work. It is the only language through which we can create Ajax enabled front-ends.

As ASP.NET developers, our approach when we need to use JavaScript in our applications is to ‘Google, copy and paste’, with some modifications, if required. But Ajax enabled web applications are serious applications and require a much better understanding of the language.

Ray Djajadinata in Create Advanced Web Applications With Object-Oriented Techniques writes: “Indeed, until recently, I’d always been able to get by with whatever little JavaScript I knew, armed only with the MSDN DHTML reference and my C++/C# experience. It was only when I started working on real-world AJAX applications that I realized how inadequate my JavaScript actually was. The complexity and interactivity of this new generation of Web applications requires a totally different approach to writing JavaScript code. These are serious JavaScript applications! The way we’ve been writing our throwaway scripts simply doesn’t cut it anymore.”

And continues: “I didn’t learn JavaScript of my own volition. I had to pick it up quickly because I realized that I was ill-prepared to work on a real-world AJAX application without it. At first, I felt like I had gone down a few levels in the programmer hierarchy. (JavaScript! What would my C++ friends say?) But once I got over my initial resistance, I realized that JavaScript was actually a powerful, expressive, and compact language. It even boasts features that other, more popular languages are only beginning to support.”

JavaScript’s object-oriented approach is different then a conventional object-oriented language such as C#. However it brings to your applications the same advantages you derive from a conventional OO language. OO Javascript may seem quirky at first, but as you get up to speed, you begin to appreciate its awesome power. You also realise the discipline required so you don’t abuse its power.

For complex projects, it is best to use a JavaScript library. JavaScript libraries extend Javascript to make it even more powerful. A few examples:
• ExtJS provides you with an excellent collection of controls for the front end.
• Microsoft’s Ajax Library extends JavaScript “objects to give them the richness of .NET Framework classes”.
• jQuery is important for ASP.NET developers if only because Mirosoft will be using it in a big way in ASP.NET 4.0.

For those on the ASP.NET platform, knowing how to use the Microsoft’s Ajax Library and JQuery would certainly be an asset.

Further reading
General:
JavaScript
A re-introduction to JavaScript
Code Conventions for the JavaScript Programming Language

Microsoft:
Microsoft AJAX Library namespaces
jQuery and Microsoft

Books
JavaScript:
David Flanagan, JavaScript: The Definitive Guide, 5th Edition, Wiley Publishing, Inc., ISBN-13: 978-0596101992
Douglas Crockford, JavaScript: The Good Parts, O'Reilly Media, Inc., ISBN-13: 978-0596517748
Stoyan Stefanov, Object-Oriented JavaScript, Packt Publishing Ltd., ISBN-13: 978-1847194145
Ross Harmes and Dustin Diaz, Pro JavaScript Design Patterns, Apress, ISBN-13: 978-1590599082

jQuery:
Bear Bibeault and Yehuda Katz, jQuery in Action, Manning Publications, ISBN-13: 978-1933988351
Jonathan Chaffer andKarl Swedberg, Learning jQuery, Packt Publishing Ltd., ISBN-13: 978-1847192509
Jonathan Chaffer andKarl Swedberg, jQuery Reference Guide, Packt Publishing Ltd., ISBN-13: 978-1847193810

ExtJS:
Shea Frederick, Colin Ramsay and Steve 'Cutter' Blades, Learning Ext JS, Packt Publishing Ltd., ISBN-13: 978-1847195142

Video links (from Mix 11):
Mix 11