First let's create an example of getting data from an XML file and updating the weather widget from its data. We will create a new web page called weather.html and put the markup for the weather widget into it. This page will have a Check Weather button. When clicked, it will call the weather widget's update() method. You can find the code for this example in Chapter 8/example8.1.

Next we need to create an XML file with some weather information in it. We will name the file weather.xml and place it in the data folder:

<weather>
    <location>Your City</location>
    <current_observation>
        <weather>Snow</weather>
        <temperature_string>38.3 F (3.5 C)</temperature_string>
        <feelslike_string>38 F (3 C)</feelslike_string>
        <relative_humidity>76%</relative_humidity>
        <wind_string>From the WSW at 1.0 MPH</wind_string>
        <icon_url>images/snow.gif</icon_url>
    </current_observation>
</weather>

Now let's write the getWeatherReport() method in the WeatherWidget object:

function getWeatherReport()
{
    $.get("data/weather.xml")
        .done(function(data) {
            populateWeather(data);
       })
        .fail(function(jqXHR, textStatus, errorThrown) { 
            showError(errorThrown);
        });
}

In this method we use the jQuery get() method to perform the Ajax request and pass it the path to our XML file. If the server call is successful we call the populateWeather() method, passing it the data returned from the request. This will be the root element of a DOM that represents our XML file. If the request fails we call the showError() method, passing it the error message.

Next let's write the populateWeather() method. This is where we will extract the data from the XML document and insert it into the page:

function populateWeather(data)
{
    var $observation = $("current_observation", data);
    
    $(".results header img", $widget)
        .attr("src", $("icon_url", $observation).text());
    $(".location>span", $widget)
        .text($("location", data).text());
    
    $(".conditions>span").each(function(i, e)
    {
        var $span = $(this);
        var field = $span.data("field");
        $(this).text($(field, $observation).text());
    });

    $(".loading", $widget).fadeOut(function ()
    {
        $(".results", $widget).fadeIn();
    });
}

We need a way to extract data from the XML document retrieved from the server. Fortunately for us, jQuery can be used to select elements from any XML document, not just the web page's DOM. All we have to do is pass in the root element or our XML as the second parameter to a jQuery select. This is exactly what we do in the first line of the method to get the current_observation element and store it in the $observation variable.

Next we use jQuery to get the text from the icon_url element, and set the image's src attribute to it. This is an image that represents the current weather. We also get the text from the location element and insert that into the widget's header.

Then we iterate over all of the <span> elements in the conditions section of the widget. For each one we get the value of its data-field custom data attribute. We use that to find the element with the same name inside the current_observation element, get its text, and put it into the <span> element.

The last thing we do is fade out the loading panel and fade in the results panel, to show the current weather on the page. Here's what it looks like with the data loaded: