"Climate is what we expect, weather is what we get."
– Mark Twain
In this chapter, we will build a weather widget to learn about using Ajax to load content asynchronously and communicate with web services. We will learn about Ajax and how to use jQuery's Ajax methods to load files that contain XML or JSON formatted data. Then we will get the weather conditions from a web service to display in the widget. We will also use the HTML Geolocation API to find the user's location so we can show their local weather.
We will learn the following in this chapter:
- How to get XML and JSON data using jQuery' Ajax methods
- Parsing JSON versus XML returned from services
- What web services are and how to communicate with them asynchronously using Ajax
- The problem with cross site scripting, and the solution JSONP
- How to use HTML5 Geolocation API to get the user's location
- How to connect to a web service to get the current weather report
Ajax is a technology used by JavaScript to send data to, and receive data from, a server. Originally Ajax stood for Asynchronous JavaScript and XML, but now this meaning has been lost as JSON (which we learned about in Chapter 1, The Task at Hand) has begun to replace XML as the preferred format for packaging data, and Ajax requests do not need to be asynchronous.
Using Ajax will make your applications more dynamic and responsive. Rather than having postbacks whenever you need to update a part of a web page, you can load only the necessary data and update the page dynamically. With Ajax we can retrieve almost anything from the server, including HTML snippets to be inserted into the web page and static data to be used by the application. We can also call web services that provide access to things such as data and services that are only available on the server side.
jQuery provides methods that make it easy to access web resources and call web services using Ajax. The ajax() method is the most primitive of them. If you want to have the most control over service calls you can use this method. Most of the time it is preferable to use one of the higher level methods such as get() or post().
The get() method makes it easier to do an HTTP GET request using Ajax. At its simplest, you pass in the URL of the resource or service you want to get and it asynchronously sends the request and gets the response. When it's done it executes a callback function that you provide.
For example, the following code snippet makes a GET request for an XML file on the server, and displays its contents in a dialog:
$.get("data/myData.xml", function(data) {
alert("data: " + data);
});All of the jQuery Ajax methods return an object that you can attach done(), fail(), and always() callback methods to. The done() method gets called after the request is successful, fail() gets called if there was an error, and always() gets called last whether the request succeeded or failed:
$.get("data/myData.xml")
.done(function(data) { alert("data: " + data); })
.fail(function() { alert("error"); })
.always(function() { alert("done"); });The data that gets passed to the done() method will be either an XML root element, a JSON object, or a string depending on the MIME type specified in the response. If it's a JSON object, you can reference the data as you would any JavaScript object. If it's an XML element you can use jQuery to traverse the data.
You may provide query parameters to the request by passing in an object literal of name/value pairs:
$.get("services/getInfo.php", {
firstName: "John",
lastName: "Doe"
})
.done(function(data) { /* do something */ });This will make the following request:
services/getInfo.php?firstName=John&lastName=Doe
Use the post() method
if you prefer to make a POST request rather than GET, which may be preferable if you are using a secure protocol such as HTTPS, and don't want the query parameters visible on the request:
$.post("services/getInfo.php", {
firstName: "John",
lastName: "Doe"
});