CODE Magazine - Article: Better AJAX Development with Internet Explorer 8 Beta 2

Reader rating:
Click here to read 2 comments about this article.
Article source: CoDe (2008 - Vol. 5 - Issue 3 - IE8)

Article Pages: 1 2 3 - Next >

Better AJAX Development with Internet Explorer 8 Beta 2

Internet Explorer 8 Beta 2 provides a programming model for AJAX (Asynchronous JavaScript and XML) development that is simpler yet more powerful than ever before, spanning browser, Web page, and server interaction. You’ll be able to build pages that are faster and more functional, with better end-user experiences. Plus, the APIs Microsoft has added to Internet Explorer 8 Beta 2 are based on the World Wide Web Consortium (W3C) HTML 5.0 or Web Applications Working Group standards.

Inside this article, you’ll find information on all of the AJAX enhancements available in Internet Explorer 8 Beta 2.

In Internet Explorer 8 Beta 2, the maximum number of concurrent connections from a single host process connecting via broadband to a single server has been increased from 2 to 6.

These include tools to improve performance and client-side state management: local storage APIs, AJAX navigations, increased connections per host (plus a way to detect the number of connections on a host), and a scriptable connectivity event.

We’ve also worked on enhancing our communication objects and protocols. For example, safer and easier cross-domain communication is now possible through the XDomainRequest object and the W3C’s Access Control draft, as well as HTML 5.0’s cross-document messaging.

For up-to-the minute information on AJAX and other technologies in Internet Explorer, visit the Internet Explorer Developer Center at http://www.msdn.com/ie.

AJAX Navigations

One of the great benefits of implementing AJAX-indeed, one of the main reasons for its existence-is the ability to update page content without navigating to a new page. With this convenience, though, come drawbacks that can confuse users. On an AJAX-heavy page, the Address bar is not updated with each update. Subsequently, the "travelog," or browsing history, isn’t updated either.

As an example, consider a mapping Web site such as Windows Live™ Search Maps or Google Maps. When using the AJAX-enabled features of those applications-such as pan and zoom-neither the Address bar nor the travelog is updated. Users who are used to the Address bar changing with each new page they navigate to or who rely on the browser’s Back and Forward buttons to navigate back and forth a page at a time may find this jarring. While some Web sites work around this limitation by navigating a hidden IFrame when updating content through AJAX, this technique can decrease performance.

To enable AJAX navigations, Internet Explorer 8 Beta 2 in IE8 mode (the default compatibility mode) treats updates to the window.location.hash property like individual, "traditional" navigations. When the hash property is updated, the previous document URL (which may be from the previous hash fragment) is updated in the Address bar and the travelog (and therefore the Back button). At the same time, a new hashChanged event is raised and the hash URL fragment is saved before navigating away from the page.

On AJAX-enabled pages that take advantage of this new functionality, when AJAX content changes, navigation is as seamless as usual, but the user can back up and go forward as if the AJAX navigation was a traditional navigation. The markup sample in Listing 1 demonstrates a use for this new functionality. In this case, the hash property is set when the onendzoom event of the Microsoft® Virtual Earth™ map control occurs. In other words, every time the user zooms in or out, the Address bar and travelog are both updated, enabling the user to navigate back and forth between zoom levels by using the Back and Forward buttons.

