1 / 24

Ajax Introduction

Ajax Introduction. Today’s Agenda. What is Ajax? Need of Ajax How Ajax works? Why Ajax?. Ajax:. Ajax is shorthand for Asynchronous JavaScript and XML HTML is used to build Web forms and identify fields for use Dynamic HTML, helps you update your forms dynamically

brandy
Download Presentation

Ajax Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ajax Introduction

  2. Today’s Agenda What is Ajax? Need of Ajax How Ajax works? Why Ajax?

  3. Ajax: • Ajax is shorthand for Asynchronous JavaScript and XML • HTML is used to build Web forms and identify fields for use • Dynamic HTML, helps you update your forms dynamically • DOM, the Document Object Model, will be used to work with both the structure of your HTML and XML returned from the server. • XMLHttpRequest objects enable asynchronous data exchange with web servers • JavaScript on the client-side browser combined with XMLHttp enable communication between client and server browsers

  4. Need for Ajax: • Instead of whole internet pages being refreshed, just the elements that have been changed are refreshed • Dynamic,quick response,with reduce waiting time

  5. Steps to Implement Ajax: • Create an XMLHttpRequest object the multi-browser way • Get whatever data you need from the Web form. • Build the URL to connect to. • Open a connection to the server. • Set up a function for the server to run when it's done. • Send the request.

  6. PROCESS DIAGRAM:

  7. Why Ajax? • XHR Support across all browsers • Based on DOM, CSS, XHTML • Emergence of broadband • AJAX-based JavaScript can take considerable bandwidth to download • The “Killer App” - Google Maps • A Catchy Acronym • Coined by Jesse James Garrett of Adaptive Path (February 2005)

  8. Why Ajax?

  9. Why Ajax?

  10. Ajax Alternatives: Macromedia Flash Requires a plug-in So what? It comes already with almost every browser Java Web Start/Applets .NET – No Touch Deployment Both need a runtime preinstalled Handheld device browsers generally do not support the full range of Ajax technologies.

  11. Implementing AJAX: • To implement AJAX we need to answer three questions: • What triggers the AJAX request? • Usually a JavaScript event (onblur, onclick, etc.) • What is the server process that handles the AJAX request and issues the response? • Some kind of URL (use a Service Locator) • What processes the response from the server(what is the callback method)? • A JavaScript function that gets the response and manipulates the DOM, based on the text returned.

  12. Starting from the browser: • Your browser must allow JavaScript, or Ajax won’t work • Otherwise, there’s nothing special required of the browser • Your browser has some some way of providing data to the server—usually from an HTML form • JavaScript has to handle events from the form, create an XMLHttpRequestobject, and send it (via HTTP) to the server • Nothing special is required of the server—every server can handle HTTP requests • Despite the name, the XML HttpRequestobject does not require XML

  13. Drawbacks:

  14. One of the Biggest Problem with AJAX: • Let’s imagine that each request sent over the wire is like a car driving from point A (the client) to point B (the server) • Roads are Networks

  15. One of the Biggest Problem with AJAX:

  16. One of the Biggest Problem with AJAX: • Simple requests seem to work just fine…

  17. One of the Biggest Problem with AJAX:

  18. One of the Biggest Problem with AJAX:

  19. One of the Biggest Problem with AJAX:

  20. One of the Biggest Problem with AJAX: • problem with AJAX has to do with multipledependent asynchronous requests

  21. One of the Biggest Problem with AJAX:

  22. One of the Biggest Problem with AJAX:

  23. One of the Biggest Problem with AJAX:

  24. Real-Life Examples of AJAX Apps • Google maps • http://maps.google.com/ • Google suggest • http://www.google.com/webhp?complete=1&hl=en • Gmail • http://gmail.com/ • A9.com – Amazon.com search • http://a9.com/ • Many more are popping everywhere

More Related