SlideShare a Scribd company logo

Mashup

•Download as PPT, PDF•
•
N
Naveen P.N

The document discusses various techniques for building mashups including AJAX. It defines mashups as lightweight web applications that combine content from existing sources via public APIs. It describes how AJAX uses XMLHttpRequest to asynchronously retrieve data from servers in the background without page refreshes. This improves responsiveness. JSON is also discussed as a data format used for mashups. Challenges with mashups include lack of APIs and difficulties accessing unstructured internal data.

Related slideshows

Ajax
AjaxAjax
Ajax
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Ajax
AjaxAjax
Ajax
 
1 of 64
Presented By Naveen P.N
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 AJAX
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 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
Build a Better Web Interface Using AJAX
Web Services: A new way of reuse/integrate third party softwre 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 classes [1 library or service provides to support requests made by computer programs ] Build a Better Web Interface Using AJAX
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 AJAX
Continued… Really Simple Syndication (RSS, Atom) 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 AJAX
In the days before Web services and XML, people were combining Web sites together using frames and iFrames.
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. 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 AJAX
Housing Maps downloads Craig’s List data Downloads XML data, publishes static JavaScript on a schedule Expert programmers needed to set this up User requests HTML and JavaScript from Housing Maps Google Maps and user’s browser do all the work of rendering the page! Craig’s List Google Maps housing maps Static HTML & JavaScript Build a Better Web Interface Using AJAX
www.housingmaps.com 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. The result is a map with services placed on it Example: Build a Better Web Interface Using AJAX
HousingMaps.com = Google Maps + Craigslist Build a Better Web Interface Using AJAX
Deconstructing a Mashup Build a Better Web Interface Using AJAX
Build a Better Web Interface Using AJAX
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 AJAX
There are three possible approaches to creating mashups. Mashing on the server. Mashing in the browser using Asynchronous JavaScript and XML. Mashing in the browser using JSON. Build a Better Web Interface Using AJAX
Build a Better Web Interface Using AJAX
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 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. 3. Amazon returns back a SOAP response. Build a Better Web Interface Using AJAX
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 AJAX
Browser, server, and partner site interactions using Ajax Build a Better Web Interface Using AJAX
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 You do something with an HTML form in your browser JavaScript on the HTML page sends an HTTP request to the server The server responds with a small amount of data , rather than a complete web page 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.
AJAX Technology DHTML DOM Browser DOM manipulated through JavaScript to dynamically display and interact with information CSS styles are accessible through DOM JavaScript Loosely typed scripting language Mostly used as the “glue” to wire things together on a page Can quickly become hard to maintain XMLHttpRequest object Exchange data asynchronously with the web server Any data format will work - HTML fragments, text, XML, JSON Build a Better Web Interface Using AJAX Sri Chandrasekharendra Saraswathi Viswa Maha Vidyala
The XMLHttpRequest object if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();   } else if (window.ActiveXObject) { xhr = 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 asynchronous is true , the browser does not wait for a response (this is what you usually want) 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 Example: request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); request.send('var1=' + value1 + '&var2=' + value2 );
Getting the response Ajax uses asynchronous calls—you don’t 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 The request is not initialized 1 The request has been set up 2 The request has been sent 3 The request is in process 4 The request is complete Build a Better Web Interface Using AJAX
How does AJAX work? Before AJAX can be invoked you must make your traditional HTML page request. AJAX uses xmlHttpRequest to make what I call a SIDEWAYS request to the server. The sideways request can be done via JavaScript or VBScript. Build a Better Web Interface Using AJAX
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 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
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
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
Who is using AJAX ?
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 you’re 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. 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.
 
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 AJAX
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! Build a Better Web Interface Using AJAX
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, it’s 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
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. 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). 12. That snippet is then inserted into the page’s structure and appears before the user! 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. Build a Better Web Interface Using AJAX
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. Build a Better Web Interface Using AJAX
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
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. Why JSON is becoming important in the Web 2.0 world technically ? Simple to use (data and data types) Can be process by JavaScript. Build a Better Web Interface Using AJAX
Tools Available Yahoo! Pipes Microsoft’s Popfly Marmite Dapper Google mashup editor Mashmaker IBM Mashup Center Build a Better Web Interface Using AJAX
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 app’s, spreadsheets, PDF’s, public web, trading partners, etc.) The biggest obstacle is getting access to data you need… Challenges With Mashups Today Build a Better Web Interface Using AJAX
# 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
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
Run by lines of business Situational business driven Self-service IT Run by central IT Company wide usage Mission critical Cost per application Fundamental Enterprise transaction systems CRM HR ERP Addressing “tacit” tasks for line of business
Housing Maps http://housingmaps.com JavaScript mashup of Google Maps and rental data from Craig’s 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 Examples of Mashups Build a Better Web Interface Using AJAX
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 Standard technologies are preferred New direction – enhancing browsing experience Build a Better Web Interface Using AJAX
Build a Better Web Interface Using web 2.0

More Related Content

