UIStory: AJAX on IE Mobile

AJAX on IE Mobile

Hello Everyone,

My name is Kevin Grey, I'm an SDET on the IE Mobile Team. I wrote the following document to help inform people about how to write an AJAX enabled webapp for use on Windows Mobile devices (PocketPC and Smartphone).

~~K

Does IE Mobile Support AJAX? … YES

We've recently been getting questions regarding whether IE Mobile (aka Pocket IE, PIE, IEMO) supports AJAX. The answer: Yes, PocketPC and Smartphone devices 2003 and later, support AJAX.

If you are wondering how you can use AJAX on your website and have it function well from your Windows Mobile browser, here are a couple things you should know:

On Smartphone/PocketPC 2003
- innerText and innerHTML Properties are only supported on div and span elements
- Form elements are scriptable as well
On Windows Mobile 5
- innerText and innerHTML Properties are supported on all elements
- In addition there is support for document.all and the style object

*Watch the IE Mobile Team blog for further details on our DOM support.*

An AJAX Example

For those of you who live anywhere near the poles and have yet to witness a geomagnetic storm, here is your chance. A Geomagnetic storm is produced when solar wind particles from the sun warp the Earth's magnetosphere producing pretty lights in the night sky (also known as the Aurora Borealis, Northern Lights, etc).

The National Oceanographic and Atmospheric Administration operates a series of Magnetographs which record changes in the Magnetosphere as a result of this solar wind. Every 3 hours, they publish an index value between 0-9, called the K-Index. This value represents the severity of the disturbance in the Earth's magnetic field. Since this interaction is the fundamental cause of a geomagnetic storm, the K-Index should inform you of when you are most likely to witness one.

Our AJAX Example Goal: To write a webpage that will display the current K-Index for a given location so that people can know if there is a geomagnetic storm occurring.

The NOAA publishes the K-Index for several locations to a flat text file located here: http://www.sec.noaa.gov/ftpdir/latest/AK.txt The file is updated every 3 hours.

Since the file is in a fixed format and therefore cannot be parsed by an XML parser, I've taken the liberty of writing a Webservice which fetches the flat file, parses it out and makes the data available as a simple WebReference:

http://iemobile.members.winisp.net/GeoMagneticData.asmx

Now that we've XML-ified our Magnetometer data, we can access this data from our webpage or any other application.

Invoking the Webservice

In order to invoke the GeoMagneticData.asmx webservice, you need to perform an HTTP POST sending certain headers and a body with an XML SOAP document. Here is what the raw HTTP message should look like for this specific webservice:

