Introduction What is AJAX?AJAX stands for Asynchronous JavaScript and XML

There is no proper definition

AJAX neither a new nor a technology.

Combination of JavaScript,HTML,CSS and XML

Jesse James Garrett invented this acronym in Feb 2005 to describe its use by Google.

Introduction(cont…)

Web development technique for creating interacting web application

AJAX is not a new approach or a language, but that is a new way to use existing standards

Most of the Ajax world is focused on the client side and its effects

XML is used to move information between client and server.

Introduction(cont…)

HTML and CSS create format of output and making stylish output.

JavaScript bind all these element together and dynamically interact with the information with server.

Asynchronous??

In AJAX ,asynchronous means the code does not execute with loading a whole page but that is execute when an event is occurs.

The event may be load, click, index of combo box change etc.

JavaScript

JavaScript is one of the world's most popular programming languages › Its popularity is due entirely to its role as the

scripting language of the WWW along with VBScript

JavaScript has a syntax similar to Java but:› It is not a real programming language (it is

script)› It was developed at Netscape and not Sun.› It was originally called LiveScript, but that

name wasn't confusing enough.

JavaScript

JavaScript binds all the mentioned technologies together to create the Ajax “pattern”.› When a user clicks a button, you can use JavaScript

and XHTML to immediately update the UI› Then you spawn an asynchronous request to the

server using the XMLHttpRequest object via JavaScript to perform an update or query a database.

› When the request returns as XML, you can then use JavaScript, CSS, XSLT and DOM to update your UI accordingly without refreshing the entire page.

› Most importantly, users don't even know your code is communicating with the server: the Web site feels like it's instantly responding ("desktop-like" usability)

History

AJAX was not so much popular still……..

But then “Jesse James Garret” comes in the picture in February 2005……….

He suggest the name AJAX.

He wrote an article on AJAX named “AJAX:A New Approach To Web Applications”.

Why AJAX?

Although web development getting more and more popular, Users are still experienced the nasty part of having to click a button, wait until a new page loads, click another button wait until the new page loads , and so on.

AJAX is provide new opportunity for all that users

Mainly to build a fast, dynamic website, but also to save resources

What AJAX do?

With AJAX ,you communicate with the server behind the scenes, select the data which you want and display it instantly in a web page- no page refreshing is needed or no waiting.

Making a web application look and feel like a desktop application , that AJAX does.

How AJAX works?

In browser we write code in JavaScript that can fetch data from server as we needed

JavaScript use the XMLHttpRequest object to send a request to the server behind the scenes- without causing a page refreshing

The data that come back from the server can be XML or just may be plain text if you prefer

XMLHttpRequest

The XMLHttpRequest is originally developed by the Microsoft

XMLHttpRequest is the kernel of the AJAX

The XMLHttpRequest object allows client-side JavaScript to make HTTP requests to the server without reloading pages in the browser and without blocking the user

XMLHttpRequst(cont…)

This JavaScript object was originally introduced in Internet Explorer 5 by Microsoft and it is the enabling technology that allows asynchronous requests

The Mozilla project first implement the compatible browser with XMLHttpRequest in Mozilla 1.0 in 2002.

This implement latter followed by Apple since Safari 1.2,opera software since opera 8.0 etc.

Examples

Now we have AJAX enable yahoo! Search where there will be no refresh in page anywhere and can get search result at the same page without the refreshing that page

Just click on “search yahoo!” or “mail” and you will be get a result on the same page.

Another example of AJAX like Google maps, flickr, you tube, google suggest, Microsoft live etc.

Google Live Search

Google Earth

Classic model

The classic web application model works like this:

Most of the user http request go To the server directly.

The server does some processing — retrieves data, crunches numbers, talks to various legacy systems

And then returns an HTML page to the client

Classic Model

This approach makes a lot of technical sense, but it doesn’t make for a great user experience

At every step in a task, the user waits.

Classic Server

AJAX model

An Ajax application eliminates the start-stop-start-stop nature of interaction on the WebIt introduces an intermediary, an Ajax engine, between the user and the server.

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine, written in JavaScript and usually tucked away in a hidden frame.

The Ajax engine allows the user’s interaction with the application to happen asynchronously, independent of communication with the server

AJAX Model

Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine

Defining AJAX

Ajax incorporates several technologies, each flourishing in its own right, coming together in powerful new ways.

