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.
Hope this helps!