Ajax Asynchronous JavaScript and XML Term coined on the 18 th - PowerPoint PPT Presentation

Ajax Asynchronous JavaScript and XML ◮ Term coined on the 18 th February 2005 by Jesse James Garrett ◮ Asynchronous HTTP requests vs. Synchronous ◮ Which means... Interactive vs. Passive ◮ All from Javascript Why Ajax? “I needed something shorter than ’Asynchronous JavaScript+CSS+DOM+XMLHttpRequest’ to use when discussing this approach with clients.” f-iacobelli@neiu.edu MAP

Ajax Asynchronous JavaScript and XML ◮ Term coined on the 18 th February 2005 by Jesse James Garrett ◮ Asynchronous HTTP requests vs. Synchronous ◮ Which means... Interactive vs. Passive ◮ All from Javascript Why Ajax? “I needed something shorter than ’Asynchronous JavaScript+CSS+DOM+XMLHttpRequest’ to use when discussing this approach with clients.” f-iacobelli@neiu.edu MAP

Ajax Asynchronous vs. Synchronous web apps f-iacobelli@neiu.edu MAP

Ajax Requests XMLHttpRequest ◮ Object that retrieves the contents of a URL ◮ Trace its roots to Microsoft ActiveX controls ◮ Has many properties ◮ readyState 0 → 1 → 2 → 3 ◮ resoponseText: the contents of the URL ◮ status: HTTP Status (200, 404, 500, more here..) ◮ statusText ◮ open ◮ readystatechange: listener for this event with callback function f-iacobelli@neiu.edu MAP

Ajax Callbacks Call Me, Maybe ◮ Once XMLHttpRequest completes it calls a function ◮ Which function? a callback function ◮ request=new XMLHttpRequest(); request.addEventListener("readystatechage",someFunction,false); f-iacobelli@neiu.edu MAP

Ajax The Callback Function’s role function someFunction(){ if(request.readyState==4 && asyncRequest/status == 200){ document.getElementById("SomeId").innerHTML = request.responseText; } } f-iacobelli@neiu.edu MAP

Ajax The Callback.. Maybe part function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; Â } } xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); xmlhttp.send(); } f-iacobelli@neiu.edu MAP

Ajax/JSON JSON ◮ Natural way to represent objects in Javascript ◮ increasingly popular ◮ JSON.parse does the work for us f-iacobelli@neiu.edu MAP