Scribd
Upload
63 views

Mashup and RUI Using Ajax

The document discusses mashups, which combine data from multiple sources into a single application or web page. It provides examples of mashups that combine maps and real estate listings or books and catalog data. It then explains how mashups work by making API calls to different data sources, manipulating the data, and presenting it to users through a unified interface. Key aspects covered include using AJAX asynchronously for fast updates without page refreshes and leveraging a proxy server to make cross-domain requests on behalf of the browser.

Uploaded by

URVI BALEKUNDRI
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
63 views

Mashup and RUI Using Ajax

The document discusses mashups, which combine data from multiple sources into a single application or web page. It provides examples of mashups that combine maps and real estate listings or books and catalog data. It then explains how mashups work by making API calls to different data sources, manipulating the data, and presenting it to users through a unified interface. Key aspects covered include using AJAX asynchronously for fast updates without page refreshes and leveraging a proxy server to make cross-domain requests on behalf of the browser.

Uploaded by

URVI BALEKUNDRI
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

What is a Mashup?

• (Music) A musical genre which combines the layers of


music from different songs

• (Computing) A website or web application which


combines contents from different websites
A Simple Example

User

What are the available flats Map with available flats


near Thane? marked

Mashup website

Request for Request for


available flat list Flat list Area map
area map

Real estate website Google Map


Putting everything together

• Your Mashup = API calls + Data Manipulation + UI

User

User Request Data presentation

Mashup website Data Manipulation

API Call Data API Call Data

Website 1 Website 2
Demonstration

• Googlemap + Craigslist Real Estate


 http://www.housingmaps.com/

• Amazon + NLB catalog


 http://www.bookjetty.com/
Rich User Interface using Ajax
 Understanding Architecture
How It Works
The browser is really the workhorse in this use case:
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.
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
it’s all the same basic principle.
How It Works
The real nuance here (and it’s a big nuance) is that this request is done
through JavaScript and happens asynchronously, behind the
scenes, so to speak. Because it’s 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 repsonds with SOAP response.
7. A REST request is made to Yahoo.
8. Yahoo processes the request and returns the data back to the server
How It Works
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, it’s sent back to the browser.
Meanwhile, back at the browser, life has moved on. A
Javascript callback fucntion that was named in the
original request handles the response when it finally
arrives from the server.
11. Typically, at this point, a transformation is applied to the
XML data to convert it into XHTML, which includes data
and presentation markup.
12. That snippet is then inserted into the page’s struture
and appears before the user.
Questions?
• Why doesn’t the browser talk directly to the partner site?

• Reason: Browser Security: Built-in security restrictions in


all browsers, an XMLHttpRequest object can only
retrieve data from the site that served that page. You
cannot go out to other sites using XMLHttpRequest and
hence the need for a response handler or proxy on the
Web server in the Ajax scenario.
Pros and Cons
• Adv:This technique combine with little imagination, can
enable a terrific experience within the browser.
• The presentation of the result ( the way the results
appear on the screen and the associated HTML markup)
is all driven by the XSLT style sheet that is applied to the
XML data. i.e no presentation logic embedded in server
side code.
• The Browser is doing the majority of the work. This
means less work for the server to do and hence more
time for it to serve more page.
• As all data is routed through a common point on the
server, the aggregation and combination is possible.
• Dis Adv: Developer will face JavaScript challenges,
server communication issues, and asynchronous
methods that are difficult to predict.
• The browser ‘s built-in navigation mechanisms such as
back and history button are bypassed. Also If user
bookmarked an Ajax page, they are only bookmarking
the URI, not the actual content of the page.
When to Use Ajax
• Traverse impossibly large datasets For e.g Google
Maps, where it’s clearly impossible to download every
satellite image to the browser).
• Provide real-time updates to dynamic data(stock quotes
are a perfect example, where the user shouldn’t need to
fully refresh the page to get accurate information.
• Report user interaction back to the server (click tracking
for gathering marketing information)
• Enrich search interfaces by providing results as the user
types i.e live search
When not to use Ajax
• Consider the user experience. Will adding Ajax confuse
the user? Will it be clear to the user that the data is being
refreshed?
• Don’t use Ajax to refresh an entire page, because what’s
the point? You can just use the refresh button in the
browser!
• If you want user to book mark the page.
Introduction to jQuery - AJAX

• jQuery provides several methods for AJAX


functionality.
• With the jQuery AJAX methods, you can request
text, HTML, XML, or JSON from a remote server
using both HTTP Get and HTTP Post - And you can
load the external data directly into the selected
HTML elements of your web page!
• Without jQuery, AJAX coding can be a bit
tricky!

46/22
jQuery AJAX Methods
jQuery Ajax
Description
Methods

ajax() Sends asynchronous http request to the server.

get() Sends http GET request to load the data from the server.

Sends http POST request to submit or load the data to the


Post()
server.
Sends http GET request to load JSON encoded data from
getJSON()
the server.

Sends http GET request to load the JavaScript file from the
getScript()
server and then executes it.

Sends http request to load the html or text content from the
load()
server and add them to DOM element(s).

47/22
jQuery Ajax Events
jQuery Ajax
Description
Events
Register a handler function to be called when Ajax
ajaxComplete()
requests complete.
Register a handler function to be called when Ajax
ajaxError()
requests complete with an error.
Register a handler function to be called before Ajax
ajaxSend()
request is sent.
Register a handler function to be called when the
ajaxStart()
first Ajax request begins.
Register a handler function to be called when all the
ajaxStop()
Ajax requests have completed.

Register a handler function to be called when Ajax


ajaxSuccess()
request completes successfully.

48/22
Advantages of jQuery Ajax
1. Cross-browser support
2. Simple methods to use
3. Ability to send GET and POST requests
4. Ability to Load JSON, XML, HTML or Scripts

49/22

You might also like