Channels ▼
RSS

Tools

Timing Out XMLHttpRequest Calls in IE8



The XMLHttpRequest (XHR) object is at the foundation of AJAX and a native object in nearly all Web browsers available today. The programming interface of the object is largely based on the first released example of it, which dates back to 1999 when Microsoft released it as an ActiveX control bundled with Internet Explorer 5.

XMLHttpRequest is a de-facto standard, though. A standard specification is still in the works at W3C and the latest working draft was released about one year ago, in the Spring of 2008.

Two key features are not currently comprised in the standard being developed at W3C-- cross-site calls and timeout. Both of them are being discussed a lot and will probably make the way into the official standard pretty soon. In Internet Explorer 8, both of these features find full support. In particular, client-side cross-site calls happen through a new object built from the ground up to make it secure and easy. The object is named XDomainRequest.

As far as the timeout of plain XHR requests is concerned, Internet Explorer 8 also comes to help with a new property -- the timeout property.

Support for timeout during client-side Web calls is so important that it is frankly surprising that only Internet Explorer 8 provides a native support for it. With the timeout property you can specify for how long (in milliseconds) the client has to wait for a response to come before aborting the connection. This simple feature is beneficial in a number of ways and it is especially helpful in relation to the limited number of connections that can exist between the browser and the server. Before Internet Explorer (and Firefox 3) the number of concurrent connections was limited to 2, increased to 6 now. The ability to set a timeout enables the browser to reuse connections more quickly and often. The browser doesn't have to wait for a dead connection but can reuse it after a specified number of milliseconds.

In Internet Explorer 8, you use the timeout property as shown below:


var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.timeout = 5000;

The timeout property defaults to 0, meaning that no timeout applies to the request unless you explicitly set it. The timeout property is read/write and affects only the instance of the XHR object it is defined on. It is recommended that you choose the timeout value carefully and opt for a value longer than the ideal maximum response time to make up for unexpected latency. When a request times out, the response is null and this is fully reflected by response properties on XHR such as responseText.

When the request times out, an event is fired to the JavaScript environment for you to handle and instruct the client code on what to do. The event is ontimeout and it is demonstrated below.


var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.timeout = 5000;
xhr.ontimeout = onRequestTimeout;
xhr.send( ... );

The timeout callback doesn't get any parameter and it is a mere notification.

It is worth mentioning again that the timeout property is not referred to any standard and is currently only offered by Internet Explorer 8. Is this really a problem? Well, not exactly.

Most of the JavaScript code used in Web sites today is based on client-side libraries such as jQuery and Microsoft AJAX Library. Both libraries fully support timeout in their respective wrappers for the XHR object. The timeout property in Internet Explorer 8 just makes it easier for libraries to implement the feature in future releases. It is a breaking change for developers only if developers are coding AJAX directly against the XHR object -- a not-so-common scenario these day.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video