Ajax : Ajax Asynchronous JavaScript and XML
History of Ajax : History of Ajax 2005 will definitely be remembered as the rise of AJAX – the new development technique that many believe will blur the line between web-based and desktop applications. This mystical acronym, authored by Adaptive Path in mid February, is a label for the rich, highly responsive and interactive interfaces of AJAX-enabled applications. It stands for “Asynchronous JavaScript + XML”. Although we are just beginning to realize its full potential, the proven success of famous AJAX-based projects like Google Maps signifies that this is not just another media hype, but rather a promising technology that may change web-applications as we know them
Introduction to Ajax : Introduction to Ajax Ajax, which consists of HTML, JavaScript technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. Ajax is far more than just a fad; it's a powerful approach to building Web sites and it's not nearly as hard to learn as an entire new language. Ajax incorporates: Standards-based presentation using XHTML and CSS Dynamic display and interaction using the Document Object Model Asynchronous server communication using XMLHttpRequest JavaScript binding everything together
Ajax is not… : Ajax is not… A language A toolkit A development environment New
Ajax is.. : Ajax is.. A new name for an old approach Not actually dependent on XML A technology originally developed by Microsoft A single function call Only one of a number of techniques for asynchronous access
About Ajax : About Ajax New development technique ---- will blur the line between web-based and desktop applications. ---- rich, highly responsive and interactive interfaces ---- Acronym stands for “ Asynchronous JavaScript + XML”.
Ajax changes the Web Rules : Ajax changes the Web Rules Data can be loaded on demand Pages can be interactive It’s possible to pull small amounts of data Web pages can store state Scripts can load dynamically What would you do if you could call functions on the server in your web page?
How does Ajax work? : How does Ajax work? The core idea behind AJAX is to make the communication with the server asynchronous, so that data is transferred and processed in the background. As a result the user can continue working on the other parts of the page without interruption. In an AJAX-enabled application only the relevant page elements are updated, only when this is necessary.
How Ajax works ? : How Ajax works ? The web server gets a standard page request The client loads the page. JavaScript on the page fires on an event The script makes an XMLHTTP Get or Post to the server The server sees it as just another HTTP request The result is sent to the client A callback function in the client JavaScript is fired when the data is complete .
About XmlHttpRequest object : About XmlHttpRequest object Create a new XMLHttpRequest object Create an XMLHttpRequest object on Microsoft browsers var xmlHttp = false; try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; }}
How and When to Use Ajax : How and When to Use Ajax Highly interactive applications Parts of pages Intranets Online wizards Data input & validation Data visualization
Ajax code : Ajax code if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP"); }
Ajax is more than that : Ajax is more than that Dynamic presentation based on XHTML + CSS; Dynamic display and interaction using Document Object Model : data exchange and manipulation using XML Asynchronous data fetching using XML Http Request; JavaScript as glue.
The paradigms : The paradigms
The models : The models
Ajax - Advantages : Ajax - Advantages --- Better Performance and Efficiency small amount of data transferred from the server. Beneficial for data-intensive applications as well as for low-bandwidth networks. --- More Responsive Interfaces the improved performance give the feeling that updates are happening instantly . AJAX web applications appear to behave much like their desktop counterparts. --- Reduced or Eliminated "Waiting" Time only the relevant page elements are updates, with the rest of the page remaining unchanged. This decreases the idle waiting time. --- Increased Usability --- Users Can Work with the Rest of the Page while data is being transferred in the background.
Ajax Examples : Ajax Examples
Applicability Scenarios : Applicability Scenarios --- Highly interactive applications Google Spreadsheet --- Data visualization – visualizing large datasets Google Maps --- Data input & validation it’s possible to validate the data the user enters, while they are entering it. They can then receive feedback (using the server’s intelligence) without the page being posted back. --- Active widgets
Ajax has drawbacks! : Ajax has drawbacks! Writing and Maintaining Complex JavaScript View State Management Breaking the Page Paradigm Accessibility New UI Interactivity Requires Learning
Ajax in action : Ajax in action Ajax enhanced: Google Maps Google Suggest Openrico Dyn Tables Rev10 Edit-in-Place Tables
Conclusion: : Conclusion:
Web References : Web References http://www.128.ibm.com/developerworks/java/library/waajaxintro1.html http://www.128.ibm.com/developerworks/java/library/j-ajax2/index.html http://www.128.ibm.com/developerworks/java/library/j-ajax3/index.html http://www.128.ibm.com/developerworks/java/library/jajax1/index.html http://www.maxkiesler.com/index.php/weblog/comments/60_more_helpful_ajax_tutorials/
fin... : fin... ??????????????????????? ?