function doajax() { // first we create the XHR object xmlhttp = new XMLHttpRequest(); var el = document.getElementById("rs" + xmlhttp.readyState); el.innerHTML = "readyState = " + xmlhttp.readyState + " " + new Date().getMilliseconds(); // here we assign an anonymous function as an event handler that is // called any time the "onreadystatechange" event has fired. xmlhttp.onreadystatechange = function () { el = document.getElementById("rs" + xmlhttp.readyState); el.innerHTML = "readyState = " + xmlhttp.readyState + " " + new Date().getMilliseconds(); //readyState == 4 indicates that all data has been receieved if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // Do something with xmlhttp.responseText } }; xmlhttp.open("GET", "http://fiddle.jshell.net/favicon.png", true); xmlhttp.send(); document.getElementById("msg").innerHTML = "End of JavaScript at time " + new Date().getMilliseconds(); }
<button onclick="doajax()">Do Ajax!</button> <br> <span id="rs0">0</span> <br> <span id="rs1">1</span> <br> <span id="rs2">2</span> <br> <span id="rs3">3</span> <br> <span id="rs4">4</span> <br> <span id="msg"></span> <br>