Javascript AJAX HTML WEB SERVER Asynchronous
Javascript HTML events DOM – document object model browser internal view of html page compute
Javascript HTML PHP script Asynchronous http exchanges AJAX events DOM compute WEB SERVER DB
AJAX FUNCTIONS
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( );
HTML SECTION This is unused Enter… -- input field id N100 is input to JS -- div id N200 will hold output from JS
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.
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
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