16. ajax - Ajax Asynchronous JavaScript XML Mark Andreessen Netscape 1995\"MS Windows will be reduced to a poorly debugged set of device drivers running

16. ajax - Ajax Asynchronous JavaScript XML Mark Andreessen...

This preview shows page 1 - 8 out of 68 pages.

© 2007-2015 Marco Papa & Ellis Horowitz 1 Ajax A synchronous Ja vaScript + X ML Mark Andreessen, Netscape, 1995: "MS Windows will be reduced to a poorly debugged set of device drivers running under Netscape Navigator, with desktop-style applications running inside the browser". This did not happen until 10 years later (true/false?)
Image of page 1
© 2007-2015 Marco Papa & Ellis Horowitz 2 A synchronous Ja vaScript + X ML Ajax isn’t a technology. It’s really several technologies. Ajax incorporates: – standards-based presentation using XHTML; – CSS, dynamically manipulated using JavaScript; – dynamic display and interaction using the Document Object Model (DOM). Web page exposed as DOM object; – data interchange using XML and data manipulation using XSLT (not supported by all browsers); – asynchronous data retrieval using XMLHttpRequest, a JavaScript object, a.k.a “Web remoting”; – JavaScript binding everything together; – Server no longer performs display logic, only business logic. Acronym originated by Jesse James Garrett
Image of page 2
© 2007-2015 Marco Papa & Ellis Horowitz 3 Some History and Browsers Supporting Ajax The XMLHttpRequest object is the main element of Ajax programming Microsoft first implemented the XMLHttpRequest object in Internet Explorer 5 for Windows as an ActiveX object. Similar functionality is covered in a recommended W3C standard, Document Object Model (DOM) Level 3 Load and Save Specification (April 2004): Engineers on the Mozilla project implemented a compatible native version for Mozilla 1.0 (included in Netscape 7, Firefox 1.0 and later releases). Apple has done the same starting with Safari 1.2. Other browsers supporting XMLHttpRequest include: – Opera 7.6 and above – Apple Safari 1.2 and above – Mobile browsers
Image of page 3
An Example Using Ajax - Google Maps © 2007-2015 Marco Papa & Ellis Horowitz 4 Initial screen zoom 3 times drag map east and zoom Notice that the page is never explicitly refreshed View source and search for XMLHttpRequest; You will find multiple occurrences
Image of page 4
© 2007-2015 Marco Papa & Ellis Horowitz 5 Mashup Example – A combination of satellite photos with records of home sale prices placed on top of the appropriate houses A “mash-up” is a web application that consumes ("remixes") content from different sources and aggregates them to create a new application A Mash-Up Combines Multiple Sources of Data
Image of page 5
© 2007-2015 Marco Papa & Ellis Horowitz 6 Characteristics of Ajax Applications • They are applications, not just web sites • They allow for smooth, continuous interaction • "Live" content • Visual Effects • Animations, dynamic icons • Single keystrokes can lead to server calls • New Widgets (selectors, buttons, tabs, lists) • New Styles of Interaction (drag-and-drop, keyboard shortcuts, double-click)
Image of page 6
© 2007-2015 Marco Papa & Ellis Horowitz 7 Comparing Traditional vs. AJAX Websites Traditional Interface construction is mainly the responsibility of the server User interaction is via form submissions An entire page is required
Image of page 7
Image of page 8

You've reached the end of your free preview.

Want to read all 68 pages?

  • Fall '07
  • Papa
  • Ajax, Ellis Horowitz, Marco Papa

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture