Published on

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Microsoft – Atlas Technology which will be released in October
  • You might ask, “Well, why doesn’t the browser talk directly to the partner site?” This is by design. The reason is because of Web browser security. Because of the 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. JSON solves this issue, as you will see later in this chapter .
  • Mashup

    1. 1. Presented By Naveen P.N
    2. 2. <ul><li>N.R.Ananthanarayanan (SR. Lect. Dept of C.S.E) </li></ul><ul><li>R.Vasanth Kumar Mehta ( Lect . Dept of C.S.E) </li></ul><ul><li>E.Sankar (Systems Engineer,Dept of C.S.E) </li></ul>Build a Better Web Interface Using AJAX
    3. 3. <ul><li>A Mashup is a light weight web application, that combines functionality or content from existing sources. </li></ul><ul><li>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 . </li></ul>Build a Better Web Interface Using AJAX
    4. 4. 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
    5. 5. Build a Better Web Interface Using AJAX
    6. 6. <ul><li>Web Services: </li></ul><ul><ul><li>A new way of reuse/integrate third party softwre or legacy system </li></ul></ul><ul><ul><li>No matter where the software is, what platform it residents, or which language it was written in </li></ul></ul><ul><ul><li>Based on XML and Internet protocols (HTTP, SMTP … ) </li></ul></ul><ul><li>Benefits: </li></ul><ul><ul><li>Ease of integration </li></ul></ul><ul><ul><li>Develop applications faster </li></ul></ul><ul><li>An application programming interface ( API ) is a set of functions, procedures, methods or classes [1 library or service provides to support requests made by computer programs ] </li></ul>Build a Better Web Interface Using AJAX
    7. 7. <ul><li>Representational State Transfer (REST) </li></ul><ul><ul><li>Use HTTP Get method to invoke remote services (not XML) </li></ul></ul><ul><ul><li>The response of remote service can be in XML or any textual format </li></ul></ul><ul><ul><li>Benefits: </li></ul></ul><ul><ul><ul><li>Easy to develop </li></ul></ul></ul><ul><ul><ul><li>Easy to debug (with standard browser) </li></ul></ul></ul><ul><ul><ul><li>Leverage existing web application infrastructure </li></ul></ul></ul>Build a Better Web Interface Using AJAX
    8. 8. <ul><li>Continued… </li></ul><ul><li>Really Simple Syndication (RSS, Atom) </li></ul><ul><ul><li>XML-based standard </li></ul></ul><ul><ul><li>Designed for news-oriented websites to “Push” content to readers </li></ul></ul><ul><ul><li>Excellent to monitor new content from websites </li></ul></ul>Build a Better Web Interface Using AJAX
    9. 9. <ul><li>In the days before Web services and XML, people were combining Web sites together using frames and iFrames. </li></ul>
    10. 10. <ul><li>In all seriousness, this technique really doesn’t count as a mashup, although you can still find it in use if you look hard enough. </li></ul><ul><li>IFrame </li></ul><ul><ul><li>IFRAME is a “mini-browser” window in an HTML document </li></ul></ul><ul><ul><li>Can be hidden (0 width, 0 height) </li></ul></ul><ul><ul><li>IFRAME can call a URL </li></ul></ul><ul><ul><li>Hears a click as server submits request </li></ul></ul><ul><ul><li>Much slower than XMLHTTPRequest </li></ul></ul>Build a Better Web Interface Using AJAX
    11. 11. <ul><ul><li>Housing Maps downloads Craig’s List data </li></ul></ul><ul><ul><ul><li>Downloads XML data, publishes static JavaScript on a schedule </li></ul></ul></ul><ul><ul><ul><li>Expert programmers needed to set this up </li></ul></ul></ul><ul><ul><li>User requests HTML and JavaScript from Housing Maps </li></ul></ul><ul><ul><li>Google Maps and user’s browser do all the work of rendering the page! </li></ul></ul>Craig’s List Google Maps housing maps Static HTML & JavaScript Build a Better Web Interface Using AJAX
    12. 12. <ul><li> combines Google Maps data with Craigslist’s housing data and presents an integrated view of the prices of the houses at various locations on the Google map. </li></ul><ul><li>The result is a map with services placed on it </li></ul>Example: Build a Better Web Interface Using AJAX
    13. 13. = Google Maps + Craigslist Build a Better Web Interface Using AJAX
    14. 14. Deconstructing a Mashup Build a Better Web Interface Using AJAX
    15. 15. Build a Better Web Interface Using AJAX
    16. 16. Where Is the Remixing Happening? <ul><li>The remixing occurs on the server side on a web site ( 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 </li></ul>Build a Better Web Interface Using AJAX
    17. 17. <ul><li>There are three possible approaches to creating mashups. </li></ul><ul><li>Mashing on the server. </li></ul><ul><li>Mashing in the browser using Asynchronous JavaScript and XML. </li></ul><ul><li>Mashing in the browser using JSON. </li></ul>Build a Better Web Interface Using AJAX
    18. 18. Build a Better Web Interface Using AJAX
    19. 19. How It Works <ul><li>1. The Web browser communicates with the server, requesting a page using straight HTTP or HTTPS. </li></ul><ul><li>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. </li></ul><ul><li>3. Amazon returns back a SOAP response. </li></ul>Build a Better Web Interface Using AJAX
    20. 20. <ul><li>4. The second request in this example is to Yahoo using a Representational State Transfer (REST) style approach. </li></ul><ul><li>5. Yahoo responds with Plain Old XML over HTTP. </li></ul><ul><li>6. Lastly, the Web server aggregates the responses, combining and rationalizing the data in whatever manner makes sense. </li></ul><ul><li>7. The resulting data is bound to the HTML and inserted into the response, which is sent back to the browser. </li></ul>Build a Better Web Interface Using AJAX
    21. 21. Browser, server, and partner site interactions using Ajax Build a Better Web Interface Using AJAX
    22. 22. What is AJAX? <ul><ul><li>AJAX == Asynchronous JavaScript and XML </li></ul></ul><ul><ul><ul><li>refers to the ability of a browser to request data from the server in the background (asynchronously) </li></ul></ul></ul><ul><ul><ul><li>Ajax is a technique for creating “better, faster, more responsive web applications </li></ul></ul></ul><ul><li>AJAX is not a new technology, it is a method of using several existing technologies together, including </li></ul><ul><ul><li>HTML/XHTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>DOM </li></ul></ul><ul><ul><li>XML* </li></ul></ul>Build a Better Web Interface Using AJAX
    23. 23. How Ajax works <ul><li>You do something with an HTML form in your browser </li></ul><ul><li>JavaScript on the HTML page sends an HTTP request to the server </li></ul><ul><li>The server responds with a small amount of data , rather than a complete web page </li></ul><ul><li>JavaScript uses this data to modify the page </li></ul><ul><li>This is faster because less data is transmitted and because the browser has less work to do. </li></ul>
    24. 24. AJAX Technology <ul><li>DHTML DOM </li></ul><ul><ul><li>Browser DOM manipulated through JavaScript to dynamically display and interact with information </li></ul></ul><ul><ul><li>CSS styles are accessible through DOM </li></ul></ul><ul><li>JavaScript </li></ul><ul><ul><li>Loosely typed scripting language </li></ul></ul><ul><ul><li>Mostly used as the “glue” to wire things together on a page </li></ul></ul><ul><ul><li>Can quickly become hard to maintain </li></ul></ul><ul><li>XMLHttpRequest object </li></ul><ul><ul><li>Exchange data asynchronously with the web server </li></ul></ul><ul><ul><li>Any data format will work - HTML fragments, text, XML, JSON </li></ul></ul>Build a Better Web Interface Using AJAX Sri Chandrasekharendra Saraswathi Viswa Maha Vidyala
    25. 25. The XMLHttpRequest object <ul><li>if (window.XMLHttpRequest) </li></ul><ul><li>{ </li></ul><ul><li>xhr = new XMLHttpRequest(); </li></ul><ul><li>  } </li></ul><ul><li>else if (window.ActiveXObject) { </li></ul><ul><li>xhr = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); </li></ul><ul><li>  } </li></ul>
    26. 26. Preparing the XMLHttpRequest object <ul><li>Once you have an XMLHttpRequest object, you have to prepare it with the open method </li></ul><ul><li>request .open( method , URL , asynchronous ) </li></ul><ul><ul><li>The method is usually 'GET' or 'POST ' </li></ul></ul><ul><ul><li>The URL is where you are sending the data </li></ul></ul><ul><ul><ul><li>If using a 'GET' , data is appended to the URL </li></ul></ul></ul><ul><ul><ul><li>If using a 'POST' , data is added in a later step </li></ul></ul></ul><ul><ul><li>If asynchronous is true , the browser does not wait for a response (this is what you usually want) </li></ul></ul><ul><li>request .open( method , URL ) </li></ul><ul><ul><li>As above, with asynchronous defaulting to true </li></ul></ul>
    27. 27. Sending the XMLHttpRequest object <ul><li>Once the XMLHttpRequest object has been prepared, you have to send it </li></ul><ul><li>request .send(null); </li></ul><ul><ul><li>This is the version you use with a GET request </li></ul></ul><ul><li>request .send( content ); </li></ul><ul><ul><li>This is the version you use with a POST request </li></ul></ul><ul><ul><li>The content has the same syntax as the suffix to a GET request </li></ul></ul><ul><ul><li>POST requests are used less frequently than GET requests </li></ul></ul><ul><ul><li>Example: request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); request.send('var1=' + value1 + '&var2=' + value2 ); </li></ul></ul>
    28. 28. Getting the response <ul><li>Ajax uses asynchronous calls—you don’t wait for the response </li></ul><ul><li>Instead, you have to handle an event </li></ul><ul><ul><li>request.onreadystatechange = someFunction; </li></ul></ul><ul><ul><ul><li>This is a function assignment, not a function call </li></ul></ul></ul><ul><ul><ul><li>When the function is called, it will be called with no parameters </li></ul></ul></ul><ul><ul><li>function someFunction() { if(request.readyState == 4){ var response = request.responseText; // Do something with the response } } </li></ul></ul>
    29. 29. AJAX Definition Summary <ul><li>Here are the possible values for the readyState property: </li></ul><ul><li>State Description </li></ul><ul><li>0 The request is not initialized </li></ul><ul><li>1 The request has been set up </li></ul><ul><li>2 The request has been sent </li></ul><ul><li>3 The request is in process </li></ul><ul><li>4 The request is complete </li></ul>Build a Better Web Interface Using AJAX
    30. 30. How does AJAX work? <ul><li>Before AJAX can be invoked you must make your traditional HTML page request. </li></ul><ul><li>AJAX uses xmlHttpRequest to make what I call a SIDEWAYS request to the server. </li></ul><ul><li>The sideways request can be done via JavaScript or VBScript. </li></ul>Build a Better Web Interface Using AJAX
    31. 31. Classic Model <ul><li>The classic web application model works like this: </li></ul><ul><ul><li>Most user actions in the interface trigger an HTTP request back to a web server. </li></ul></ul><ul><ul><li>The server does some processing — retrieves data, crunches numbers, talks to various legacy systems </li></ul></ul><ul><ul><li>And then returns an HTML page to the client </li></ul></ul>
    32. 32. Classic Model <ul><li>This approach makes a lot of technical sense, but it doesn’t make for a great user experience. </li></ul><ul><ul><li>At every step in a task, the user waits. </li></ul></ul><ul><ul><li>The user sees the application go to the server </li></ul></ul>
    33. 33. Ajax Model Build a Better Web Interface Using AJAX <ul><li>An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web </li></ul><ul><ul><li>The Ajax engine allows the user’s interaction with the application to happen asynchronously, independent of communication with the server </li></ul></ul>
    34. 34. 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
    35. 35. 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
    36. 36. 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
    37. 37. 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
    38. 38. 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 returned if at all. Build a Better Web Interface Using AJAX
    39. 39. 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
    40. 40. 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
    41. 41. Who is using AJAX ?
    42. 42. What Difference Does Ajax Make? <ul><li>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. </li></ul><ul><li>To turn off JavaScript in your browser, do the following, depending on which browser you’re using: </li></ul><ul><li>• In Firefox, uncheck Tools ➤Options ➤Content ➤Enable JavaScript. </li></ul><ul><li>• In Internet Explorer, check Tools ➤Internet Options ➤Security </li></ul>
    43. 43. <ul><li> </li></ul><ul><li>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. </li></ul><ul><li>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. </li></ul>
    44. 45. How It Works <ul><li>1. As before, the sequence begins with the browser requesting a page from the Web server. That page is served in the standard manner. </li></ul><ul><li>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. </li></ul>Build a Better Web Interface Using AJAX
    45. 46. <ul><li>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 principal. 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! </li></ul>Build a Better Web Interface Using AJAX
    46. 47. <ul><li>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. </li></ul><ul><li>5. A SOAP request is made to Amazon. </li></ul><ul><li>6. Amazon responds with a SOAP response. </li></ul><ul><li>7. A REST request is made to Yahoo. </li></ul><ul><li>8. Yahoo processes the request and returns the data back to the server, as in the first scenario. </li></ul>Build a Better Web Interface Using AJAX
    47. 48. <ul><li>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. </li></ul><ul><li>10. Once the data is ready, it’s sent back to the browser. Meanwhile, back at the browser, life has </li></ul><ul><li>moved on. A JavaScript callback function that was named in the original request handles the </li></ul><ul><li>response when it finally arrives from the server. </li></ul>Build a Better Web Interface Using AJAX
    48. 49. <ul><li>A callback function is simply a function that is assigned to execute when a particular event fires. In this case, the callback executes when the response is received by the browser. </li></ul><ul><li>11. Typically, at this point, a transformation is applied to the XML data to convert it into XHTML, which includes data and presentation markup. (Remember, XHTML is simply well-formed HTML). </li></ul><ul><li>12. That snippet is then inserted into the page’s structure and appears before the user! </li></ul>Build a Better Web Interface Using AJAX
    49. 50. Mashing with JSON Build a Better Web Interface Using AJAX
    50. 51. How It Works <ul><li>Most JSON mashups make use of an approach known as the Dynamic Script method. It follows a flow similar to the following: </li></ul><ul><li>1. As always, the flow starts with a browser request for a page using HTTP GET. </li></ul>Build a Better Web Interface Using AJAX
    51. 52. <ul><li>2. A page is served by the Web server that contains a couple of key JavaScript functions: </li></ul><ul><li>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. </li></ul><ul><li>b. An “initiation” script is the genius of the Dynamic Script method. It adds a new script tag </li></ul><ul><li>to the page, and specifies the source for that script tag as being a URL at some partner </li></ul><ul><li>site (for example, That URL will render not HTML nor XML, but JSON. </li></ul>Build a Better Web Interface Using AJAX
    52. 53. <ul><li>3. The browser attempts to load the source code for the new script tag. </li></ul><ul><li>4. By loading the script, an HTTP GET request is made out to Amazon (or whatever the source was). </li></ul><ul><li>5. The partner site (in this case, Amazon) responds with a JavaScript object serialized into JSON </li></ul><ul><li>notation. </li></ul>Build a Better Web Interface Using AJAX
    53. 54. <ul><li>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. </li></ul><ul><li>7. The browser now attempts to execute this new piece of JavaScript. This results in a call to the </li></ul><ul><li>render method from Step 2a. </li></ul><ul><li>8. The render method is invoked and the JSON script is evaluated and turned into a JavaScript </li></ul><ul><li>object. The render method uses this new JavaScript object in its execution, and pumps the data it contains into the page. </li></ul>Build a Better Web Interface Using AJAX
    54. 55. Advantage <ul><li>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. </li></ul>Build a Better Web Interface Using AJAX
    55. 56. <ul><li>JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. </li></ul><ul><li>Why JSON is becoming important in the Web 2.0 world technically ? </li></ul><ul><ul><li>Simple to use (data and data types) </li></ul></ul><ul><ul><li>Can be process by JavaScript. </li></ul></ul>Build a Better Web Interface Using AJAX
    56. 57. Tools Available <ul><li>Yahoo! Pipes </li></ul><ul><li>Microsoft’s Popfly </li></ul><ul><li>Marmite </li></ul><ul><li>Dapper </li></ul><ul><li>Google mashup editor </li></ul><ul><li>Mashmaker </li></ul><ul><li>IBM Mashup Center </li></ul>Build a Better Web Interface Using AJAX
    57. 58. <ul><li>Too few APIs and feeds exist </li></ul><ul><li>APIs and data feeds difficult to create </li></ul><ul><ul><li>Requires developer and IT resources </li></ul></ul><ul><ul><li>Competes with IT budget for core business applications </li></ul></ul><ul><ul><li>Immature tools for “mashing up” the data </li></ul></ul><ul><li>Existing data collection tools optimized for structured enterprise data sources (ie; databases) </li></ul><ul><ul><li>Vast amounts of valuable data is unstructured (enterprise web app’s, spreadsheets, PDF’s, public web, trading partners, etc.) </li></ul></ul><ul><li>The biggest obstacle is getting access to data you need… </li></ul>Challenges With Mashups Today Build a Better Web Interface Using AJAX
    58. 59. # of Users Have API’s Unlikely to have API’s craigslist The vast majority of sites have no API to their data Build a Better Web Interface Using AJAX
    59. 60. Large International Enterprise: “We have over 6000 internal web sites and no APIs.” # of Users Have API’s Unlikely to have API’s CRM HR ERP Build a Better Web Interface Using AJAX
    60. 61. <ul><li>Run by lines of business </li></ul><ul><li>Situational business driven </li></ul><ul><li>Self-service IT </li></ul><ul><li>Run by central IT </li></ul><ul><li>Company wide usage </li></ul><ul><li>Mission critical </li></ul>Cost per application Fundamental Enterprise transaction systems CRM HR ERP Addressing “tacit” tasks for line of business
    61. 62. <ul><li>Housing Maps </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>JavaScript mashup of Google Maps and rental data from Craig’s List </li></ul></ul><ul><li>Chicago Crime </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>JavaScript Mashup of Google Maps and Chicago crime statistics </li></ul></ul><ul><li>Google Flight Simulator </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Flash mashup of Google Maps and an airplane video game </li></ul></ul>Examples of Mashups Build a Better Web Interface Using AJAX
    62. 63. Conclusions <ul><li>Mashup environments target different user groups – programmers, technology enthusiasts, non technical users </li></ul><ul><li>Best visual tools for non technical users hide data exchange formats and provide blocks for every service that user is likely to integrate </li></ul><ul><li>Advanced functionality will keep environments on the float by letting users provide support for new services </li></ul><ul><li>Standard technologies are preferred </li></ul><ul><li>New direction – enhancing browsing experience </li></ul>Build a Better Web Interface Using AJAX
    63. 64. Build a Better Web Interface Using web 2.0