› standards-based presentation using XHTML, CSS

› dynamic display and interaction using DOM› data interchange and manipulation using XML,

XSLT› asynchronous data retrieval using

XMLHttpRequest› and JavaScript binding everything together.

XHTML,CSS

XHTML stands for EXtensible HyperText Markup Language › It consists of all the elements in HTML

combined with the syntax of XML. CSS stands for Cascading Style Sheets

› It is used to describe the presentation of a document written in HTML or XML.

DOM

The HTML DOM is the Document Object Model for HTML .› DOM provides a standard set of objects for

representing HTML and XML documents, and a standard interface for accessing and manipulating them.

› Essentially, it connects web pages to scripts or programming languages.

› It defines an HTML document as a collection of objects that have properties and methods and that can respond to events

XML, XSLT

XML stands for EXtensible Markup Language› XML was designed to describe data and to focus

on what data is (unlike HTML which was designed to display data and to focus on how data looks)

› It is a general-purpose markup language for creating special-purpose markup languages that carry data.

XSL stands for EXtensible Stylesheet Language› XSLT stands for XSL Transformations › XSLT is used to transform an XML document into

another XML document, or another type of document that is recognized by a browser, like HTML and XHTML

Advantages of AJAX

Client side:o That produce smooth, uninterrupted user

workflow.o Save time for taken to page load again.o Creates entirely new types of user interfaces,

that not possible in traditional model.o Small requests better equal responsiveness. Server side:o Doesn't required 3rd party software like Java and

flash.o Fit into normal code flow.o Most developer are know the JavaScript.

Disadvantages of AJAX

Client side:o Poor compatibility with old browsers and many

mobile devices.o The first time long wait for AJAX sites.o Problem with forward/back buttons and

bookmarks.o Limited capability like multimedia, interaction with

web cams and printers, local data storage and real time graphics.

Developer side:o Easily abused by the bad programmers.o Not everyone has JavaScript enabled.o Too much code makes browser slow.

AJAX Frameworks

There are four types of AJAX frameworks.

1) Direct AJAX frameworks2) Indirect AJAX frameworks3) AJAX component frameworks4) Server driven AJAX frameworks

Direct AJAX Frameworks

Direct AJAX frameworks is deal with HTML pages and used HTML elements.

Generally that is small Use for website for shopping

experience but not for web application

Indirect AJAX Frameworks

That is based on compilation technology

Required the knowledge of high level languages

Rather than used of JavaScript and CSS that is required programming languages

Compiler that turns high level language into JavaScript

AJAX component Frameworks

That offer pre build components which created by JavaScript or XML tags or adding special attributes to normal HTML elements

Large in size and used to create web applications rather than web sites.

Server driven AJAX frameworks

That is used components Components are created and

manipulated on the server using server side languages.

User actions are communicated via server using Ajax techniques or server side code using server side component model.

AJAX Alternatives

XUL› Pronounced "zool", XUL is a high performance markup

language for creating rich dynamic user interfaces › It’s part of the Mozilla browser and related

applications and is available in Mozilla browsers (like Firefox).

› XUL is comprised mainly of a set of high-performance widgets that can be combined together

› Advantages: high performance, fast, works with JavaScript, based on XML

› Disadvantages: Only compatible with Mozilla browsers.

AJAX Alternatives

XAML› XAML is a high performance markup language

for creating rich dynamic user interfaces.› It’s part of Avalon, Microsoft’s next generation

UI technology (will be supported in IE 7).› Advantages: high performance, robust, highly

configurable. › Disadvantages: Microsoft-only technology and

will be available only when Vista is released.

AJAX Alternatives

Java Applets› An Applet is a program written in JAVA

that can be included on a web page.› Advantages: Fast. Supported on most

platforms (with the Java plugin). › Disadvantages: Requires the Sun Java

plugin and takes a while to load.

AJAX Alternatives

SVG (Scalable Vector Graphics)

› A text based graphics language that describes images with vector shapes, text, and embedded raster graphics.

› It has good interoperability with CSS and JavaScript

› Advantages: Speed and flexibility.› Disadvantages: Requires proprietary plugins that

many firms will not allow users to install. Rare skillset required to do development. This language is still somewhat immature and developing

Conclusion

AJAX is a very innovative, fast, modern, outstanding technology for web pages which can provide rich user interface and can work almost like a desktop application.

Thank You !!!!