AJAX

Asynchronous JavaScript and XML.

AGENDA
 Introduction
 History

 Models

 Ajax Flow & XHR

 Technologies

 Framework

 Advantages / Disadvantages

 Market Trends
APPLICATIONS TODAY
 Desktop applications
 It usually come on a CD and install completely on your computer.
 The code that runs these applications resides on your desktop.
 It is usually pretty fast, has great user interfaces and is incredibly dynamic.

 Web Applications
 It runs on a Web server and you access the application with your Web browser
 It provides services you could never get on your desktop ( Amazon.com and
eBay).
 Waiting for a server to respond, waiting for a screen to refresh, waiting for a
request to come back and generate a new page.

 Ajax attempts to bridge the gap

between the functionality and
interactivity
WHAT IS AJAX ?
 AJAX = Asynchronous JavaScript and XML.
 AJAX is a technique for creating fast and dynamic web pages.

 A Web development technique/Technology for creating

interactive web applications
 Increase the Web page's interactivity, speed, and usability;
better user experience
 Shift a great deal of interaction to the Web surfer's computer
 Used to retrieve data and update selected parts of the page without
refreshing the entire page
 Example: Google Suggest, Google Maps

 AJAX applications are browser- and platform-

independent!
TECHNOLOGIES /
COMPONENTS OF AJAX

 XHTML (or HTML)

 Marking up and styling information
 DOM accessed with a client-side scripting language
 Dynamically display and interact with the information
presented
 XMLHttpRequest object
 Exchange data asynchronously with the web server
 XML
 Format for transferring data
 Language
 PHP/ASP.NET/JSP etc
WHY AJAX?
 Enables building Rich Internet Applications (RIA) –
Highly responsive applications
 Allows dynamic interaction on the Web

 Improves performance

 Real-time updates

 No plug-ins required (AIR, Flex, Flash)

HISTORY

 Applets
 Hidden Frames since mid-90’s.
 Iframe
 In 2005, Jesse James Garret wrote an article on AJAX
named “Ajax: A New Approach to Web Applications “.
CLASSIC WEB APPLICATION MODEL
AJAX WEB APPLICATION MODEL
REQUEST – RESPONSE MODEL
AJAX FLOW
AJAX – XMLHTTPREQUEST OBJECT
 The keystone of AJAX is the XMLHttpRequest object.
 The XMLHttpRequest object is used to exchange data with a server.

 An XMLHTTPRequest object can be created on the client by java script

 Depending on the web browser (Firefox, various versions of Internet

Explorer), the code to create it is different

 var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
AJAX FRAMEWORKS

 The framework provides classical, cross-browser

functions to use the XMLHttpRequest object
 JavaScript libraries
 Jquery
 Prototype.
 Script Aculous
 Rico
 Mootools
 Yahoo UI.
 PHP frameworks
 AjaxAC
 Tiny Ajax

 Java frameworks
 DWR (Direct Web Remoting).
 Google Web Toolkit.

 .NET frameworks
 Microsoft Ajax Library(ALTLAS)
 ColdFusion frameworks
 AjaxCFC
ADVENETAGES
 Increases interactivity
 Save bandwidth

 Helps avoiding some interactive tools like Flash

DISADVENTAGES
 “Search engine won't index your website right”
 “One url can lead to various states of the application”

 “The browser back button is broken !”

 Javascript is deactivated, your app doesn't work”

 “Your Javascript code is hard to debug, and lower in

quality”
USAGE CASES FOR AJAX
 Real-time server-side input form data validation
 User IDs, serial numbers, postal codes
 Removes the need to have validation logic at both client side
 for user responsiveness and at server side for security and
other reasons
 Auto-completion
 Email address, name, or city name may be auto-completed as
the user types
 Master detail operation
 Based on a user selection, more detailed information can be
fetched and displayed
 Advanced GUI widgets and controls
 Controls such as tree controls, menus, and progress bars may
be provided that do not require page refreshes
 Refreshing data
 HTML pages may poll data from a server for up-to-date data
such as scores, stock quotes, weather, or application-specific
Data
CURRENT ISSUES OF AJAX
• Complexity is increase
 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
 AJAX-based applications can be difficult to debug, test,
and maintain
 JavaScript is hard to test - automatic testing is hard
 Toolkits/Frameworks are not mature yet
 Most of them are in beta phase
 No standardization of the XMLHttpRequest yet
 Future version of IE will address this
 No support of XMLHttpRequest in old browsers
 Iframe will help
 JavaScript code is visible to a hacker
 Poorly designed JavaScript code can invite security problem
TRENDS IN MARKET
 IBM
 IBM AJAX Toolkit Framework
 Eclipse framework support for AJAX Toolkits
 Collaboration with Open Source

 Mircosoft
 AJAX.net(code-named Atlas)
 Itwill work across any Web browser that supports AJAX
technologies
 But it is not compatible with others(AJAX-style)
 Others
 Yahoo : give the user a feeling that they are no longer in a
browser
 Oracle : Application Server 10g release 3, Support AJAX
 Google : trogdor, an ajax webpage editor
REFERNCES
 http://en.wikipedia.org/wiki/Ajax
 http://www.w3schools.com/Ajax/
 http://java.sun.com/developer/technicalArticle
s/J2ee/AJAX
 http://computer.howstuffworks.com
 http://en.wikipedia.org/wiki/Ajax_framework
Thanks