Ajax presentation


Published on

Presentation on AJAX.

Published in: Education, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ajax presentation

  1. 1. Combination of JavaScript,HTML,CSS and XMLJesse James Garrett invented this acronym in Feb2005 to describe its use by Google.
  2. 2. Web development technique for creatinginteracting web applicationAJAX is not a new approach or a language, butthat is a new way to use existing standardsMost of the Ajax world is focused on the clientside and its effectsXML is used to move information between clientand server.
  3. 3. HTML and CSS create format of output andmaking stylish output.JavaScript bind all these element togetherand dynamically interact with the informationwith server.
  4. 4. In AJAX ,asynchronous means the code doesnot execute with loading a whole page butthat is execute when an event is occurs.The event may be load, click, index ofcombo box change etc.
  5. 5.  JavaScript is one of the worlds 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 wasnt confusing enough.
  6. 6.  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 dont even know your code is communicating with the server: the Web site feels like its instantly responding ("desktop-like" usability)
  7. 7. AJAX was not so much popular still……..But then “Jesse James Garret” comes inthe picture in February 2005……….He suggest the name AJAX.He wrote an article on AJAX named “AJAX:ANew Approach To Web Applications”.
  8. 8. Although web development getting more andmore popular, Users are still experienced the nastypart of having to click a button, wait until a newpage loads, click another button wait until thenew page loads , and so on.AJAX is provide new opportunity for all that usersMainly to build a fast, dynamic website, but alsoto save resources
  9. 9. With AJAX ,you communicate with the serverbehind the scenes, select the data which youwant and display it instantly in a web page-no page refreshing is needed or no waiting.Making a web application look and feel like adesktop application , that AJAX does.
  10. 10. In browser we write code in JavaScript thatcan fetch data from server as we neededJavaScript use the XMLHttpRequest object tosend a request to the server behind thescenes- without causing a page refreshingThe data that come back from the server canbe XML or just may be plain text if you prefer
  11. 11. The XMLHttpRequest is originally developed bythe MicrosoftXMLHttpRequest is the kernel of the AJAXThe XMLHttpRequest object allows client-sideJavaScript to make HTTP requests to theserver without reloading pages in the browserand without blocking the user
  12. 12. This JavaScript object was originally introduced inInternet Explorer 5 by Microsoft and it is theenabling technology that allows asynchronousrequestsThe Mozilla project first implement thecompatible browser with XMLHttpRequest inMozilla 1.0 in 2002.This implement latter followed by Apple sinceSafari 1.2,opera software since opera 8.0 etc.
  13. 13. Now we have AJAX enable yahoo! Search wherethere will be no refresh in page anywhere andcan get search result at the same page withoutthe refreshing that pageJust click on “search yahoo!” or “mail” and youwill be get a result on the same page.Another example of AJAX like Google maps, flickr,you tube, google suggest, Microsoft live etc.
  14. 14. The classic web applicationmodel works like this:Most of the user http request goTo the server directly.The server does some processing — retrieves data, crunches numbers, talks to various legacy systemsAnd then returns an HTML pageto the client
  15. 15. This approach makes a lot of technicalsense, but it doesn’t make for a great userexperienceAt every step in a task, the user waits.
  16. 16. An Ajax application eliminates thestart-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 awayin a hidden frame.The Ajax engine allows the user’s interaction with the application to happen asynchronously, independent of communication with the server
  17. 17. Every user action that normally wouldgenerate an HTTP request takes the form of aJavaScript call to the Ajax engine
  18. 18.  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.
  19. 19.  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.
  20. 20.  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
  21. 21.  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
  22. 22.  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 Doesnt required 3rd party software like Java and flash.o Fit into normal code flow.o Most developer are know the JavaScript.
  23. 23.  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.
  24. 24.  There are four types of AJAX frameworks.1) Direct AJAX frameworks2) Indirect AJAX frameworks3) AJAX component frameworks4) Server driven AJAX frameworks
  25. 25.  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
  26. 26.  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
  27. 27.  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.
  28. 28.  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.
  29. 29.  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.
  30. 30.  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.
  31. 31.  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.
  32. 32.  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
  33. 33.  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.
  34. 34. Thank You !!!!