Mashup

  • 1. Presented By Naveen P.N
  • 2. 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 AJAX
  • 3. 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 AJAX
  • 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. Build a Better Web Interface Using AJAX
  • 6. Web Services: A new way of reuse/integrate third party softwre 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 classes [1 library or service provides to support requests made by computer programs ] Build a Better Web Interface Using AJAX
  • 7. 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 AJAX
  • 8. Continued… Really Simple Syndication (RSS, Atom) 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 AJAX
  • 9. In the days before Web services and XML, people were combining Web sites together using frames and iFrames.
  • 10. 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. 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 AJAX
  • 11. Housing Maps downloads Craig’s List data Downloads XML data, publishes static JavaScript on a schedule Expert programmers needed to set this up User requests HTML and JavaScript from Housing Maps Google Maps and user’s browser do all the work of rendering the page! Craig’s List Google Maps housing maps Static HTML & JavaScript Build a Better Web Interface Using AJAX
  • 12. www.housingmaps.com 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. The result is a map with services placed on it Example: Build a Better Web Interface Using AJAX
  • 13. HousingMaps.com = Google Maps + Craigslist Build a Better Web Interface Using AJAX
  • 14. Deconstructing a Mashup Build a Better Web Interface Using AJAX
  • 15. Build a Better Web Interface Using AJAX
  • 16. 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 AJAX
  • 17. There are three possible approaches to creating mashups. Mashing on the server. Mashing in the browser using Asynchronous JavaScript and XML. Mashing in the browser using JSON. Build a Better Web Interface Using AJAX
  • 18. Build a Better Web Interface Using AJAX
  • 19. 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 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. 3. Amazon returns back a SOAP response. Build a Better Web Interface Using AJAX
  • 20. 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 AJAX
  • 21. Browser, server, and partner site interactions using Ajax Build a Better Web Interface Using AJAX
  • 22. 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
  • 23. How Ajax works You do something with an HTML form in your browser JavaScript on the HTML page sends an HTTP request to the server The server responds with a small amount of data , rather than a complete web page 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.
  • 24. AJAX Technology DHTML DOM Browser DOM manipulated through JavaScript to dynamically display and interact with information CSS styles are accessible through DOM JavaScript Loosely typed scripting language Mostly used as the “glue” to wire things together on a page Can quickly become hard to maintain XMLHttpRequest object Exchange data asynchronously with the web server Any data format will work - HTML fragments, text, XML, JSON Build a Better Web Interface Using AJAX Sri Chandrasekharendra Saraswathi Viswa Maha Vidyala
  • 25. The XMLHttpRequest object if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();   } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP");   }
  • 26. 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 asynchronous is true , the browser does not wait for a response (this is what you usually want) request .open( method , URL ) As above, with asynchronous defaulting to true
  • 27. 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 Example: request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); request.send('var1=' + value1 + '&var2=' + value2 );
  • 28. Getting the response Ajax uses asynchronous calls—you don’t 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 } }
  • 29. AJAX Definition Summary Here are the possible values for the readyState property: State Description 0 The request is not initialized 1 The request has been set up 2 The request has been sent 3 The request is in process 4 The request is complete Build a Better Web Interface Using AJAX
  • 30. How does AJAX work? Before AJAX can be invoked you must make your traditional HTML page request. AJAX uses xmlHttpRequest to make what I call a SIDEWAYS request to the server. The sideways request can be done via JavaScript or VBScript. Build a Better Web Interface Using AJAX
  • 31. 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
  • 32. Classic Model 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
  • 33. 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
  • 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. 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. 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. 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. 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. 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. 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. Who is using AJAX ?
  • 42. 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 you’re using: • In Firefox, uncheck Tools ➤Options ➤Content ➤Enable JavaScript. • In Internet Explorer, check Tools ➤Internet Options ➤Security
  • 43. 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. 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.
  • 44.  
  • 45. 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 AJAX
  • 46. 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! Build a Better Web Interface Using AJAX
  • 47. 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
  • 48. 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 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
  • 49. 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. 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). 12. That snippet is then inserted into the page’s structure and appears before the user! Build a Better Web Interface Using AJAX
  • 50. Mashing with JSON Build a Better Web Interface Using AJAX
  • 51. 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
  • 52. 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. Build a Better Web Interface Using AJAX
  • 53. 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
  • 54. 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. Build a Better Web Interface Using AJAX
  • 55. 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
  • 56. 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. Why JSON is becoming important in the Web 2.0 world technically ? Simple to use (data and data types) Can be process by JavaScript. Build a Better Web Interface Using AJAX
  • 57. Tools Available Yahoo! Pipes Microsoft’s Popfly Marmite Dapper Google mashup editor Mashmaker IBM Mashup Center Build a Better Web Interface Using AJAX
  • 58. 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 app’s, spreadsheets, PDF’s, public web, trading partners, etc.) The biggest obstacle is getting access to data you need… Challenges With Mashups Today Build a Better Web Interface Using AJAX
  • 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
  • 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
  • 61. Run by lines of business Situational business driven Self-service IT Run by central IT Company wide usage Mission critical Cost per application Fundamental Enterprise transaction systems CRM HR ERP Addressing “tacit” tasks for line of business
  • 62. Housing Maps http://housingmaps.com JavaScript mashup of Google Maps and rental data from Craig’s 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 Examples of Mashups Build a Better Web Interface Using AJAX
  • 63. 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 Standard technologies are preferred New direction – enhancing browsing experience Build a Better Web Interface Using AJAX
  • 64. Build a Better Web Interface Using web 2.0

Editor's Notes

  1. Microsoft – Atlas Technology which will be released in October
  2. 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 .