ajax presentation
DESCRIPTION
Presentation on AJAX.TRANSCRIPT
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 !!!!