POST http://iemobile.members.winisp.net/GeoMagneticData.asmx HTTP/1.1
Accept: */*
Accept-Language: en-us
Referer: http://iemobile.members.winisp.net/ajax.html
soapaction: http://tempuri.org/GetMagnetometerStation
Content-Type: text/xml; charset=utf-8
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 1.1.4322)
Host: iemobile.members.winisp.net
Content-Length: 469
Proxy-Connection: Keep-Alive
Pragma: no-cache

<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
  <GetMagnetometerStation xmlns="http://tempuri.org/">
  <email>nobody@nobody.com</email>
  <password>blank</password>
  <station_name>Boulder</station_name>
  </GetMagnetometerStation>
</soap:Body>
</soap:Envelope>

As a response to this message, we will receive:

HTTP/1.1 200 OK
Proxy-Connection: Keep-Alive
Connection: Keep-Alive
Content-Length: 648
Date: Tue, 15 Nov 2005 19:25:49 GMT
Content-Type: text/xml; charset=utf-8
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
MicrosoftOfficeWebServer: 5.0_Pub
X-AspNet-Version: 1.1.4322
Cache-Control: private, max-age=0

<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<soap:Body>
  <GetMagnetometerStationResponse xmlns="http://tempuri.org/">
  <GetMagnetometerStationResult>
   <StationName>Boulder</StationName>
   <Latitude>49</Latitude>
   <Longitude>42</Longitude>
   <CurrentKIndex>1</CurrentKIndex>
   <CurrentAIndex>1</CurrentAIndex>
  </GetMagnetometerStationResult>
  </GetMagnetometerStationResponse>
</soap:Body>
</soap:Envelope>

Now on to the Javascript which will invoke the webservice and parse the response. I've broken the request and response portions of the webservice call into two separate functions:

InvokeWebservice()
ParseResponse()

The InvokeWebservice() function will perform the HTTP POST. It then sets a callback function which will asynchronously invoke ParseResponse() when the HTTP response is received:

function InvokeWebservice(url)
{
    // Tell the user that we're invoking the webservice
    result.innerHTML = "Requesting Data...";
    //Construct an XMLHTTP Object to handle our HTTP Request
    var xmlHttpReq = false;
    try
    {
        xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (err)
    {
        try
        {
            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (err2)
        {
        }
    }
    // Specify HTTP Method as POST so that we can upload large amounts of text
    xmlHttpReq.open('POST', url, true);
    // Set the content type to text/xml, otherwise the webservice will not
    // consider it a valid XML document
    xmlHttpReq.setRequestHeader('Content-Type', 'text/xml; charset=utf-8');
    // Set the SOAPAction header, otherwise the webservice won't be invoked.
    xmlHttpReq.setRequestHeader('SOAPAction', 'http://tempuri.org/GetMagnetometerStation');
    // Set a callback to be invoked when the ReadyState changes on the XMLHTTP object.
    // If the ReadyState value == 4, then the request is completed.
    // See for more info: http://tinyurl.com/858me
    xmlHttpReq.onreadystatechange = function()
    {
        if (xmlHttpReq.readyState == 4)
        {
            ParseResponse(xmlHttpReq);
        }
    }
    // Insert the station name within our XML document
    // and Send the HTTP Request
    // The XML has been snipped for presentation
    xmlHttpReq.send("<?xml version=\"1.0\" … <station_name>" +
    document.forms['f1'].stationname.value +
    "</station_name></GetMagnetometerStation></soap:Body></soap:Envelope>");
}

The ParseResponse() function receives the XMLHTTP object instance and fetches the values for the StationName, Latitude, Longitude and CurrentKIndex. It then performs some simple logic on the lat/long values and generates a description. Then it sets the innerHTML property of a div tag with our pretty-printed text:

function ParseResponse(xmlHttpReq)
{
    // Fetch the values from our response XML
    var station_name = xmlHttpReq.responseXML.getElementsByTagName('StationName')[0].text;
    var lat = xmlHttpReq.responseXML.getElementsByTagName('Latitude')[0].text;
    var lng     = xmlHttpReq.responseXML.getElementsByTagName('Longitude')[0].text;
    var kindex = xmlHttpReq.responseXML.getElementsByTagName('CurrentKIndex')[0].text;
    var descr = "";
    // Pretty Print the Latitude and Longitude values
    <SNIPPED>View source for this</SNIPPED>
    // Generate the description for our data
    if (kindex < 0)
    {
        descr = "No Data Available for this Location";
        kindex = "Unknown";
    }
    if (kindex < 4)
    {
        descr = "Low or No Geomagnetic Activity";
    }
    else if (kindex < 7)
    {
        descr = "Moderate Geomagnetic Activity";
    }
    else if (kindex < 9)
    {
        descr = "High Geomagnetic Activity -- Auroras Visible in Mid Latitudes";
    }
    else if (kindex <= 10)
    {
        descr = "Extreme Geomagnetic Activity -- Auroras Visible in Mid and Lower Latitudes";
    }
    // Set the text data as the innerHTML propery of a div tag identified as 'result'
    result.innerHTML = "Station: " + station_name + "<br>\n";
    result.innerHTML += "Location (geomagnetic dipole): " + lat + " " + lng + "<br>\n";
    result.innerHTML += "K-Index: " + kindex + "<br>\n";
    result.innerHTML += descr + "<br>\n";
}

With these two functions defined, we can now create some simple HTML to allow us to query for the current K-Index for a given location:

<p>Station:
    <SELECT NAME="stationname">
        <OPTION VALUE="Planetary Index">Overall Planetary Index</OPTION>
        <OPTION VALUE="Boulder">Boulder, CO</OPTION>
        <OPTION VALUE="Chambon-la-foret">Chambon-la-foret, France</OPTION>
        <OPTION VALUE="College">College, AK</OPTION>
        <OPTION VALUE="Fredericksburg">Fredericksburg, VA</OPTION>
        <OPTION VALUE="Kergulen Island">Kergulen Island</OPTION>
        <OPTION VALUE="Learmonth">Learmonth</OPTION>
        <OPTION VALUE="Wingst">Wingst</OPTION>
    </SELECT>
    <input value="Get Index" type="button" onclick='InvokeWebservice("http://iemobile.members.winisp.net/GeoMagneticData.asmx");'>
</p>
<div id="result"/>

For a working demo of this page, please visit http://iemobile.members.winisp.net/ajax.html
Here are some screenshots of the page in action, as seen from a Smartphone 2003 device emulator: