A Mashup is a light weight web application, that combines functionality or content from existing sources.
Build a Better Web Interface Using AJAX
Supply Side Consumption Side SERVICE APPLICATIONS Consume Publish Mash Quickly build composite applications from re-usable services. The Mashup Eco-System Build a Better Web Interface Using AJAX En terprise Excel Devices Web 1.0 Web2.0 RES T SOAP RSS JS ON POX
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.
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 I’ll 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.
This approach makes a lot of technical sense, but it doesn’t 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 Build a Better Web Interface Using AJAX
An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web
The Ajax engine allows the user’s interaction with the application to happen asynchronously, independent of communication with the server
How does AJAX work? Step 1 – HTML Browser Request Basically this is showing the user typing in a web address and pressing ENTER or GO. Build a Better Web Interface Using AJAX
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 Note earlier I coined the term 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 Note how small the data response is. I’m displaying how the server only sends a piece of data back and not an entire web page with header and etc… Build a Better Web Interface Using AJAX
Typical Web Application Architecture INNOV-2: Build a Better Web Interface Using AJAX Client User Interface Time Server Build a Better Web Interface Using AJAX User Activity User Activity Processing Processing request request html response html response
AJAX Application Architecture INNOV-2: Build a Better Web Interface Using AJAX Client AJAX Engine User Interface Server Build a Better Web Interface Using AJAX Time html response xml response
• In Internet Explorer, check Tools ➤Internet Options ➤Security
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.
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.
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.