Every time the user zooms in or out, the fragment identifier in the Address bar is updated, as shown in Figure 1. On this page, that simply means the integer after the number sign (#) is incremented.

Click for a larger version of this image.

Figure 1: With each AJAX navigation, the fragment identifier (the integer at the end) is incremented.

DOM Storage

To store data on local machines, Web sites today often use the document.cookie property. However, cookies are limited in their capabilities; sites can only store fifty key/value pairs per domain, and the cookie programming model requires parsing the entire cookie string for data. DOM Storage objects-specified in the W3C’s HTML 5 Working Draft and implemented in Internet Explorer 8 Beta 2-provide a much simpler and more flexible global and session storage model for structured data on the client side.

Consider this scenario: A user is trying to find the best pair of tickets for a popular concert on an online ticketing site. For that purpose, the user opens several windows to make multiple requests, just to see the best seats she can get. If the site’s application is using cookies to store its session state, information could "leak" from one transaction into the other, potentially causing the user to purchase seats that she didn’t want without noticing. The potential for this sort of information "leak" becomes even more widespread as applications become more capable of offline behaviors, such as storing values locally for later return to the server, and as people start using more tabs to connect to the same Web site in parallel.

DOM Storage offers essential differences from cookies. For one, it offers significantly more available disk space than cookies. In Internet Explorer, cookies can store 4 kilobytes (KB) of data, whereas DOM Storage provides about 10 megabytes (MB) for each storage area. Furthermore, DOM Storage doesn’t transmit values to the server with every request as cookies do, and data in a global store never expires. Unlike cookies, it’s easy to access individual pieces of data using an interface that is supported in Internet Explorer 8 Beta 2 and other browsers, and sites can choose to store data for the life of a tab or until the site or the user clears the data.

The following JavaScript snippet introduces the DOM Storage property localStorage by using it to create a store and then setting (setItem method), getting (getItem method), and removing an entry (removeItem method), plus clearing the store entirely (clear method).

// Store a key-value pair.
localStorage.setItem("Sean","Purcell");

// Retrieve value string for a given key.
var storeditem = localStorage.getItem("Sean");

// Remove item from store.
localStorage.removeItem("Sean");

// Clear the store.
localStorage.clear();

Now let’s see DOM Storage in action. Listing 2 is a code sample that will present you with a page (shown in Figure 2) with a text box and two buttons. Type something in the text box and then click Send to Store. This serializes the string to the DOM store. Now, close the browser tab or window, open a new one, and navigate to the same page again. In Internet Explorer 8 Beta 2, what you typed into the text box and committed to the store will still be there.

Figure 2: Type something in the text box, click the "Send to Store" button, and then close the window. Navigate back to the page, and what you typed will still be there. That's the DOM store in action.

To see what happens without the DOM store, remove the body onload event to observe the past behavior.

On AJAX-enabled pages that take advantage of new AJAX navigations functionality, when AJAX content changes, the user can back up and go forward as if the AJAX navigation was a traditional navigation.

It’s important to note that DOM Storage is just a mechanism for Web applications to simply store data, and that there is no database behind it. For example, you can’t perform complex queries like search by value on the DOM store.

By: Sunava Dutta

Sunava Dutta is the AJAX Program Manager (PM) on the Internet Explorer team. He started in 2005 as the PM for XMLHttpRequest, and more recently has been the driving force behind the AJAX story for developers with features that enable cross-domain scenarios, local storage, and script-based state management. A bit of a rebel, Sunava likes to defy old-school thinking and specifically was instrumental in raising the number of concurrent connections per host in Internet Explorer from 2 to 6.

Sunava is also the Microsoft liaison and an active participant in the W3C’s Web Applications Working Group, having contributed to XMLHttpRequest and Access Control. His other standards participation has included HTML 5.0.

Before joining Microsoft, Sunava studied at the University Of Pennsylvania and received a degree in Computers and Telecommunications Engineering with a minor in mathematics and economics.

sunavad@microsoft.com

By: Matthew Tevenan

Matthew Tevenan is a technical writer with the Internet Explorer Developer Content team, and has been with Microsoft for over five years now. He previously worked in the Windows Client SDK and Windows Digital Media Division as a technical editor. Matthew has a Master’s degree in Technical Communication from the University of Washington, and a Bachelor’s degree in French from the University of San Francisco. His previous work experience as a technical communicator includes stints at Dantz Development Corporation (now EMC) and Apple Inc. He spends his free time studying graphic design, playing the cello, and being perturbed by his two bad cats.

mtevenan@microsoft.com

Fast Facts

Since its humble beginnings, AJAX has taken off as the way to create rich Internet applications for the modern Web. Internet Explorer 8 Beta 2 takes AJAX to the next level, and this article will tell you how to take full advantage of it!

Listing 1: AJAX Navigations sample markup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>

<head>
<meta content="IE=8" http-equiv="X-UA-Compatible">

<title>AJAX Map</title>
</head>


<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx
?v=6" type="text/javascript"></script>
<script type="text/javascript">
    var oMap = null;
    var iZoomLevel = 0;

    function GetMap()
    {
        oMap = new VEMap('myMap');
        oMap.LoadMap();

        oMap.AttachEvent("onendzoom", ZoomHandler);
        iZoomLevel = oMap.GetZoomLevel();
        window.location.hash = iZoomLevel;
    }

    function ZoomHandler(e)
    {
        iZoomLevel = oMap.GetZoomLevel();

        // The following declaration sets the hash property to a
        // variable containing the URL fragment to be saved.
        window.location.hash = iZoomLevel;
    }

    function HashChangeHandler()
    {
        var hash = window.location.hash;
        var iNewZoomLevel = hash.substr(1);

        if (iNewZoomLevel != iZoomLevel)
        {
            iZoomLevel = iNewZoomLevel;
            oMap.SetZoomLevel(iNewZoomLevel);
        }
    }
</script>

<body onhashchange="HashChangeHandler();" onload="GetMap();"
    style="overflow: scroll; height: 100%">

<div id="myMap" style="position: relative; width: 500px;
    height: 500px; vertical-align: middle">
</div>

</body>

</html>

Listing 2: DOM Storage sample markup

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta content="IE=8" http-equiv="X-UA-Compatible">
<title>HTML 5.0 DOM Store</title>
<script type="text/javascript">

    var key1 = 'defaultkey';

    function getValue()
    {
        var storeditem = localStorage.getItem(key1);
        if(storeditem != null)
        {
           document.getElementById("textinput").value = storeditem;
        }
    }

    function setValue()
    {
        var itemindex = document.getElementById('textinput').value;
        alert(itemindex);
        localStorage.setItem(key1,itemindex);

    }
    function clearItems()
    {
        localStorage.clear();
    }

    function clear_text()
    {
        document.getElementById('textinput').value = '';
    }

    </script>
</head>

<body onload="getValue();">

<h1>Type into the text area and retrieve your text from the local
    store in Internet Explorer 8.</h1>
<div>
    Enter Text:
    <input id="textinput" onclick="clear_text();" size="60"
        type="text" value="Your message here">
    <input onclick="setValue();" type="submit" value="Send to
        Store"> </div>
<button onclick="clearItems();">Clear Stored selection</button>

</body>

</html>

Article Pages: 1 2 3 - Next Page: 'Connectivity Enhancements' >>

Page 1:	Better AJAX Development with Internet Explorer 8 Beta 2
Page 2:	Connectivity Enhancements

Page 3:

XMLHttpRequest Enhancements

How would you rate the quality of this article?

	1	2	3	4	5
Poor						Outstanding

Tell us why you rated the content this way. (optional)

Average rating:
1.2 out of 5

298 people have rated this article.