AJAX Asynchronous JavaScript and XML 1

AJAX Outline What is AJAX? Benefits Real world examples How it works 2

What is AJAX? Asynchronous JavaScript and XML (AJAX) Web development technique for creating web applications Makes web pages more responsive by exchanging small amounts of data Allows the web page to change its content without refreshing the whole page A web browser technology independent of web server software 3

Benefits Improves the user experience – Analyzing information typed into browser in real time – Provide a richer experience – Increases responsiveness of web pages Improve bandwidth utilization – Only data which is required is retrieved from the server 4

Real World Examples Google Maps ( (slidable maps) My Yahoo! ( (shuffling windows) 5

How it works AJAX runs in your browser Works with asynchronous data transfers(HTTP requests) between the browser and the web server Http requests are sent by JavaScript calls without having to submit a form XML is commonly used as the format for receiving server data but plain text may be used as well 6

1 – XMLHttpRequest object A page element must make a JavaScript call The JavaScript function must create an XMLHttpRequest object which is used to contact the server JavaScript must determine whether the client is IE or Firefox http = new ActiveXObject("Microsoft.XMLHTTP"); (IE) http = new XMLHttpRequest(); (Mozilla) 7

1 – XMLHttpRequest object Custom function to return XMLHttpRequest object for all possible types of browser function create_ajax() { var xmlhttp = null; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } 8

2 - Sending the request Once the XMLHttpRequest object has been created it must be set up to call the server var ajax = create_ajax(); ajax.onreadystatechange = function() { response(ajax); } ajax.open(method, url, async); ajax.send(str); The code above utilizes the XMLHttpRequest object to contact the server and retrieve server data When the response returns result the JavaScript function response(ajax) will be invoked and then can update the page 9

3 - Handling the Response Implementation of the JavaScript function which will be used to handle the response (Event Handler): function response(ajax){ /* Debug ajax state and status */ //alert(ajax.readyState + " - " + ajax.status); if (ajax.readyState == 4 && ajax.status == 200) { var str = ajax.responseText; document.getElementById("result").innerHTML = str; } Now the page has communicated with the server without having to refresh the entire page 10

readyState & status property The readyState property defines the current state of the XMLHttpRequest object Possible values for the readyState For the status it can either 200 (“OK”), 404 (Page not found), or 0 (cross domain request restriction) StateDescription 0The request is not initialized 1The request has been setup 2The request has been submitted 3The request is in process 4The request is completed 11

Example Server Client plus2num.html plus2num.php count(); ??? echo $_REQUEST["num1"] + $_REQUEST["num2"];... AJAX (POST/GET) AJAX(text/plain) [1] [2] [3] [4] [5] 12

Example plus2num.html (body section) Num1: + Num2: = ??? [1] 13

Example plus2num.html (head section)... ? ? ? function count() { var str = "num1=" + document.f.num1.value + "&" + "num2=" + document.f.num2.value; var ajax = create_ajax(); ajax.onreadystatechange = function() { response(ajax); } /* GET method */ ajax.open("GET", " + str, true); ajax.send(); /* POST method */ //ajax.open("POST", " true); //ajax.setRequestHeader("Content-type", // "application/x-www-form-urlencoded"); //ajax.send(str); } [2] [3] [4] / [5] 14 Refer to slide #10

Example plus2num.php <?php header("Content-type:text/plain"); header("Access-Control-Allow-Origin: *"); echo $_REQUEST["num1"] + $_REQUEST["num2"]; ?> Disable cross domain request restriction Change the default “text/html” PHP header 15

Example (AJAX using jQuery) plus2num_jquery.html (head section) $(document).ready(function(){ $("input#clkbtn").click(function(){ var str = $("form").serialize(); /* POST/GET method */ $("span").load(" str); }); }); [2] [3] / [4] / [5] [1] 16

Example (AJAX using jQuery) plus2num_jquery.html (body section) Num1: + Num2: = ??? 17

Example (AJAX using jQuery) plus2num_jquery.html (head section) Other options for get/post requests but need extra setResult function. $(document).ready(function(){ $("input#clkbtn").click(function(){ var str = $("form").serialize(); /* GET method */ //$.get(" + str, // function(data, status){ setResult(data, status); }); /* POST method */ //$.post(" str, // function(data, status){ setResult(data, status); }); }); }); function setResult(data, status) { $("span").text(data); } 18