Ajax Ppt 1


Published on

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ajax Ppt 1

  1. 1. Ajax --M J Prakash
  2. 2. Ajax Session Agenda <ul><li>Why we need Ajax? </li></ul><ul><li>What Actually Ajax? </li></ul><ul><li>How Ajax Works? </li></ul><ul><li>Why Ajax Become Popular? </li></ul><ul><li>How Ajax is Different from normal Applications? </li></ul><ul><li>Examples with Raw Ajax </li></ul><ul><li>Ajax Frame Works? </li></ul><ul><li>Examples with Frame works? </li></ul><ul><li>Ajax Benefits </li></ul><ul><li>Ajax Most Popular sites? </li></ul>
  3. 3. Need Of Ajax <ul><li>To build Rich Internet Applications </li></ul>* Time shown with out day light savings What is the Rich Internet Applications?
  4. 4. Rich Internet Applications <ul><li>These are the web applications that have the functionality and features of traditional desktop applications. </li></ul><ul><li>This applications typically runs in web browser(not need any softwarre installation) </li></ul><ul><li>Transfers the processing neccessary for the user interface to webclient and keep the bulk of the back on to server. </li></ul>
  5. 5. Benefits From RIAs <ul><li>Benifits </li></ul><ul><li>Richer </li></ul><ul><li>More Responsive </li></ul><ul><li>Client /Server Balance </li></ul><ul><li>Asynchronous Communication </li></ul><ul><li>NetWork Efficiency </li></ul>
  6. 6. Introduction Of AJAX <ul><li>AJAX , is a web development technique used for creating interactive web applications . </li></ul><ul><li>The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. </li></ul><ul><li>This is intended to increase the web page's interactivity, speed, functionality, and usability </li></ul>
  7. 7. What actually Ajax <ul><li>(Js+Css+Dom+xmlHttpRequest+xml)  AJAX </li></ul><ul><li>---- Jesse James Garrett </li></ul><ul><li>Ajax is n’t a technology.It’s really several technologies,each flourishing in its own right, </li></ul><ul><li>coming together in powerful as Ajax. </li></ul><ul><li>--Standards-based presentation using X/HTML and Css </li></ul><ul><li>--Dynamic display and interaction using the </li></ul><ul><li>Document Object Model(DOM) </li></ul><ul><li>--Data interchange and manipulation using XML and XLST </li></ul><ul><li>--Asynchronous data retrieval using XmlHTTPRequest. </li></ul><ul><li>And JavaScript for carrying events from HTML body to HTML head. </li></ul>
  8. 8. How Ajax Works
  9. 9. How Ajax Works with Simple Example <ul><li>A client event occurs. </li></ul><ul><li>An XMLHttpRequest object is created and configured. </li></ul><ul><li>The XMLHttpRequest object makes a call. </li></ul><ul><li>The request is processed by the ValidateServlet. </li></ul><ul><li>The ValidateServlet returns an XML document containing the result. </li></ul><ul><li>The XMLHttpRequest object calls the callback() function and processes the result. </li></ul><ul><li>The HTML DOM is updated. </li></ul>
  10. 10. Simple Example
  11. 11. Why Ajax Become Popular <ul><li>Sites like </li></ul><ul><ul><ul><li>Google Mail (Gmail.com) , </li></ul></ul></ul><ul><ul><ul><li>Google Maps (google.com/maps), </li></ul></ul></ul><ul><ul><ul><li>Google Groups, </li></ul></ul></ul><ul><ul><ul><li>Google Suggest, </li></ul></ul></ul><ul><ul><ul><li>Flickr, </li></ul></ul></ul><ul><ul><ul><li>and Amazon’s A9.com have really made AJAX popular. </li></ul></ul></ul><ul><li>These projects demonstrate that Ajax is not another technology that only works in a laboratory, but also practical for real-world applications And also Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps. </li></ul>
  12. 12. How Ajax is Different from normal Applications
  13. 13. How Classic web application model works <ul><li>Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing — retrieving data, crunching numbers, talking to various legacy systems — and then returns an HTML page to the client. </li></ul>
  14. 14. How Classic web application model works <ul><li>This approach makes a lot of technical sense, but it doesn’t make for a great user experience and arise questions like </li></ul>While the server is doing its thing, what’s the user doing? --Waiting.
  15. 15. How Ajax Application Model Works <ul><li>An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true. </li></ul><ul><li>Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript . </li></ul>
  16. 16. Ajax Engine Responsibilities <ul><li>The Engine Responsibilities:- </li></ul><ul><ul><li>Rendering the interface the user sees </li></ul></ul><ul><ul><li>Communicating with the server on the user’s behalf. </li></ul></ul><ul><ul><li>The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window </li></ul></ul>
  17. 17. The synchronous interaction pattern of a traditional web application (top) compared with the asynchronous pattern of an Ajax application (bottom).
  18. 18. Examples with Raw Ajax
  19. 19. Ajax Frame Works <ul><li>The goal of the framework is to provide the Ajax engine. </li></ul><ul><li>Framework eases the work of the Ajax programmer at two levels: - </li></ul><ul><ul><ul><li>On the client side:- </li></ul></ul></ul><ul><ul><ul><ul><li>It offers JavaScript functions to send requests to the server. </li></ul></ul></ul></ul><ul><ul><ul><li>On the server side:- </li></ul></ul></ul><ul><ul><ul><ul><li>It processes the requests, searches for the data, and transmits them to the browser... </li></ul></ul></ul></ul>
  20. 20. Ajax FrameWorks Types Ajax Frame Works Direct Ajax FWs Ajax component Server-driven Ajax language/platform
  21. 21. Frameworks by language/platform <ul><li>JavaScript -- JavaScript Frameworks are browser-side frameworks </li></ul><ul><li>Ex:-JQuery,Prototype,Yahoo UI Library,DojoToolKit,Qooxdoo, </li></ul><ul><li>Clean Ajax,Ext, Spry framework , Script.aculo.us </li></ul><ul><li>C++ -- C++ Toolkits are interfaces to AJAX technology. </li></ul><ul><li>Ex:-Wt(witty) </li></ul><ul><li>Java -- Such frameworks permit the use of Java web services interactively with web pages. </li></ul><ul><li>DWR , a remoting toolkit and DHTML library , </li></ul><ul><li>Google Web Toolkit , a widget library with Java to Javascript compiler </li></ul><ul><li>ThinWire , open source Swing-like AJAX framework for developing web applications </li></ul><ul><li>Echo , a java framework for AJAX servlets </li></ul><ul><li>.NET </li></ul><ul><li>ASP.NET AJAX , Ajax.NET Professional </li></ul><ul><li>PHP </li></ul><ul><li>Xajax ,Sajax </li></ul>
  22. 22. Examples with Frame works <ul><li>Yahoo ,DWR, DOJO </li></ul><ul><ul><ul><ul><ul><li>Path </li></ul></ul></ul></ul></ul>
  23. 23. Ajax Benefits <ul><li>--Richer User Interface </li></ul><ul><li>--More Responsive </li></ul><ul><li>--Client /Server Balance </li></ul><ul><li>--NetWork Efficiency </li></ul>
  24. 24. Ajax More Popular Sites
  25. 25. Why Ajax is Bad <ul><li>Disabled scripting </li></ul><ul><li>Loss of visibility to search engines </li></ul><ul><li>Building an Ajax-Powered Application will increase development time. </li></ul><ul><li>Error Debugging very Difficult. </li></ul>
  26. 26. Questions QUESTIONS ?
  27. 27. ThanK U Meet me:-jayaprakash.narayanam@cgi.com Mail me:-jayaprakash.narayanam@cgi.com