My Presentation On Ajax


Published on

Published in: Technology
1 Like
  • Be the first to comment

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

No notes for slide

My Presentation On Ajax

  1. 1. A presentation By Abdul Ghaffar Khan (7/13/2007)
  2. 2. Introduction to AJAX • • How Is Ajax Different? The AJAX Model • Why AJAX? The Benefits .. • Examples of AJAX • Benefit to Business • Big Picture . The Scope… • Disadvantages of AJAX • Conclusion Note: This presentation has two parts, the other part contains a real demo of AJAX application with it implementation details.
  3. 3. AJAX, which stands for Asynchronous JavaScript And XML, is a programming technique that combines different technologies. It includes a standard user interface using (X)HTML and CSS, dynamic elements and interaction via the DOM (Document Object Model) and asynchronous data exchange using the XMLHttpRequest object. JavaScript is used to tie these elements together, adding logic and dynamically updating the user interface as needed. . . ?..ok, Sounds more technical In other words, Ajax is a set of programming techniques or a particular approach to Web programming. These programming techniques involve being able to seamlessly update a Web page or a section of a Web application with input from the server, but without the need for an immediate page refresh.
  4. 4. WEB MODEL DESKTOP Server Application + Network Application + User Interface Data • Less responsive Client • Click and wait situation for • Instantaneous processing and response the user interacting with user User Interface • no delay . interface the response from • More interactive application running on a different location • No processing on client side , no spontaneous response •On every user query /action there is a huge un-necessary data transfer on network to get the result from server. •In an application that requires a lot of interactivity with the business layer sitting on the server, the user must reload the entire page many times. This has implications for the efficiency of workflow, the load placed on the server hosting the application, and the productivity of users.
  5. 5. Dynamic content on a Web page without a page o refresh Eliminates the traditional quot;Click-and-Waitquot; Web- o application architecture of yesterday, making it possible to provide the responsiveness and interactivity (dynamic contents)users expect from desktop applications. Ability to pull data from the server after the page o is loaded in browser. contrasts with what is now referred as the quot;traditional architecture.quot; In which the user must wait for the entire Web page to reload to see new results from the server.
  6. 6. TRADATIONAL MODEL AJAX MODEL AJAX can update smaller portions of a web page's content. Reloading the entire web page to display The page uses JavaScript to request new content from the updated content in response to some user server and place that content into a designated area on the action page. A sample Traditional vs. Ajax The Results Traditional Performance Performance Ajax (Average) (Average) Increase Increase (%) Bytes 1,737,607 460,799 1,276,809 73% Transferred: Time (seconds): 115 78 36 32%
  7. 7. The main reason to use AJAX is to enhance the o interactivity of a web application. With AJAX, users receive feedback from programs much faster. The normal cycle of quot;click-and-waitquot; is broken, and the interface acts and feels more like a native, client-side desktop application AJAX application, can send asynchronous requests to the web server to o retrieve only the data that is needed. Using an extra layer of JavaScript, the application does not slow down the user interface. It makes the application more responsive, because the amount of data o exchanged between browser and server is vastly reduced. Use of client Less processing to be done on the o server side, because a lot of the tasks of the application are performed by the client. are available that aid the AJAX development process and reduce the o amount of JavaScript code If a page section encounters an error, other sections are not affected o Traffic to and from the server is reduced considerably o – because you do not have to send the entire page content (CSS, images, static sections), the bandwidth usage is most likely to decrease.
  8. 8. Here I am presenting a real example to demonstrate the advantages AJAX and a comparison. For this purpose I have created two similar application with and without AJAX. These applications have four data controls for user interaction, most of these controls are dependent on the data in other control to get it own data. Means, to complete this form a user must transfer this whole page ten times between server and client. It relates to a simple sales business, based on the famous North Wind database. Here is the list of events that take place on server and client side to complete this simple task. First it presents a form with the list of employee, user selects an employee and submits 1. the for. Server returns the form with a list of customers of the selected employee. 2. User selects a customer and submits the same form. 3. Server returns the same form with a new list of order from that customer to that employee. 4. User selects an order and submits the form again. 5. Server returns the form with a list of detail orders of that order. 6. User selects a detail order and submits it again. 7. Server accepts the form and process the selected detail order and resent the form with 8. some final results.
  9. 9. I have developed another application to perform the same task plus to demonstrate other AJAX features that includes… Enhanced user interface 1. Dynamic and more interactive layout. 2. Continuous, real time desktop like response to the user actions. 3. An application portal to demonstrate the behavior of Desktop 4. MDI application to run in a web browser Demonstration the flexibility of designing desktop like custom 5. components for web application to. Lets check it …
  10. 10. Time is money. Over many repetitions, the time  employees spend waiting for the page to load can add up to significant costs. Increased efficiency in the user interface can often mean that time is  saved at the task level, offering opportunities for concrete cost savings there. The cost of bandwidth does not increase linearly, but does increase as  the company invests in larger-capacity Internet connections and new hardware to accommodate greater server loads. A firm's cost structure for bandwidth depends on the scale of their operation and these capital investment needs. That being said, the cost of bandwidth can be measured if this cost structure is known. If repetitious tasks consume a lot of bandwidth, these costs can escalate dramatically. The amount of bandwidth consumed also has implications for time savings. Reducing the number of steps has implications for the amount of time consumed but also for  the number of opportunities for error. Fewer errors mean cost savings down the road when these errors would have to be manually corrected. Quite often these days, Web-based applications are used to replace desktop applications that had  superior user interfaces. The benefits of offering users a similar or even just a familiar user interface to what they use on the desktop means lower training costs, fewer errors, and greater initial productivity. : More responsive applications can improve productivity not just by  reducing quot;wait,quot; but by promoting a more fluid, uninterrupted workflow. In a responsive application, users can move rapidly from one action to another as quickly as they can visualize the workflow. Less responsive applications can defeat the user's workflow visualization by forcing them to continually wait for program information.  Ajax Cost Savings = Hourly Labor Rate X (Seconds Saved per Transaction X Number of Transactions per year) / 3600 Looking at a conservative potential time savings of 36 seconds per transaction, if a business performs 50,000 of these transactions per year, and a labor cost of $20/hour, we see a total labor savings of $10,000 per year, or 500 man hours, on this transaction type alone.
  11. 11. Sophisticated user interface controls and effects: Controls such as trees, menus, data tables, rich  text editors, calendars, and progress bars allow for better user interaction and interaction with HTML pages, generally without requiring the user to reload the page.  A specific portion of form data such as an email address, name, or city name may be auto  completed as the user types. and server push   An HTML page can obtain data using a server-side proxy or by including an external  script to mix external data with your application's or your service's data. For example, you can mix content or data from a third-party application such as Google Maps with your own application. Ajax techniques can be made to create single-page applications that look and feel much  like a desktop application.
  12. 12. Application involves heavy server requests, with multiple web forms that submit  data to the server. Want to display large amounts of data in a sequential manner without refreshing  the entire page. Users interact frequently with the application through forms to decide what to  display, rather then submitting data. Application response time is a concern.  Loading times have to be as short as possible. 
  13. 13. can increase development time and costs.  frameworks and components still need to completely mature.  browser history and bookmarks will not be able to restore the exact page  state Complexity: Server-side developers will need to understand that  presentation logic will be required in the HTML client pages as well as in the server-side logic to generate the XML content needed by the client HTML pages. HTML page developers need to have a basic understanding of JavaScript technology to create new Ajax functionality. Other options such as Project jMaki and Project Dynamic Faces provide a way for Java developers to better use Ajax functionality without requiring deep knowledge of JavaScript technology. Debugging: Ajax applications are also difficult to debug because the  processing logic is embedded both in the client and on the server. Browser add-ons such as Mozilla Firebug have emerged to make debuging easier. Frameworks such as the Google Web Toolkit have emerged to allow for client and server round-trip debugging.
  14. 14. What is evident is that prominent web applications are increasingly becoming more interactive.