1. Javascript AJAX HTML WEB SERVER Asynchronous

2. Javascript HTML events DOM – document object model browser internal view of html page compute

3. Javascript HTML PHP script Asynchronous http exchanges AJAX events DOM compute WEB SERVER DB

4. AJAX FUNCTIONS

5. MAKES AN HTTP OBJECT function createRequestObject( ) { var ro; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer") { ro = new ActiveXObject("Microsoft.XMLHTTP"); } else { ro = new XMLHttpRequest(); } return ro; } var http = createRequestObject( );

6. HTML SECTION This is unused Enter… -- input field id N100 is input to JS -- div id N200 will hold output from JS

7. SENDS HTTP REQUEST TO WEB SERVER function sndReq() { u = document.getElementById("N100").value http.open('get', 'Ajax1.php?data=' + u + "&junk="+Math.random ( ) ); //avoids caching effects http.onreadystatechange = handleResponse; http.send(null); } //Builds HTTP request, says who processes it on server, and who handles response on Browser, and sends request.

8. PHP script - Ajax1.php – input named "data" <?php $data = $_GET["data"] ; print $data ; ?> -- results are “printed” to http. responseText variable in JS -- print statement outputs are all concatenated

9. HANDLES HTTP RESPONSE FROM WEB SERVER function handleResponse() { if( http.readyState == 4 ) //results downloaded to browser { var response = http.responseText ; document.getElementById("N200").innerHTML = response } -- responseText – receives print output from PHP script