Download - Ajax presentation
![Page 1: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/1.jpg)
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.
![Page 2: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/2.jpg)
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.
![Page 3: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/3.jpg)
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.
![Page 4: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/4.jpg)
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.
![Page 5: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/5.jpg)
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.
![Page 6: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/6.jpg)
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)
![Page 7: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/7.jpg)
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”.
![Page 8: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/8.jpg)
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
![Page 9: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/9.jpg)
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.
![Page 10: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/10.jpg)
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
![Page 11: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/11.jpg)
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
![Page 12: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/12.jpg)
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.
![Page 13: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/13.jpg)
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.
![Page 14: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/14.jpg)
Google Live Search
![Page 15: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/15.jpg)
Google Earth
![Page 16: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/16.jpg)
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
![Page 17: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/17.jpg)
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.
![Page 18: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/18.jpg)
Classic Server
![Page 19: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/19.jpg)
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
![Page 20: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/20.jpg)
AJAX Model
Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine
![Page 21: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/21.jpg)
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.
![Page 22: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/22.jpg)
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.
![Page 23: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/23.jpg)
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
![Page 24: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/24.jpg)
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
![Page 25: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/25.jpg)
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.
![Page 26: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/26.jpg)
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.
![Page 27: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/27.jpg)
AJAX Frameworks
There are four types of AJAX frameworks.
1) Direct AJAX frameworks2) Indirect AJAX frameworks3) AJAX component frameworks4) Server driven AJAX frameworks
![Page 28: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/28.jpg)
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
![Page 29: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/29.jpg)
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
![Page 30: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/30.jpg)
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.
![Page 31: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/31.jpg)
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.
![Page 32: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/32.jpg)
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.
![Page 33: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/33.jpg)
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.
![Page 34: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/34.jpg)
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.
![Page 35: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/35.jpg)
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
![Page 36: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/36.jpg)
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.
![Page 37: Ajax presentation](https://reader035.vdocuments.net/reader035/viewer/2022081602/54c822fa4a795919758b457f/html5/thumbnails/37.jpg)
Thank You !!!!