SlideShare a Scribd company logo

Ajax

•
•
Venkat Krishnan
Venkat Krishnan

The document discusses Ajax, which uses a combination of technologies like XHTML, CSS, JavaScript, and XMLHttpRequest to retrieve data asynchronously from web servers without reloading the entire webpage. It allows web applications to be more interactive and responsive by exchanging small amounts of data with the server behind the scenes. While not new, Ajax became popular when Google used it to great effect in Gmail, showing how it could enhance the usability of web applications and create richer internet experiences without the need for plugins like Flash.

Related slideshows

Pracitcal AJAX
Pracitcal AJAXPracitcal AJAX
Pracitcal AJAX
 
Ajax basics
Ajax basicsAjax basics
Ajax basics
 
Ajax technology
Ajax technologyAjax technology
Ajax technology
 
1 of 15
Ajax! Presented Venkat Krishnan
What is Ajax • standards-based presentation using XHTML and CSS • dynamic display and interaction using the Document Object Model • data interchange and manipulation using XML and XSLT • asynchronous data retrieval using XMLHttpRequest • and JavaScript binding everything together 2
Classic vs. Ajax 3
Async Communication 4
5
Examples of AJAX • GMail • Google Maps • Google Suggest • Flickr 6
Is it new? • Not Really • Hidden Frames - IE5+, Mozilla 1.0+, Opera 7.6+ • Java - Applets 7
Why is it popular? • Google helped popularize, and legitimize it in GMail • Increase Usability of Web Applications • Rich Internet Applications without Flash • Save Bandwidth • Download only data you need • Faster interfaces (sometimes) 8
Why is it bad? • Breaks back button support • URL's don't change as state changes • Cross Browser Issues can be a pain • JavaScript may tax older machines CPU • Can't access domains other than the calling domain • May be disabled (for security reasons) or not available on some browsers • Debugging is difficult 9
XMLHttpRequest • A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript • Make an HTTP request from a JavaScript event • A call back JavaScript function is invoked at each state of the HTTP request and response 10
XMLHttpRequest Properties • onreadystatechange - call back function for state changes • readyState - the current state of the HTTP call • responseText - the text result of the request • responseXML - DOM xml object from the request • status - HTTP status code of the response • statusText - HTTP status text 11
XMLHttpRequest Example if (window.XMLHttpRequest) { var req = new XMLHttpRequest(); req.onreadystatechange = requestStateHandler; req.open("GET", "/somefile.xml", true); req.send(""); } function requestStateHandler() { if (req.readyState == 4) { //response ready alert(req.statusText); } } 12
IE does it differently • The above example however won't work on IE req = new ActiveXOjbect("Microsoft.XMLHTTP"); • You can't totally blame them because they invented it • Native XMLHttpRequest support should be in IE7 13
Cross Browser AJAX var req; function loadXMLDoc(url) { req = false; // branch for native XMLHttpRequest object if(window.XMLHttpRequest) { try { req = new XMLHttpRequest(); } catch(e) { req = false; } // branch for IE/Windows ActiveX version } else if(window.ActiveXObject) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { req = false; } } } if(req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(""); } } 14
Flash vs AJAX • No plugin for AJAX • Flash development tools cost money • Flash typically has slower page load time • Flash can work on older browsers • ActionScript doesn't have a cross browser issues • Flash can access other domains if there is a crossdomain.xml file 15

More Related Content

Ajax

  • 1. Ajax! Presented Venkat Krishnan
  • 2. What is Ajax • standards-based presentation using XHTML and CSS • dynamic display and interaction using the Document Object Model • data interchange and manipulation using XML and XSLT • asynchronous data retrieval using XMLHttpRequest • and JavaScript binding everything together 2
  • 5. 5
  • 6. Examples of AJAX • GMail • Google Maps • Google Suggest • Flickr 6
  • 7. Is it new? • Not Really • Hidden Frames - IE5+, Mozilla 1.0+, Opera 7.6+ • Java - Applets 7
  • 8. Why is it popular? • Google helped popularize, and legitimize it in GMail • Increase Usability of Web Applications • Rich Internet Applications without Flash • Save Bandwidth • Download only data you need • Faster interfaces (sometimes) 8
  • 9. Why is it bad? • Breaks back button support • URL's don't change as state changes • Cross Browser Issues can be a pain • JavaScript may tax older machines CPU • Can't access domains other than the calling domain • May be disabled (for security reasons) or not available on some browsers • Debugging is difficult 9
  • 10. XMLHttpRequest • A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript • Make an HTTP request from a JavaScript event • A call back JavaScript function is invoked at each state of the HTTP request and response 10
  • 11. XMLHttpRequest Properties • onreadystatechange - call back function for state changes • readyState - the current state of the HTTP call • responseText - the text result of the request • responseXML - DOM xml object from the request • status - HTTP status code of the response • statusText - HTTP status text 11
  • 12. XMLHttpRequest Example if (window.XMLHttpRequest) { var req = new XMLHttpRequest(); req.onreadystatechange = requestStateHandler; req.open("GET", "/somefile.xml", true); req.send(""); } function requestStateHandler() { if (req.readyState == 4) { //response ready alert(req.statusText); } } 12
  • 13. IE does it differently • The above example however won't work on IE req = new ActiveXOjbect("Microsoft.XMLHTTP"); • You can't totally blame them because they invented it • Native XMLHttpRequest support should be in IE7 13
  • 14. Cross Browser AJAX var req; function loadXMLDoc(url) { req = false; // branch for native XMLHttpRequest object if(window.XMLHttpRequest) { try { req = new XMLHttpRequest(); } catch(e) { req = false; } // branch for IE/Windows ActiveX version } else if(window.ActiveXObject) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { req = false; } } } if(req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(""); } } 14
  • 15. Flash vs AJAX • No plugin for AJAX • Flash development tools cost money • Flash typically has slower page load time • Flash can work on older browsers • ActionScript doesn't have a cross browser issues • Flash can access other domains if there is a crossdomain.xml file 15