The Smallest xmlHttp I Could Do And Still Get It Wrong

I’ve just started my journey into the land of JavaScript for real and am learning things most of you already know.  For example, as the Silicon Valley Code Camp coordinator and web site author, I just recently decided to add a Virtual Earth Map showing attendees and speakers (see the home page).  I wrote a simple web response handler that returns all the data in JSON so I could plot the data.  Then, after a couple searches on the web, I found a way to send a request to the service asynchronously and get the result. The code looks something like this:

 

 function pageLoad() {
        req = new ActiveXObject("Msxml2.XMLHTTP");
        if (req) {
            req.onreadystatechange = processStateChange;
            req.open("GET", "AttendeeZipCode.ashx", true);
            req.send();
        }
    }
 
    function processStateChange() {
        statusDiv = document.getElementById("stats");
        if (req.readyState == 0) { statusDiv.innerHTML = "UNINITIALIZED"; }
        if (req.readyState == 1) { statusDiv.innerHTML = "LOADING"; }
        if (req.readyState == 2) { statusDiv.innerHTML = "LOADED"; }
        if (req.readyState == 3) { statusDiv.innerHTML = "INTERACTIVE"; }
        if (req.readyState == 4) {
            //statusDiv.innerHTML = "COMPLETE";
            GetMap();
            //statusDiv.innerHTML = req.responseText;
            var dataObject = json_parse(req.responseText);
 
            CreateLayerAttendees();
            CreateLayerSpeakers();
            var points = new Array();
            for (var i = 0; i < dataObject.length; i++) {
                var lattitude = dataObject[i].lattitude;
                var longitude = dataObject[i].longitude;
                points[i] = new VELatLong(lattitude, longitude);
                if (dataObject[i].isSpeaker) {
                    AddOnePin(layerSpeaker, lattitude, longitude, "x", "x", true);
                }
                else {
                    AddOnePin(layerAttendee, lattitude, longitude, "x", "x", false);
                }
                AddOnePin(layerAttendee, lattitude, longitude, "x", "x",dataObject[i].isSpeaker);
            }
            map.SetMapView(points);
        }
    }

Well, that worked great until I ran it on Firefox and Chrome.  Basically, nothing happened.  So, off to my smart friends at the local Java Users Group and they suggested I should use a JavaScript library because my solution only works for IE.  With that hint, I grabbed my favorite AJAX book by Alessandro Gallo, Ajax in Action and started reading.  Turns out, there is indeed a Microsoft Ajax Library solution to this and here it is.

 function pageLoad() {
            var request = new Sys.Net.WebRequest();
            request.set_url("AttendeeZipCode.ashx");
            request.add_completed(onRequestCompleted);
            request.invoke();
        }
 
        function onRequestCompleted(executor, args) {
            processResults(executor.get_responseData());
        }

Now, Firefox, Chrome, and IE all work!  and, look what a nice result we get.

image

Hope this helps!

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP for the past 7 years. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Comments

  1. You could also just check at the start of the function if its a non-IE browser by just using an if condition.

    //Non-IE browsers (Firefox,Safari,Opera)
    if (window.XMLHttpRequest())
    {
    //Javascript code
    }
    This is because, IE uses an ActiveX object whereas others use the XMLHttpRequest object. The remaining code should be the same and it’ll work.

    Hope this helps.

Your Comments

*

Protected with IP Blacklist CloudIP Blacklist Cloud

Follow

Get every new post delivered to your Inbox

Join other followers: