Presented By Naveen P.N (Final Year C.S.

E)

N.R.Ananthanarayanan (SR. Lect. Dept of

C.S.E)

R.Vasanth Kumar Mehta ( Lect . Dept of C.S.E)

E.Sankar
(Systems Engineer,Dept of C.S.E)

Build a Better Web Interface Using Mashup

 A Mashup is a light weight web application, that

combines functionality or content from existing sources. The existing source used in mashups is typically sourced from a third party via a public interface or API. Other methods of sourcing content for mashups include Web feeds (e.g. RSS ) and JavaScript.

Build a Better Web Interface Using Mashup

Quickly build composite applications from re-usable services.

SERVICE
SOAP

The Mashup Eco-SystemAPPLICATIONS

Devices

RSS

Enterprise

Mash
Excel

JSON

Publish
Consume
REST Web 1.0

POX

Supply Side
Build a Better Web Interface Using Mashup

Web2.0

Consumpti on Side

 Web Services:
A new way of reuse/integrate third party software or legacy system No matter where the software is, what platform it residents, or

which language it was written in Based on XML and Internet protocols (HTTP, SMTP)

Benefits:
Ease of integration Develop applications faster

An application programming interface (API) is a set of

functions,procedures.methods or service provides to support

request made by computer program.
Build a Better Web Interface Using Mashup

 Representational State Transfer (REST)

Use HTTP Get method to invoke remote services (not

XML) The response of remote service can be in XML or any textual format Benefits: Easy to develop Easy to debug (with standard browser) Leverage existing web application infrastructure

Build a Better Web Interface Using Mashup

Continued
Really Simple Syndication (RSS)
XML-based standard Designed for news-oriented websites to Push content to readers

Excellent to monitor new content from websites

Build a Better Web Interface Using Mashup

 In the days before Web services and XML, people were

combining Web sites together using frames and iFrames.

Build a Better Web Interface Using Mashup

 In all seriousness, this technique really doesnt count as a

mashup, although you can still find it in use if you look hard enough.
IFrame

IFRAME is a mini-browser window in an HTML document Can be hidden (0 width, 0 height) IFRAME can call a URL Hears a click as server submits request Much slower than XMLHTTPRequest

Build a Better Web Interface Using Mashup

Example:
Housing Maps downloads Craigs List data

Downloads XML data, publishes static JavaScript on a schedule Expert programmers needed to set this up

Google Maps

Craigs List
Build a Better Web Interface Using Mashup

housing maps

Static HTML & JavaScript

10

Example :
www.housingmaps.com combines Google Maps data with

Craigslists housing data and presents an integrated view

of the prices of the houses at various locations on the

Google map.
The result is a map with services placed on it

Build a Better Web Interface Using Mashup

HousingMaps.com = Google Maps + Craigslist

Build a Better Web Interface Using Mashup

Deconstructing a Mashup

Build a Better Web Interface Using Mashup

Build a Better Web Interface Using Mashup

Where Is the Remixing Happening?

The remixing occurs on the server side on a web site

(Housingmaps.com) that is distinct from both the source web site (Craigslist) and the destination application (Google Maps). Data is drawn from the source and

transformed into a Google map, which is embedded in

web pages at Housingmaps.com.
Build a Better Web Interface Using Mashup

There are three possible approaches to creating mashups.

1) Mashing on the server. 2) Mashing in the browser using Asynchronous JavaScript

and XML.
3) Mashing in the browser using JSON.
Build a Better Web Interface Using Mashup

There are three possible approaches to creating mashups.

1) Mashing on the server. 2) Mashing in the browser using Asynchronous JavaScript

and XML.
3) Mashing in the browser using JSON.
Build a Better Web Interface Using Mashup

Build a Better Web Interface Using Mashuo

How It Works
1. The Web browser communicates with the server, requesting a
page using straight HTTP or HTTPS. 2. That page is constructed by the Web server, which reaches out

to what Ill call the source or partner sites (for example,

Amazon, Yahoo, or Google, and so on). The first request in this example is to Amazon using the Simple Object Access Protocol (SOAP) over HTTP. 3. Amazon returns back a SOAP response.
Build a Better Web Interface Using Mashup

4. The second request in this example is to Yahoo using a Representational State Transfer (REST) style approach. 5. Yahoo responds with Plain Old XML over HTTP. 6. Lastly, the Web server aggregates the responses, combining and rationalizing the data in whatever manner makes sense.

7. The resulting data is bound to the HTML and inserted into

the response, which is sent back to the browser.
Build a Better Web Interface Using Mashup

There are three possible approaches to creating mashups.

1) Mashing on the server. 2) Mashing in the browser using Asynchronous JavaScript

and XML.
3) Mashing in the browser using JSON.
Build a Better Web Interface Using Mashup

What is AJAX?
AJAX == Asynchronous JavaScript and XML

refers to the ability of a browser to request data from the server in the background (asynchronously)
Ajax is a technique for creating better, faster, more responsive web applications

AJAX is not a new technology, it is a method of using several existing technologies

together, including
HTML/XHTML CSS JavaScript DOM XML
Build a Better Web Interface Using AJAX

How Ajax works

1. You do something with an HTML form in your browser 2. JavaScript on the HTML page sends an HTTP request to the server 3. The server responds with a small amount of data, rather than a complete web page 4. JavaScript uses this data to modify the page

This is faster because less data is transmitted and because the browser has less work to do.

The XMLHttpRequest object

if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if (window.ActiveXObject) { request = new ActiveXObject("Microsoft.XMLHTTP"); }

Preparing the XMLHttpRequest object

Once you have an XMLHttpRequest object, you have to

prepare it with the open method request.open(method, URL, asynchronous)

The method is usually 'GET' or 'POST' The URL is where you are sending the data If using a 'GET', data is appended to the URL If using a 'POST', data is added in a later step If

for a response (this is what you usually want)

asynchronous is true, the browser does not wait

request.open(method, URL) As above, with asynchronous defaulting to true

Sending the XMLHttpRequest object

Once the XMLHttpRequest object has been prepared, you

have to send it request.send(null);

This is the version you use with a GET request

request.send(content);
This is the version you use with a POST request The content has the same syntax as the suffix to a GET request POST requests are used less frequently than GET requests

Getting the response

Ajax uses asynchronous callsyou dont wait for the

response Instead, you have to handle an event

request.onreadystatechange = someFunction;

This is a function assignment, not a function call When the function is called, it will be called with no parameters

function someFunction() {

if(request.readyState == 4){ var response = request.responseText; // Do something with the response } }

AJAX Definition Summary

Here are the possible values for the readyState property: State Description

0 1 2 3 4
Build a Better Web Interface Using AJAX

The request is not initialized The request has been set up The request has been sent The request is in process The request is complete

Classic Model
The classic web application

model works like this:

Most user actions in the

interface trigger an HTTP request back to a web server. The server does some processing retrieves data, crunches numbers, talks to various legacy systems And then returns an HTML page to the client

Classic Model
This approach makes a lot of technical sense, but it doesnt

make for a great user experience.

At every step in a task, the user waits. The user sees the application go to the server

Ajax Model
An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web
The Ajax engine allows the users interaction with the application to happen asynchronously, independent of communication with the server

Build a Better Web Interface Using AJAX

How does AJAX work?

Step 1 HTML Browser Request

Build a Better Web Interface web address and Using AJAX

Basically this is showing the user typing in a pressing ENTER or GO.

How does AJAX work? Step 2 HTML Server to Browser Response

The web server sends web-page to client; this happens on all web server platforms. Build a Better Web Interface
Using AJAX

How does AJAX work? Step 3 SIDEWAYS Request to Server

SIDEWAYS request to mean an xmlHttpRequest

Build a Better Web Interface Using AJAX

How does AJAX work?

Step 4 Server responds to my SIDEWAYS request

Build a Better Web Interface Using AJAX

Note how small the data response is. Im displaying how the server only sends a piece of data back and not an entire web page with header and etc

How does AJAX work?

Step 5 SIDEWAYS request data is added and displayed in the client browser.

This is a complete AJAX request. Programmers will have to use JavaScript and CSS to control display and or how you present the data Build a Better Web Interface returned if at all. Using AJAX

Typical Web Application Architecture

Client
UserInterface User Activity User Activity

Time

Processing

Processing

Server
Build a Better Web Interface Using AJAX

INNOV-2: Build a Better Web Interface Using AJAX

AJAX Application Architecture

Client
User Interface AJAX Engine

Time

Server
Build a Better Web Interface Using AJAX

INNOV-2: Build a Better Web Interface Using AJAX

Who is using AJAX ?

39

What Difference Does Ajax Make?

To convince yourself that JavaScript is at work in web

applications such as Flickr, Google ,Maps, and Gmail, you can turn off JavaScript in your browser and see what changes in the behavior of the application. To turn off JavaScript in your browser, do the following, depending on which browser youre using: In Firefox, uncheck Tools Options Content Enable JavaScript. In Internet Explorer, check Tools Internet Options Security

http://flickr.com/photos
All the buttons on top of the picture no longer

function. Instead of clicking the title, description, and tags to start editing them, you have to click a link (Edit Title, Description,and Tags) before doing so.
http://google maps.com With JavaScript turned off, you no longer see the pan

and zoom new-style maps but an old-style map that provides links to move north, south, east, or west or to change the zoom level.

Browser, server, and partner site interactions using Ajax

Build a Better Web Interface Using Mashup

How It Works
1. As before, the sequence begins with the browser requesting a page from the Web server. That page is

served in the standard manner.

2. At the point when the browser first loads the page, there is no mashup content present. Some JavaScript is downloaded to the browser, along with the HTML for the page.
Build a Better Web Interface Using Mashup

3. The next step is for the browser to issue a request back to the server for additional content. This might be a SOAP

request or REST- or XML-RPC-style request, but its all

the same basic principal. The real nuance here (and its a big nuance) is that this request is done through JavaScript and happens asynchronously, behind the scenes, so to speak. Because its asynchronous, the page is not

refreshed in the browser, nor is the browser blocking until

the call is processed. In fact, the whole thing can happen without the user ever even noticing!

4. The server in this case is acting as a proxy. The browser has asked for some content, perhaps a stock quote from

Yahoo. The server typically does nothing more than

forward that request on to the intended recipient. 5. A SOAP request is made to Amazon. 6. Amazon responds with a SOAP response. 7. A REST request is made to Yahoo.

8. Yahoo processes the request and returns the data back to

the server, as in the first scenario.
Build a Better Web Interface Using AJAX

9. Some mashing may occur on the server. This is really an optional step because the data might just be sent directly back to the browser. 10. Once the data is ready, its sent back to the browser. Meanwhile, back at the browser, life has moved on. A JavaScript callback function that was named

in the original request handles the

response when it finally arrives from the server.
Build a Better Web Interface Using AJAX

Mashing with JSON

Build a Better Web Interface Using AJAX

How It Works
Most JSON mashups make use of an approach known as the Dynamic Script method. It follows a flow similar to the

following:
1. As always, the flow starts with a browser request for a page using HTTP GET.

Build a Better Web Interface Using AJAX

2. A page is served by the Web server that contains a couple of key JavaScript functions: a. Aparsing function expects a JavaScript object as a parameter. This function examines the object passed into it and inserts the data contained in the object into the HTML of the page. b. An initiation script is the genius of the Dynamic Script

method. It adds a new script tag to the page, and specifies the
source for that script tag as being a URL at some partner site (for example, Amazon.com). That URL will render not

HTML nor XML, but JSON.

3. The browser attempts to load the source code for the new script tag. 4. By loading the script, an HTTP GET request is made out to Amazon (or whatever the source was). 5. The partner site (in this case, Amazon) responds with a JavaScript object serialized into JSON

notation.
Build a Better Web Interface Using AJAX

6. This JSON script becomes wrapped in a function call to the render function, and the entire JavaScript blob becomes

the content for the script tag added in Step 2b.

7. The browser now attempts to execute this new piece of JavaScript. This results in a call to the

render method from Step 2a.

8. The render method is invoked and the JSON script is evaluated and turned into a JavaScript object. The render method uses this new JavaScript object in its execution, and pumps the data it contains into the

page.

Advantage
The main benefit with the JSON approach is communication path. The browser communicates directly with the partner site with no need to go through the server. As a result, load on the server is reduced because the browser is in charge

of the communication.
Build a Better Web Interface Using AJAX

Tools Available
Yahoo! Pipes
Microsofts Popfly Marmite Dapper Google mashup editor

Mashmaker
IBM Mashup Center

Challenges With Mashups Today

Too few APIs and feeds exist
APIs and data feeds difficult to create Requires developer and IT resources Competes with IT budget for core business applications Immature tools for mashing up the data Existing data collection tools optimized for structured

enterprise data sources (ie; databases)

Vast amounts of valuable data is unstructured (enterprise web

apps, spreadsheets, PDFs, public web, trading partners, etc.)

The biggest obstacle is getting access to data you need

Build a Better Web Interface Using AJAX

Only the Largest websites have APIs

# of Users Have APIs The vast majority of sites have no API to their data

craigslist
Unlikely to have APIs

Build a Better Web Interface Using AJAX 55

Its The Same Story Inside The Enterprise

Large International Enterprise: We have over 6000 internal web sites and no APIs. # of Users

Have APIs

HR ERP CRM Unlikely to have APIs

Build a Better Web Interface Using AJAX 56

Examples of Mashups
Housing Maps http://housingmaps.com JavaScript mashup of Google Maps and rental data from Craigs List Chicago Crime http://chicagocrime.org JavaScript Mashup of Google Maps and Chicago crime statistics
Google Flight Simulator http://www.isoma.net/games/goggles.html Flash mashup of Google Maps and an airplane video game

Build a Better Web Interface Using AJAX

Sample APIs
http://api.flickr.com/services/rest/?method=flickr.test

.echo&api_key={api-key} http://api.shopping.yahoo.com/ShoppingService

Conclusions
Mashup environments target different user groups

programmers, technology enthusiasts, non technical users.

Best visual tools for non technical users hide data

exchange formats and provide blocks for every service that user is likely to integrate.
Advanced functionality will keep environments on the

float by letting users provide support for new services.

Build a Better Web Interface Using AJAX

Questions?