Ajax presentation

Combination of JavaScript,HTML,CSS and XML

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

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.

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.

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

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

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

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.

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

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

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.

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.

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

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.

An Ajax application eliminates the
start-stop-start-stop nature of
interaction on the Web
It 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

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

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

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

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

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

 There are four types of AJAX frameworks.
1) Direct AJAX frameworks
2) Indirect AJAX frameworks
3) AJAX component frameworks
4) Server driven 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

 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

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

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

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

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

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

 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

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

Ajax presentation

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Ajax presentation (20)

Recently uploaded (20)

Ajax presentation