Ajax Tutorial

Need Of Ajax

To build Rich Internet Applications

What is the Rich Internet Applications?

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

--it typically runs in web browser(not need any softwarre installation)

--transfers the processing neccessary for the user interface to webclient and keep the bulk of the back on to server.

Benifits

--Richer

--More Responsive

--Client /Server Balance

--Asynchronous Communication

--NetWork Efficiency

Introduction Of AJAX:-

Ajax, or 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

(Js+Css+Dom+xmlHttpRequest+xml)àAJAX----Jesse James Garrett

Ajax is n’t a technology.It’s really several technologies,each flourishing in its own right,coming together in powerful as Ajax.

--Standards-based presentation using XHTML 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.

XmlHttpRequest:-

w A JavaScript Class that lets you make asynchronous Http request from JavaScript

w Make an Http Rrequest from a Java Script Event

w A call back JavaScript function is invoked at each state of HTTP request and response

How Ajax Works?

How Ajax Works with Simple Example:-

Steps:-

1. A client event occurs.

2. An XMLHttpRequest object is created and configured.

3. The XMLHttpRequest object makes a call.

4. The request is processed by the ValidateServlet.

5. The ValidateServlet returns an XML document containing the result.

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

7. The HTML DOM is updated.

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.

w RichInternet Applications without Flash

w Save BandWidth & Increase Usability

How Ajax is Different from normal Applications

Classic web application model works like this:-

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.

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.

if we were designing the Web from scratch for applications, we wouldn’t make users wait around. Once an interface is loaded, why should the user interaction come to a halt every time the application needs something from the server? In fact, why should the user see the application go to the server at all?

Ajax Application Model Works Like this:-

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 .

The Engine Responsibilities:-

1) Rendering the interface the user sees

2) Communicating with the server on the user’s behalf.

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

Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own. If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application.

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

4 Types of Ajax FrameWorks:-

1) Direct Ajax frameworks:-

These frameworks are generally smaller. They are commonly used for a web site such as a shopping experience, but not for a web application.

2)Ajax component frameworks

These frameworks offer pre-built components, such as tabbed panes, which automatically create and manage their own HTML. Components are generally created via JavaScript or XML tags, or by adding special attributes to normal HTML elements. These frameworks are generally larger, and intended for web applications rather than web sites.

3) Server-driven Ajax frameworks

Several frameworks offer a server-side component-based development model with some degree of Ajax support.

4) Frameworks by language/platform

JavaScript-- JavaScript Frameworks are browser-side frameworks

Ex:-JQuery,Prototype,Yahoo UI Library,Dojo Tool Kit,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

• Popular Frame works?

Yahoo,DWR,DOJO

Ajax Benefits:-

--Richer User Interface

--More Responsive

--Client /Server Balance

--NetWork Efficiency

Ajax More Popular Sites:-

w www.w3schools.com

w www.protopage.com

w www.ajaxtoolbox.com

w www.pressdisplay.com,www.tadalist.com

w www.youtube.com,www.backbase.com,www.flagr.com

Ajax Sequence Diagram:-

Why it is Bad:-

1. Disabled scripting
2. Loss of visibility to search engines
3. Building an Ajax-Powered Application will increase development time.
4. Debugging is very Difficult.
5. Breaks Back button support.
6. URL’s doesn’t change as state Changes.