 Ajax Session Agenda

• Why we need Ajax?

• What Actually Ajax?

• How Ajax Works?

• Why Ajax Become Popular?

• How Ajax is Different from normal Applications?

• Examples with Raw Ajax

• Ajax Frame Works?

• Examples with Frame works?

• Ajax Benefits

• Ajax Most Popular sites?

 Need of Ajax

• To build Rich Internet Applications

What is the Rich Internet Applications?

 Rich Internet Applications

• These are the web applications that have the functionality and features of
traditional desktop applications.

• This applications typically runs in web browser(not need any software

installation)

• Transfers the processing necessary for the user interface to web client and keep
the bulk of the back on to server.

 Benefits From RIAs

• Benefits

• Richer

• More Responsive
 • Client /Server Balance

• Asynchronous Communication

• Network Efficiency

 Introduction of AJAX

• AJAX is a web development technique used for creating interactive web

applications.

• 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.

• This is intended to increase the web page's interactivity, speed, functionality, and
usability

 What actually Ajax

• AJAX◊(Js+Css+Dom+xmlHttpRequest+xml)

• ---- Jesse James Garrett

• Ajax is not a technology. It’s really several technologies, each flourishing in its
own right,

• coming together in powerful as Ajax.

• --Standards-based presentation using X/HTML and Css

• --Dynamic display and interaction using the

• Document Object Model(DOM)

• --Data interchange and manipulation using XML and XLST

• --Asynchronous data retrieval using XmlHTTPRequest.

• And JavaScript for carrying events from HTML body to HTML head.

 How Ajax Works

 How Ajax Works with Simple Example

• A client event occurs.

 • An XMLHttpRequest object is created and configured.

• The XMLHttpRequest object makes a call.

• The request is processed by the ValidateServlet.

• The ValidateServlet returns an XML document containing the result.

• The XMLHttpRequest object calls the callback() function and processes the
result.

• The HTML DOM is updated.

 Simple Example
 Why Ajax Become Popular

• Sites like

 Google Mail (Gmail.com) ,

 Google Maps (google.com/maps),

 Google Groups,

 Google Suggest,

 Flickr,

 and Amazon’s A9.com have really made AJAX popular.

• 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.

 How Ajax is Different from normal Applications

 How Classic web application model works

• 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.

 How Classic web application model works

• This approach makes a lot of technical sense, but it doesn’t make for a great user
experience and arise questions like
While the server is doing its thing, what’s the user doing? --Waiting.
 How Ajax Application Model Works

• 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.

• Instead of loading a webpage, at the start of the session, the browser loads an
Ajax engine — written in JavaScript .

 Ajax Engine Responsibilities

• The Engine Responsibilities:-

o Rendering the interface the user sees

o Communicating with the server on the user’s behalf.

o 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

 The synchronous interaction pattern of a traditional web application (top) compared

with the asynchronous pattern of an Ajax application (bottom).
 Examples with Raw Ajax
 Ajax Frame Works

• The goal of the framework is to provide the Ajax engine.

• Framework eases the work of the Ajax programmer at two levels: -

 On the client side:-

 It offers JavaScript functions to send requests to the server.

 On the server side:-

 It processes the requests, searches for the data, and

transmits them to the browser...

 Ajax FrameWorks Types Ajax Frame Works Direct Ajax FWs Ajax component
Server-driven Ajax language/platform
 Frameworks by language/platform

• JavaScript -- JavaScript Frameworks are browser-side frameworks

 • Ex:-JQuery,Prototype,Yahoo UI Library,DojoToolKit,Qooxdoo,

• Clean Ajax,Ext, Spry framework , Script.aculo.us

• C++ -- C++ Toolkits are interfaces to AJAX technology.

• Ex:-Wt(witty)

• Java -- Such frameworks permit the use of Java web services interactively with
web pages.

• DWR , a remoting toolkit and DHTML library ,

• Google Web Toolkit , a widget library with Java to Javascript compiler

• ThinWire , open source Swing-like AJAX framework for developing web

applications

• Echo , a java framework for AJAX servlets

• .NET

• ASP.NET AJAX , Ajax.NET Professional

• PHP

• Xajax ,Sajax

 Examples with Frame works

• Yahoo ,DWR, DOJO

 Path

 Ajax Benefits

• --Richer User Interface

• --More Responsive

• --Client /Server Balance

• --NetWork Efficiency

 Ajax More Popular Sites

 Why Ajax is Bad
• Disabled scripting

• Loss of visibility to search engines

• Building an Ajax-Powered Application will increase development time.

• Error Debugging very Difficult.