Before you start

This tutorial steps through the paces of using Ajax to dynamically update a Web page. The data needed to update one part of the page using an Ajax call is taken from a different portion of the page that was populated from another source. That is the basis of a mashup — blending data. Ajax is key to this process because it allows another part of the page to update without refreshing the entire page. Having a basic knowledge of Ajax will go a long way in helping you follow the tutorial; an Ajax overview/refresher is included in the tutorial to bring you up to Ajax speed.

About this tutorial

This tutorial presents a common mashup technique and builds from there. Maps are prevalent in Web usage and make for a great mashup. In the tutorial, the Google Maps API provides the map and mapping function. Data returned from the map — latitude and longitude coordinates — is applied to another API, provided by Flickr, the popular photography Web site. Flickr has an end-user feature that lets you geotag uploaded photographs: the latitude and longitude coordinates of where the picture was taken become associated with the photograph.

The mashup round trip follows clicking a Google map and having the Map API return the coordinates where you clicked. These values are then sent using Ajax to the Flickr API. The end result is a stream of photographs that are geotagged with the coordinates.

Along the way, you use an additional feature of the Flickr API: tags. Tags (not geotags) are keywords that describe a photograph. For instance, you could tag a photograph of the Golden Gate Bridge with San Francisco, bridge, Golden Gate, fog (that bridge is in the fog a lot), and so on. The tags have been added by people uploading their photographs into Flickr. In this example, you don't make new tags, you just search for them.

Because this mashup consists of different APIs, with Ajax in the middle, the tutorial introduces the components in a sequence:

1. The basics of Google maps are demonstrated. You learn how to create one and alter it.
2. Ajax is covered next because Ajax uses data coming from the Google map. The Ajax coverage includes a refresher on the basic Ajax call.
3. The mashup is demonstrated: latitude and longitude coordinates from the Google map are sent to the Flickr API through the Ajax mechanism, and photographs are returned from Flickr.
4. The basics of using the Flickr API are demonstrated. You learn how to get a Flickr account and use the Flickr API.

Back to top

Objectives

The objective of this tutorial is to take your knowledge of Ajax and apply it such that data from one API is sent to another API in an Ajax call. A few parameters are sent with the Ajax call. The returned information from the Ajax call is then formatted to be properly presented on the Web page.

Back to top

Prerequisites

Much of this tutorial uses JavaScript code. Ajax isn't a language; it's a programming paradigm that relies heavily on JavaScript code. Knowledge of Ajax is helpful, but if that is an issue, then at least a good working knowledge of JavaScript code is key. The tutorial also assumes you know some key features of a map: distance, coordinates, and scale.

Back to top

System requirements

Access to a Web server and a valid domain are the only technical requirements for this tutorial. You need permission to add files to the domain. PHP is used for the server-side language, but the server-side code is fairly simple. On the server, you use code to query a database or retrieve data from a service. If these concepts are familiar in any server language, it should an easy task to rewrite the PHP into the server-side language of your choice.

1 of 9 | Next

Comments

Back to top

Table of contents

• Before you start
• Hello Map, the new Hello World
• An Ajax refresher
• Here comes the mashup
• Get set up with Flickr
• Open up the search
• More about the Search API
• Resources
• About the author

---

1 of 9 | Next

Next steps from IBM

Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.

---

• Try: WebSphere Portal Express
• Article: Get started using Ajax and WebSphere Portal Express
• Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
• Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
• Buy: WebSphere Portal Express

Dig deeper into Web development on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.