getting started building mashups using javascript, ajax, and google maps
DESCRIPTION
Getting Started Building Mashups using JavaScript, Ajax, and Google Maps. Peter Laird Managing Architect WebLogic Portal BEA Systems. About the Speaker. Has 10 years of server side Java development experience - PowerPoint PPT PresentationTRANSCRIPT
Peter Laird. | 1
Getting Started Building Mashups using JavaScript, Ajax, and Google Maps
Peter LairdManaging ArchitectWebLogic PortalBEA Systems
BEA Confidential
About the Speaker
Has 10 years of server side Java development experience
Leads the architecture team for BEA WebLogic Portal, a leading Java enterprise portal product
Has worked on WebLogic Portal for 7 years as a developer and architect
Holds the following certifications Oracle DBA Cisco CCNA
Regular contributor to BEA’s developer website http://dev2dev.bea.com
BEA Confidential
Agenda
What is a Mashup?
The Mashup Toolbox
The Simple Google Maps Mashup
Invoking the REST Data Service from JavaScript
Plotting Addresses with Google Maps
BEA Confidential
HousekeepingThis is a 30 Minute Presentation A lot to cover, will move very fast Will assume you have a basic understanding of:
HTML
XML
Role of browsers and web servers
HTTP request/response model
A modern programming language, like Java, JavaScript, PHP, C#
No network connectivity in this building Google Maps necessarily requires internet access for live demos Will show movies of demos instead
BEA Confidential
What is a Mashup?
BEA Confidential
What is a Mashup?Difficult to define adequately
One of those “I know it when I see it” types of things
Try this definition to start:
“Websites or applications that combine content from more than one source into an integrated experience have become a popular way to rapidly assemble new applications.
These applications can be called Mashups.”
Note that an Email client, for example, satisfies this definition, but is definitely not what we mean
Better to look at an example
BEA Confidential
Mashup Example
What we will build:
BEA Confidential
Key Characteristics for Web Mashups
Components can be implemented in a variety of technology stacks: Java, .NET, Ruby on Rails, PHP, static HTML, etc.
Rich user interaction and inter-application communication allow components to create dynamic interfaces
Components are integrated using lightweight approaches JavaScript REST services iFrames HTML Script includes
End-user ideally has some control over defining and customizing the composite application
BEA Confidential
Mashup Toolbox
BEA Confidential
Mashup Toolbox
Programming Technologies JavaScript AJAX and XmlHttpRequest JSON
Service Technologies REST APIs Google Maps
BEA Confidential
JavaScript
Full programming language with wide support
Two major features we care about today
DOM Manipulation Browsers expose the rendered page as a tree of nodes (DOM) JavaScript is a powerful means to dynamically update the DOM// find the <div> tag with id 'greet_div'
var div = document.getElementById('greet_div');
div.innerHTML = 'Hello ' + name;
Event Handlers A JavaScript function can be attached to DOM elements Example: onclick event for a button Function is executed when the event is triggered
<a onclick="javascript:myEventHandler(); return true" href="myURL.html">My Link</a>
BEA Confidential
Ajax and XmlHttpRequest
Ajax – Asynchronous JavaScript and XML Allows pieces of browser pages to update without a full page refresh Implemented in JavaScript using to the XmlHttpRequest to create an out-of-
band request back to the server XML may be returned, but alternatives are popular (more on this later)
Ajax frameworks have sprung up to build higher level abstractions XMLHttpRequest infrastructure Widget libraries JavaScript libraries
Popular Ajax frameworks DOJO DWR GWT
BEA Confidential
Ajax and XmlHttpRequest Sample// create a request object
var xhr = new XMLHttpRequest();
// define the request properties
xhr.open("GET", "http://myURL/getJSON.jsp", true);
xhr.onreadystatechange = myHandler; // define the callback handler
xhr.send(null); // send the request
function myHandler() // callback definition
{
if (xhr.readyState == 4) // response has been received
{
if (xhr.status != 404)
{
var data=eval(‘(’ + xhr.responseText + ‘)’);
// invoke JS to manipulate the response
}
}
}
BEA Confidential
XmlHttpRequest and the Single Origin Policy
A safety feature is present in all browser implementations To protect users from malicious code writers
Same Origin Policy prevents an XMLHttpRequest from targeting a server in any network domain other than the network domain that provided the page Outer page: http://www.bea.com/ajaxPage.html Inner XmlHttpRequest: http://www.evil.com/stealCookies.html The request would be blocked because it does not target bea.com
This is an issue when implementing Mashups on the client
Two resource types are immune to this policy A page can load cross domain images and scripts. By being clever with appending parameters to these resource requests, some
implementations have worked around the limitation.
BEA Confidential
JavaScript Object Notation (JSON)
A text based serialized object format that is expressed in the JavaScript language
An alternative to XML
When working in JavaScript in a browser, a far more useful format The returned JSON payload may be deserialized into an object with a single
call XML needs to be parsed or traversed
BEA Confidential
REST APIs
An approach to providing data services in an easily consumable form – as an alternative to approaches such as SOAP
REST services are often invoked from JavaScript in a browser
REST services are implemented using the basics of the web Service end points are resources http://host/api/content/myfolder HTTP requests, with the verb being important (GET, POST, PUT) Services are stateless GETs are idempotent Return payload is usually JSON or XML
BEA Confidential
A REST Example
Google, Amazon, Flickr, del.icio.us, etc also offer REST APIs
REST call to YouTube API
The response:
http://www.youtube.com/api2_rest?method=youtube.users.get_profile&dev_id=YOUR_DEV_ID&user=YOUTUBE_USER_NAME
<?xml version="1.0" encoding="utf-8"?><ut_response status="ok">
<user_profile><first_name>YouTube</first_name><last_name>User</last_name><about_me>I love OK GO</about_me><age>30</age><video_upload_count>7</video_upload_count>.... and more ....
</user_profile>
</ut_response>Source: YouTube
BEA Confidential
Google Maps
Google provides a JavaScript library that interacts with its mapping service
Allows mashup developers to easily plot addresses on a map
Service is metered Each developer needs to obtain an API key Limited to 50,000 requests per day
Single Origin Policy is not an issue Google Maps API uses a Script Include instead of an XmlHttpRequest
BEA Confidential
The Simple Google Maps Mashup
BEA Confidential
How the Mashup Works
Initial HTML page will render without any data
User clicks a button to load the addresses JavaScript event handler fires XmlHttpRequest is sent to a URL to retrieve a list of addresses Response contains a JSON payload of addresses Callback processes the list of addresses and injects into the HTML page
User clicks on one of the addresses JavaScript event handler fires Google Maps JavaScript API is called from the handler Google Map is updated to depict the location
BEA Confidential
Mashup Example
What we will build:
BEA Confidential
Invoking the REST Location Service from JavaScript
BEA Confidential
How the Mashup Works
Initial HTML page will render without any data
User clicks a button to load the addresses JavaScript event handler fires XmlHttpRequest is sent to a URL to retrieve a list of addresses Response contains a JSON payload of addresses Callback processes the list of addresses and injects into the HTML page
User clicks on one of the addresses JavaScript event handler fires Google Maps JavaScript API is called from the handler Google Map is updated to depict the location
BEA Confidential
Triggering the Event Handler
Button is defined in HTML like this:
<form id="getLocationsForm">
<input value="Get the Locations"
type="submit"
onclick="javascript:getLocationsAndMap();return false"
/>
</form>
BEA Confidential
The Address List Event Handler
The event handler looks like this:
var receiveReq = getXmlHttpRequestObject();
function getLocationsAndMap() {
// getD2DSites.html is a REST service that returns the list of locations as JSON
receiveReq.open("GET", 'getD2DSites.html', true);
receiveReq.onreadystatechange = getLocationsAndMapCallback;
receiveReq.send(null);
}
BEA Confidential
JSON Address REST Service
The address service returns this in the response (only show one address here for brevity):
{"locations":
{"location":[
{"id": "WashingtonDC",
"city": "Washington DC",
"location": "Hilton Hotel, McLean Tysons Corner",
"address": "7920 Jones Branch Drive, McLean, VA 22102",
"date": "May 2nd, 2007"
}
]}
}
BEA Confidential
The Address List Callback function getLocationsAndMapCallback() {
if (receiveReq.readyState == 4) {
// deserialize the JSON response. This creates an array of location objects.
var response = eval("(" + receiveReq.responseText + ")");
// generate HTML listing the locations and update the page DOM
var locations_div = document.getElementById('locations_div');
for(i=0; i < response.locations.location.length; i++) {
// removed for brevity, computing the URL for each address
locations_div.innerHTML += '<p>'+ city + ' ' + link + '</a><br/>' + addr + '</p>';
}
}}
BEA Confidential
Plotting Addresses with Google Maps
BEA Confidential
How the Mashup Works
Initial HTML page will render without any data
User clicks a button to load the addresses JavaScript event handler fires XmlHttpRequest is sent to a URL to retrieve a list of addresses Response contains a JSON payload of addresses Callback processes the list of addresses and injects into the HTML page
User clicks on one of the addresses JavaScript event handler fires Google Maps JavaScript API is called from the handler Google Map is updated to depict the location
BEA Confidential
Event Handler Invokes Google Maps APIThe address service returns this in the response (only show one address here for brevity):
function showAddress(address) {
var map = new GMap2(document.getElementById("google_map_div"));
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
BEA Confidential
Done!